Erhalten Array von Werten aus mehreren Eingaben mit jQuery

Question

Kann mir bitte jemand wissen, wie man Werte aus mehreren Eingabefeldern bekommen?

Ich habe eine Liste mit mehreren Eingängen wie folgt aus:

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

ich eine Lösung in Javascript haben (auf Formular):

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

Wie kann ich die gleiche Sache in JQuery tun?

Answer 1

Es ist nicht zulässig, zwei Eingänge mit demselben Namen zu haben. Wenn Sie dies tun möchten, können Sie <input name="titles[]">

können Sie dies versuchen:

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

Mit diesem 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

Diese Antwort gibt Sie die Titel in einem Array anstelle einer Zeichenfolge usin g ein | Separator. Persönlich finde ich das viel brauchbarer.

Wenn Sie nur das Formular abschicken und Sie möchten mehrere Werte unterstützen, verwenden Sie die .serialize Methode wie in der anderen Antwort beschrieben

Answer 2

Verwenden jQuerys nativer serialize Funktion:

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

docs

Die .serialize() Methode erstellt eine Textzeichenfolge in Standard-URL-kodierten Notation. Es arbeitet mit einem jQuery-Objekt, das eine Gruppe von Formularelementen darstellt.

Answer 3

Mittel:

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

oder

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

?

Answer 4

Neben @ gdoron oder @ maceks Antwort, die wahrscheinlich der Weg zu gehen sind, möchte ich hinzufügen, dass alles, was mit dem Code falsch ist, dass Sie einen } zu viel haben. Das funktioniert (obwohl es immer noch Raum für Verbesserungen hat):

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

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

});​ 

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

Ich weiß nicht, welchen Browser Sie verwenden, aber wie Firebug oder den Chrome Dev-Tools können ziemlich praktisch mit sth solche Fehler zu entdecken. Siehe this reference für Chrome oder this one für Firefox. Selbst IE hat einen - drücken Sie einfach F12.