プロが教える店舗＆オフィスのセキュリティ対策術

JQuery インプット要素 カウント減算について

解決済

  • 質問者：Marshmallows
  • 質問日時：
  • 回答数：3件

お世話になります。

JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。

問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。

下記はコードです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../library/js/jquery-1.6.js"></script>
<link rel="stylesheet" href="../library/css/defult.css">
<link rel="stylesheet" href="../library/css/style.css">
<title>メールアドレス登録</title>
<script type="text/javascript">
<!--
$(document).ready(function(){
$(function() {
var count;
var scntDiv = $('tbody.row');
var i = $('#row').size() + 2;
$('#addScnt').live('click', function() {
$('<tr><td><input type="text" style="width: 320px;" name="emailAddress_' + i +'" /></td><td><a href="#" id="addScnt">Add</a></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);
count = i++;
document.getElementById('cnt').value=count;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
count = i--;
document.getElementById('cnt').value=count;
}
return false;
});
});
});
-->
</script>
</head>
<body>
<div id="content">
<h1>メールアドレス登録</h1>
<form id="multi">
<table>
<tbody class="row">
<tr>
<td><input type="text" style="width: 320px;" name="emailAddress_1" /></td>
<td><a href="#" id="addScnt">Add</a></td>
</tr>
</tbody>
</table>
<input type="hidden" name="cnt" id="cnt" />
<div id="process">
<input type="submit" class="processing" name="submit" value="次へ"/>
</div>
</form>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

どういう仕様だがわからないので「うまくいかない」について


求める結果と現在の状況を補足して。

流し読みだけど

$(document).ready(function(){
$(function() {
は無駄。

要素につけられるIDは一意にする必要がある。
追加時にid="addScnt"やid="remScnt"で固定したら一意にならない。
    • good
    • 0
    • 件
通報する

No.2

ちょっと読み解いていくとおかしいところがたくさん。


$('#row').size()がどの要素だかわからない。id="row"を取得している。
$(this).parents('p')を取得しているが<p>が見当たらない。
変数iの使い方、ロード時にしか値をとってない。(現状$('#row')なんか指定しているから取れてないと思うけど)

開発者ツール使って、変数の動きを見てみたほうがいいよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご指摘ありがとうございます。確認致します。

通報する
お礼日時：2014/11/06 10:56

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

やりたいことがよくわからないのと、他の方のおっしゃるように疑問点やおかしな（？）点がありますが・・・



◇インプット要素のnameを制御しているおつもりだと想像しますが、ご提示の制御だと同じ名前の要素が複数できる可能性がありますが予定通りでしょうか？
例えば入力欄が3個ある状態から、中央のものを削除（_2を削除）して1個追加すると、_1、_3、_3の名前になりそう・・・

◇変数countで入力欄を記憶しているのだと思いますが、DOM要素を数えていまうという方法もあります。（若干の時間ロスですが、いちいち制御する必要がないので簡単かつ確実です）


なさりたいことがわからないので、勝手な想像で単純化した例を・・・
（hiddenの要素は確認のため表示にしてあります）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#tbl1 input{ width:320px; }
span.add, span.delete{ margin:0 10px; color:blue; cursor:pointer; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function() {

var tbl = $("#tbl1");
var row = tbl.find("tr:first-child").clone(true)
.append("<td><span class='delete'>Delete</span></td>");

tbl.on("click", "span.add", function(){
tbl.find("tbody").append(row.clone(true));
adjust();
}).on("click", "span.delete", function(){
$(this).parent().parent("tr").remove();
adjust();
});

function adjust(){
var inp = $("#tbl1 input");
inp.each(function(i, e){$(e).attr("name", "emailAddress_" + (i+1));});
$("#cnt").attr("value", inp.length);
}

});
</script>
</head>

<body>

<div>
<h1>メールアドレス登録</h1>
<form name="multi" method="put" action="">

<table id="tbl1">
<tbody>
<tr>
<td><input type="text" name="emailAddress_1"></td>
<td><span class="add">Add</span></td>
</tr>
</tbody>
</table>

<p>count：<input type="text" id="cnt" name="cnt" value="1">
<p><input type="submit" value="次へ">

</form>
</div>

</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報