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

2023/09/06 00:08

このQ&Aのポイント

JQueryを使用してインプット要素を追加・削除できるアプリケーションの問題点
インプット要素の数を追加した合計数量を取得し削除するとうまくいかない
解決策として、適切なコードを追加する必要がある

ベストアンサー

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

2014/11/06 05:31

お世話になります。 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">  </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>

Marshmallows
お礼率48% (24/49)

JavaScript
回答数3
ありがとう数10

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2014/11/06 14:50 回答No.3

やりたいことがよくわからないのと、他の方のおっしゃるように疑問点やおかしな（？）点がありますが・・・ ◇インプット要素の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>

その他の回答 (2)

Taiyonoshizuku
ベストアンサー率37% (183/489)

2014/11/06 07:55 回答No.2

ちょっと読み解いていくとおかしいところがたくさん。 $('#row').size()がどの要素だかわからない。id="row"を取得している。 $(this).parents('p')を取得しているが<p>が見当たらない。変数iの使い方、ロード時にしか値をとってない。(現状$('#row')なんか指定しているから取れてないと思うけど) 開発者ツール使って、変数の動きを見てみたほうがいいよ。

質問者

お礼 2014/11/06 10:56

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

Taiyonoshizuku
ベストアンサー率37% (183/489)

2014/11/06 07:34 回答No.1

