Uzyskaj tablicę wartości z wielu wejść za pomocą jQuery

Question

Czy ktoś może dać mi znać, jak uzyskać wartości z kilku pól wejściowych?

Mam listę z kilkoma wejściami tak:

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

Mam rozwiązanie w JavaScript (na formularzu złożyć):

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

Jak zrobić to samo w JQuery?

Answer 1

Nie można mieć dwóch wejść o tej samej nazwie. Jeśli chcesz to zrobić, można użyć <input name="titles[]">

Można spróbować to:

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

Z tego 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

Ta odpowiedź daje ty tytułów w tablicy, zamiast ciągu znaków g separator |. Osobiście uważam, że jest o wiele bardziej użyteczny.

Jeśli dopiero składając formularz i chcesz wesprzeć wiele wartości, należy użyć metody .serialize jak opisano w drugiej odpowiedzi

Answer 2

użyć jQuery ojczystym serialize funkcja:

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

docs

Sposób .serialize() tworzy tekst w standardowej notacji URL-zakodowane. Działa na obiekcie jQuery reprezentującym zestaw elementów formularza.

Answer 3

oznacza:

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

lub

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

?

Answer 4

Oprócz odpowiedzi @ gdorona lub @ macek, która prawdopodobnie jest drogą do wyjścia, chciałbym dodać, że wszystko, co jest nie tak z opublikowanym przez ciebie kodem, to, że masz za dużo jednego }. To działa (choć nadal ma miejsca dla poprawy):

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

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

});​ 

Patrz: http://jsfiddle.net/8XJcc/

nie wiem jakiej przeglądarki używasz, ale przy użyciu czegoś takiego jak Firebug lub Narzędzia Chrome Dev może być bardzo przydatny aby wykryć proste błędy w ten sposób. Zobacz artykuł dla przeglądarki Chrome lub this one dla przeglądarki Firefox. Nawet IE ma jeden - po prostu naciśnij F12.