jQuery: использование .val () для присвоения значений переменным в цикле .each ()?

Question

jQuery: использование .val () для присвоения значений переменным в цикле .each ()?

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/

Вы можете видеть, что ожидаемое поведение в "submit" будет состоять в том, чтобы перечислить все содержимое поля (по умолчанию, name1, name2, name3...), но вместо этого оно отображает только содержимое из первого блока.

Любая помощь будет оценена по достоинству.

user2924137 27 окт. 2013, в 02:56

Источник

Теги:

jquery

each

1 ответ

Ещё вопросы

Chandu · Answer 1 · 2013-10-26T23-30-00.000Z

Вы пытаетесь получить текстовое поле без передачи контекста, поэтому $('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/