Obtener una matriz de valores de múltiples entradas usando jQuery

Question

¿Puede alguien decirme cómo obtener valores de varios campos de entrada?

tengo una lista con varias entradas como esta:

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

tengo una solución en Javascript (el formulario de envío):

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

¿Cómo puedo hacer la misma cosa en jQuery? serialize nativa función

Answer 1

No es válido tener dos entradas del mismo nombre. Si quieres hacer esto, puede utilizar <input name="titles[]">

Puede probar esto:

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

Con esta 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

EDITAR

Esta respuesta da usted los títulos en una matriz en lugar de una cadena usin g un separador |. Personalmente, creo que esto es mucho más útil.

Si acaba de enviar el formulario y desea admitir varios valores, utilice el método .serialize como se describe en la otra respuesta

Answer 2

Uso de jQuery:

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

docs

El método .serialize() crea una cadena de texto en notación estándar de codificación URL. Opera en un objeto jQuery que representa un conjunto de elementos de formulario.

Answer 3

Medios:

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

o

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

?

Answer 4

Además de la respuesta de @gdoron o @ macek, que probablemente sea el camino a seguir, me gustaría añadir que todo lo que está mal con el código que ha publicado es que tiene un } demasiado. Esto funciona (aunque todavía tiene margen de mejora):

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

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

});​ 

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

No sé qué navegador está usando, pero utilizando algo como Firebug o las herramientas de Chrome Dev puede ser bastante útil para detectar errores simples como este. Ver this reference para Chrome o this one para Firefox. Incluso IE tiene uno, solo presione F12.