どういう仕様だがわからないので「うまくいかない」について求める結果と現在の状況を補足して。流し読みだけど $(document).ready(function(){ $(function() { は無駄。要素につけられるIDは一意にする必要がある。追加時にid="addScnt"やid="remScnt"で固定したら一意にならない。

関連するQ&A

jQuery.lightpop.jsの動作について
jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。現在弊社ではjQuery.lightpop.jsライブラリを使用してリンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>
- ベストアンサー
- JavaScript
PHP POSTについて質問です
　　こんにちわ PHP初心者です。今ショッピングカートづくりをしています。そこでピンチなのでご指導お願いいたします。商品を発送する送り先情報を必要な数だけonclickで一件一件増やしもらってその情報を次のページで確認してもらうようにしたいのですが <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var tbl_cnt = 1; jQuery(document).ready(function($) { $('#add_btn').click(function() { var original = $('#form_set_' + tbl_cnt); tbl_cnt++; $(original).clone().insertAfter(original) .attr('id', 'form_set_' + tbl_cnt) .find('label').each(function(idx, obj) { $(obj).attr('for', $(obj).attr('for').replace(/_[0-9]+$/, '_' + tbl_cnt)); }).end() .find('input').each(function(idx, obj) { $(obj).attr({ 'id' : $(obj).attr('id').replace(/_[0-9]+$/, '_' + tbl_cnt), 'name' : $(obj).attr('name').replace(/_[0-9]+$/, '_' + tbl_cnt) }).val(''); }); }); }); </script> <form action="shop_check.php" method="post"> <table id="form1"> <tbody> <tr> <td><label for="okuriname">氏名</label></td> <td><input type="text" id="okuriname" name="okuriname[$i]"></td> </tr> <tr> <td><label for="okuriemail">email</label></td> <td><input type="text" id="okuriemail" name="okuriemail"></td> </tr> <tr> <td><label for="okuripostal1">郵便番号</label></td> <td><input type="text" id="okuripostal1" name="okuripostal1">-</td> <td><input type="text" id="okuripostal2" name="okuripostal2"></td> </tr> <tr> <td><label for="okuriaddress">住所</label></td> <td><input type="text" id="okuriaddress" name="okuriaddress"></td> </tr> <tr> <td><label for="okuritel">電話番号</label></td> <td><input type="text" id="okuritel" name="okuritel"></td> </tr> </tbody> </table> <input type="button" value="送り先の追加" id="add_btn"><br> <input type="submit" value="送信" name="submit"> </form> この後どのようにしたら次のページで複数の情報を受け取ればいいのでしょうか？（javascriptはweb上にあったものを引用してます。） javascriptの事もわかっていませんなのでお手柔らかにおねがいします。
- ベストアンサー
- PHP
jQuery テキストボックス読み取り解除
標題について、うまく動作しません。お手数ですが、ご教授願えたらと思っています。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> 仕様：テキストボックスをクリックしたら、読み取り専用が解除される。 ※Ajaxの初期ロード時に各々の項目はreadOnly=true設定上記が可能なら、その後拡張仕様として、フォーカスアウトした時に再度 readOnly=trueに設定 html <table> <tr> <td><input type="text" id="code[1]" value="00001"></td> </tr> <tr> <td><input type="text" id="code[2]" value="00002"></td> </tr> <tr> <td><input type="text" id="code[3]" value="00003"></td> </tr> jQuery (function($){ $('input[type="text"]').click(function(){ $(this).attr('readonly','readonly'); }); }); Ajaxの設定は何とかできなのですが、 jQueryの設定がうまくいきません。どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
jquery input 要素取得
失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できませんソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>
- ベストアンサー
- JavaScript
親要素の除去(Jqueryのunwrapメソッド)
jquery のunwrapメソッドを使用して下記コードを作成しました。「div#wrap1」の配下に「div#wrap2」、「div#wrap3」「div#wrap4」3つのdiv要素がありその3つの要素それぞれの配下にはテーブル(3つとも同じ名前のテーブル)が存在しています。ボタンを押下すると「div#wrap1」、「div#wrap2」、「div#wrap3」「div#wrap4」を全て除去し、テーブルも1つだけ残すコードを書きました。しかし、ボタン押下後、IEの開発者ツールでHTMLを確認するとテーブルは１つだけ残っているのですが「div#wrap1」配下に存在しています。コード中ではテーブルが残り1つになったテーブルに対して$(this).unwrap()とやっているのですがこれがうまくいっていないようです。原因がわかられる方はいらっしゃいますでしょうか。 <html> <head> <meta charset="UTF-8" /> <script src="jquery-1.9.1.js"></script> <script> $(function () { $( "#add" ).click(function () { if($("table[name='tblList']").length > 1) { // tableの親要素「div#wrap2」、「div#wrap3」「div#wrap4」を除去 $("table[name='tblList']").unwrap(); $("table[name='tblList']").each(function(){ // 「name='tblList'」のテーブルを削除 $(this).remove(); //「name='tblList'」のテーブルが残り1つの場合 if($("table[name='tblList']").length == 1) { // tableの親要素「div#wrap1」を除去 $(this).unwrap(); return false; } }); } }); }); </script> </head> <body> <input type="button" id="add" value="行追加"> <div id="wrap1"> <div id="wrap2"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap3"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> <div id="wrap4"> <table border="1" cellspacing="0" cellpadding="0" id="tblList" name="tblList"> <thead> <tr><th>バージョン</th><th>コードネーム</th><th>リリース</th></tr> </thead> <tbody> <tr><td>Mac OS X 10.0</td><td>Cheetah</td><td>2001年3月</td></tr> <tr><td>Mac OS X 10.1</td><td>Puma</td><td>2001年9月</td></tr> <tr><td>Mac OS X 10.2</td><td>Jaguar</td><td>2002年8月</td></tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
jQueryでloadした要素の操作ができない
loadにて特定のIDを読み込みした後、そのID内の要素にクラスを追加したりdiv要素を追加したりしようとしていますが、読み込んだり読み込まなかったりで困っています。 firebug、chromeは問題なし、iPhone、xperiaで読み込んだIDにaddClass, wrapが適用できません。ページをリロードすると適用されるので、読み込みの順番かと思いますが、、、 $(window).loadもダメでした。 <div id="loading01"></div> <script type="text/javascript"> $("#loading01").load("../index.html #hogehoge"); </script> <script type="text/javascript"> $("#hogehoge").ready(function() { $('#loading01 li')addClass('css01'); $('#loading01 a').wrap('<div class="css02"><div class="css03">') }); </script> 数時間困り果てています。。。よろしくお願いします。
- ベストアンサー
- JavaScript
ｊQuery UIについて
今ｊQueryUITabｓというプラグインを使ってタブによる切り替えを行おうとしています。このプラグインでは、タブの内容をajaxのように他のページを読み込めるとのことで以下のようなコードを書いてみました。この場合に、tabs.htmlの方で、読み込んだ先のフォームがクリックされたのを検知するにはどうしたらよいのでしょうか。単純に、tabs.htmlのスクリプトの部分に次のようなコードを書いても「Undifined」が表示されてしまいました。 $("#form1").submit(function(){ alert($("#form1_text").val()); }); もし解決策をご存知でしたら、ご教授お願いいたします。 --------- Tabs.html ------------------ ++++++script++++++++ $(function(){ $("#tabs").tabs(){}); }) ++++++script++++++++ ++++++html++++++++ <div id ="tabs"> <ul> <li><a href = "test1.html">テスト１のフォーム</a></li> <li><a href = "test2.html">テスト２のフォーム</a></li> </ul> </div> ++++++html++++++++ --------- Tabs.html ------------------ --------- test1.html ------------------ <form id = "form1"> <input type = "text" id = "form1_text"> <input type = "submit" id = "form1_submit"> </form> --------- test1.html ------------------ --------- test2.html ------------------ <form id = "form2"> <input type = "text" id = "form2_text"> <input type = "submit" id = "form2_submit"> </form> --------- test2.html ------------------
- 締切済み
- JavaScript
jQueryについて
jQueryのクロスフェードとlightboxを同一ページに設定しています。よく分かっていないのに、コピペで作っていますが、クロスフェードをするとlightboxが動作しません。設定をどう変更したら出来るようになりますか？どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"> <div id="container"> <div id="header"> <h1>いろはにほへと</h1> </div> <div id="menu"> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>
- 締切済み
- JavaScript
jqueryのsortableで行き来自由に
お世話になります jqueryのsortableでconnectWithを使うことで別のエリアにソートが可能になりますがすべての要素を別の要素に移動した場合もとの場所に戻すことが不可能になってしまいますこれを可能にするにはどうしたらいいのでしょうか例として以下のソース AエリアからBエリアに「a」「b」を移動させた後に BエリアからAエリアに戻そうとしても、移動できなくなってしまいます <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>connectWith</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sortable table tbody").sortable({ connectWith:'#sortable table tbody' }).disableSelection(); }); </script> </head> <body> <div id="sortable">  <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアA（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>a</td> </tr> <tr> <td>b</td> </tr> </tbody> </table>   <table width="100%" border="1" cellspacing="10" cellpadding="10"> <thead> <tr> <th>タイトル　エリアB（ここは動かしたくない）</th> </tr> </thead> <tbody> <tr> <td>c</td> </tr> <tr> <td>d</td> </tr> </tbody> </table>  </div> </body> </html> 対策方法御存知の方お助け下さいませ！
- ベストアンサー
- JavaScript
jquery、javascriptについて
あるdivエリア内をクリックすると、特定のチェックボックスにチェックが入るということをしています。（チェックボックスにチェックを入れるとdiv内の色が変わります。）つまり、divとチェックを連動させたいのです。その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、もっと簡単にまとめる方法はないのでしょうか？さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名であわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。そんなことができるのでしょうか？具体的に教えていただけると幸いです。よろしくお願いいたします。
- ベストアンサー
- JavaScript