0

使用 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/

您可以看到“提交”的预期行为是列出所有字段内容（默认情况下，name1、name2、name3...），但它只列出第一个块中的内容。

任何帮助，将不胜感激。

4

1 回答 1

0

您试图在不传递上下文的情况下获取文本框，因此$('input[type=text]').val();在每次迭代中总是会返回相同的文本。因此，您将获得相同的附加值。相反，您可以将当前clonedSection作为 jquery 选择器的上下文传递（this指clonedSection循环中的当前）；

尝试这个：

$(document).ready(function(){
    $('#myform').submit(function() {
        $('.clonedSection').each(function() {
            var stname = $('input[type=text]', this).val(); //Notice the change here
            var stinit = $('input[type=number]', this).val(); //Notice the change here
            $('#results').append('<tr><td>'+stname+'</td><td>'+stinit+'</td></tr>');
        });
    return false;
    });
});

http://jsfiddle.net/KredH/1/

于 2013-10-27T00:48:56.513 回答