jQueryを使用して、各フィールドに入力された値を取得し、送信時にテーブルを生成するフォームを作成しようとしています。何らかの理由で、正しい変数を渡すことができないようです。
関連する HTML は次のとおりです。
<form id="myform">
<ul id="pq_entry_1" class="clonedSection">
<li><input id="name_1" name="name_1" value="name1" type="text" /></li>
<li><input id="init_1" name="init_1" value="1" type="number" min="-100" max="100"/></li>
</ul>
<ul id="pq_entry_2" class="clonedSection">
<li><input id="name_2" name="name_2" value="name2" type="text" /></li>
<li><input id="init_2" name="init_2" value="1" type="number" min="-100" max="100"/></li>
</ul>
<ul id="pq_entry_3" class="clonedSection">
<li><input id="name_3" name="name_3" value="name3" type="text" /></li>
<li><input id="init_3" name="init_3" value="1" type="number" min="-100" max="100"/></li>
</ul>
<input id="submit" type="submit" value="Submit" name="submit">
</form>
<table>
<thead>
<th>Character</th>
<th>Initiative</th>
</thead>
<tbody id="results">
</tbody>
</table>
</body>
そしてjQueryスクリプト：
$(document).ready(function(){
$('#myform').submit(function() {
$('.clonedSection').each(function() {
var stname = $('input[type=text]').val();
var stinit = $('input[type=number]').val();
$('#results').append('<tr><td>'+stname+'</td><td>'+stinit+'</td></tr>');
});
return false;
});
});
...そして、ここで実際に動作しています。現在の動作方法: http://jsfiddle.net/KredH/
「submit」で期待される動作は、すべてのフィールドの内容 (デフォルトでは name1、name2、name3...) をリストすることですが、代わりに、最初のブロックの内容のみをリストすることがわかります。
どんな助けでも大歓迎です。