Tengo un formulario que crea múltiples inputs
con un append (jQuery)
, el problema es que cuando hago referencia a ese name
para atrapar sus valores no me los toma, creo que es porque "no esta directamente en el DOM", como podria solucionar ese detalle, cabe mencionar que tambien uso VUEjs
.
CODIGO HTML
<label>Seleccione el tipo de pregunta</label>
<div class="form-group">
<div class="input-group">
<select class="form-control" v-model="tquestion[index]" @change="createInputs(index)">
<option v-for="tpregunta of tipo_preguntas" :value="tpregunta.tipo_pre_id">{{ tpregunta.tipo_pre_name }}</option>
</select>
</div>
</div>
<div class="input">
</div>
SCRIPT CON VUE
createInputs: function(index){
$('.input').append(`
<input type="text" name="test[${index}][]" placeholder="Ingrese Respuesta">
`);
},
set_pregunta: function(e){
e.preventDefault();
console.log($('input[name=test]').val());
return;
Ahora, si intento acceder de la siguiente manera $('input[name=test[index]]').val())
me muestra el siguiente error.
Uncaught Error: Syntax error, unrecognized expression: input[name=test[index]]
at Function.ga.error (jquery.js:4957)
at ga.tokenize (jquery.js:5580)
at ga.select (jquery.js:5867)
at Function.ga [as find] (jquery.js:4502)
at n.fn.init.find (jquery.js:6123)
at new n.fn.init (jquery.js:6170)
at n (jquery.js:3800)
at un.set_pregunta (preguntas_controller.js:60)
at t (vue.min.js:6)
at HTMLFormElement.Ir.t._withTask.i._withTask (vue.min.js:6)
input[name=test]
sin embargo el valor se lo indicas comoinput[name=test[index]]
por lo tanto no coincide y no lo encuentrainput[name=test]
te cogerá solo los que correspondan a eso exacto,test[index]
no lo mostrará ya que no coincide. Si pruebas a quitar el índice al crear los inputs y todos tienenname=test
a secas ¿Te los encuentra?