0

Me gustaría saber como puedo generar múltiples inputs dinámicamente con diferentes class="" o id="", mediante un botón "Add more" y que con otro boto genere un JSON multidimensional, y enviarlo por ajax, el único código que tengo hasta ahora, es este:

$(document).ready(function() {
var max_fields = 4;
var wrapper = $(".input_fields");
var add_button = $(".add_more");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remover</a></div>');
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});

Quiero que genere un JSON de esta forma:

{
"texts": {
"text1": "Input1",
"text2": "Input2",
"text3": "Input3",
"text4": "Input4"
},{
// ...
}
}

2 respuestas 2

1

Suponiendo el siguiente HTML:

<a class="add_more">Add more</a>
<div class="input_fields"></div>
<hr>
<a class="view_result">Ver JSON</a>
<pre></pre>

Puedes probar esta solución:

$(function(){
    var max_fields = 4;

    $('.add_more').click(function(e){
        e.preventDefault();

        var $wrapper = $('.input_fields');

        //validamos la cantidad de inputs
        if($wrapper.find('input').length == 4) return;

        //creamos el input
        var $input = $("<div><input type='text'> <a>Remover</a></div>"); 

        //le agregamos la funcionalidad de eliminarlo
        $input.find('a').click(function(e){
            e.preventDefault();
            $input.remove();
        });

        //lo añadimos al contenedor
        $('.input_fields').append($input);
    });

    //extraer los valores
    $('.view_result').click(function(e){
        e.preventDefault();
        var result = {};

        //recorremos los inputs y los añadimos al objeto 'result'
        $('.input_fields input').each(function(i, e){
            result['text'+i] = $(e).val();
        });

        //lo muesta
        $('pre').text(JSON.stringify(result));
    });
});

Puedes probarlo en: Codepen

1
  • Muchas gracias, el código funciona tal y como esperaba, de verdad muchas gracias. Commented el 6 sept. 2017 a las 19:47
0

Bueno a lo que entiendo quieres hacer un botón que agregue mas campos inputs, y cuando se vayan a enviar obtenga esos inputs y los meta en JSON, para enviar...

1.- Crea un botón que agregue un input al final del contenedor que estés teniendo para eso...

2.- con jquery, obtener el contenedor, e iterar los hijos e obteniendo cada ítem y metiendolos en un arreglo (array).

3- ya que preparaste tu array, convertir ese array en json y mandarlos a donde quieres que se procese...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.