Получить массив значений из нескольких входов с помощью jQuery

Question

Может кто-нибудь, пожалуйста, дайте мне знать, как получить значения из нескольких полей ввода?

У меня есть список с несколькими входами, как это:

<li> 
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... /> 
</li> 
<li> 
<label>Additional Title: </label><input type='text' name='additionaltitlename' ... /> 
</li> 

У меня есть решение в Javascript (по форме представить):

... 
var extratitles = document.getElementsByName('additionaltitlename'); 
var str = ''; 
     for (var i = 0; i < extratitles.length; i++) { 
     str = str + '|' + extratitles.item(i).value; 
    } 
} 

Как сделать то же самое в JQuery? родной serialize функция

Answer 1

Недопустимо иметь два входа с одинаковым именем. Если вы хотите сделать это, вы можете использовать <input name="titles[]">

Вы можете попробовать это:

<input name="titles[]"> 
<input name="titles[]"> 
​<button>submit</button>​​​​​​​​​​​​​​​​​​​​​​​ 

С этим JQuery

// click handler 
function onClick(event) { 
    var titles = $('input[name^=titles]').map(function(idx, elem) { 
    return $(elem).val(); 
    }).get(); 

    console.log(titles); 
    event.preventDefault(); 
} 

// attach button click listener on dom ready 
$(function() { 
    $('button').click(onClick); 
}); 

See it working here on jsFiddle

EDIT

Этот ответ дает вы заголовки в массиве вместо строки usin g a | разделитель. Лично я считаю, что это намного более удобно.

Если вы просто заполните форму и вы хотите поддерживать несколько значений, используйте метод .serialize, как описано в другом ответе

Answer 2

Использовать JQuery в:

var data = $('input[name="additionaltitlename"]').serialize(); 

docs

Метод .serialize() создает текстовую строку в стандартный URL-кодированных обозначений. Он работает с объектом jQuery, представляющим набор элементов формы.

Answer 3

Средства:

str = ''; 
$("input[type='text']").each(function() { 
str = str + '|' + $(this).val(); 
}); 

или

str = ''; 
$("input[name='additionaltitlename']").each(function() { 
str = str + '|' + $(this).val(); 
}); 

?

Answer 4

В дополнение к ответам @ gdoron или @ macek, которые, вероятно, подходят, я хотел бы добавить, что все, что не так с кодом, который вы опубликовали, это то, что у вас есть один } слишком много. Это работает (хотя она по-прежнему имеет место для совершенствования):

$('#getpreviewbutton').click(function(){ 

    var extratitles = document.getElementsByName('additionaltitlename'); 
    var str = ''; 
      for (var i = 0; i < extratitles.length; i++) { 
      str = str + '|' + extratitles.item(i).value; 
      } 

});​ 

См: http://jsfiddle.net/8XJcc/

Я не знаю, какой браузер вы используете, но с использованием н как Firebug или инструментов Chrome Dev может быть очень удобно чтобы обнаружить простые ошибки, подобные этому. См. this reference для Chrome или this one для Firefox. Даже IE имеет один - просто нажмите F12.