1

$(document).ready(function(){

  var addButton = $('.btn-danger'); //Add button selector
  var wrapper = $('.col-sm-9'); //Input field wrapper
  var fieldHTML = '<div style="margin-top:10px"class="input-group"> <input type="text" name="field_producto[]" class="form-control"  placeholder="Ingrese el producto">    <span class="input-group-btn" style="width:0px;"></span>    <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">    <div class="input-group-btn">  <button type="button" id="btn-erase" class="btn btn-danger">-</button></div></div>'; //New input field html
  $(addButton).click(function(){ //Once add button is clicked
        $(wrapper).append(fieldHTML);
  });
  $(wrapper).on('click', '#btn-erase', function(e){ //Once remove button is clicked
      e.preventDefault();
       $(this).parent().parent().remove(); //Remove field html
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="registrar.php" method="post">
           <div class="form-group">
         <label for="idusuario">Ingresar cliente:</label>
         <input type="text" REQUIRED class="form-control" id="idusuario" placeholder="Ingresar Nombre">
       </div>


       <div class="form-group">
           <label class="col-sm-3 control-label">Ingrese el producto:</label>
           <div class="col-sm-9">
             <div class="input-group">
               <input type="text" name="field_producto[]" class="form-control"  placeholder="Ingrese el producto">
               <span class="input-group-btn" style="width:0px;"></span>
                <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">
               <div class="input-group-btn">
                 <button type="button" class="btn btn-danger">+</button>
               </div>
             </div>
           </div>
       </div>

   <button type="submit" class="btn btn-primary">Registrar</button>
   <button type="button" class="btn btn-default">Cancelar</button>
</form>

Buenas. Como lo dice en el titulo de la pregunta, necesito ayuda para insertar los datos ingresados en inputs fields dinamicos. Usualmente agrego por cada input que coloco yo mismo, pero no se como hacerlo para insertar datos de inputs generados por jquery.

Este es el codigo jquery:

<script type="text/javascript">
$(document).ready(function(){

  var addButton = $('.btn-danger'); //Add button selector
  var wrapper = $('.col-sm-9'); //Input field wrapper
  var fieldHTML = '<div style="margin-top:10px"class="input-group"> <input type="text" name="field_producto[]" class="form-control"  placeholder="Ingrese el producto">    <span class="input-group-btn" style="width:0px;"></span>    <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">    <div class="input-group-btn">  <button type="button" id="btn-erase" class="btn btn-danger">-</button></div></div>'; //New input field html
  $(addButton).click(function(){ //Once add button is clicked
        $(wrapper).append(fieldHTML);
  });
  $(wrapper).on('click', '#btn-erase', function(e){ //Once remove button is clicked
      e.preventDefault();
       $(this).parent().parent().remove(); //Remove field html
  });
});
</script>

Y este seria el fragmento de mi codigo HTML con Bootstrap:

<form action="registrar.php" method="post">
           <div class="form-group">
         <label for="idusuario">Ingresar cliente:</label>
         <input type="text" REQUIRED class="form-control" id="idusuario" placeholder="Ingresar Nombre">
       </div>


       <div class="form-group">
           <label class="col-sm-3 control-label">Ingrese el producto:</label>
           <div class="col-sm-9">
             <div class="input-group">
               <input type="text" name="field_producto[]" class="form-control"  placeholder="Ingrese el producto">
               <span class="input-group-btn" style="width:0px;"></span>
                <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">
               <div class="input-group-btn">
                 <button type="button" class="btn btn-danger">+</button>
               </div>
             </div>
           </div>
       </div>

   <button type="submit" class="btn btn-primary">Registrar</button>
   <button type="button" class="btn btn-default">Cancelar</button>
</form>

Funciona bien, agrego los input, y los elimino, todo perfectamente ordenado. Ahora lo que deseo hacer es que al momento de registrar en la base de datos, pueda registrar todos lo que se ingreso en cada input generado. Estaré enormemente agradecido.

1 respuesta 1

0

Mirá aqui te dejo una aproximación a lo que buscas, espero que te ayude en algo...

Saludos.

$(document).ready(function(){

  var addButton = $('.btn-danger'); //Add button selector
  var wrapper = $('.col-sm-9'); //Input field wrapper
  var fieldHTML = '<div style="margin-top:10px"class="input-group"> <input type="text" name="field_producto[]" class="form-control"  placeholder="Ingrese el producto">    <span class="input-group-btn" style="width:0px;"></span>    <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">    <div class="input-group-btn">  <button type="button" id="btn-erase" class="btn btn-danger">-</button></div></div>'; //New input field html
  $(addButton).click(function(){ //Once add button is clicked
        $(wrapper).append(fieldHTML);
  });
  $(wrapper).on('click', '#btn-erase', function(e){ //Once remove button is clicked
      e.preventDefault();
       $(this).parent().parent().remove(); //Remove field html
  });
  
  $("#formulario").submit(function (){ // CUANDO ENVIEN EL FORMULARIO
    var a = document.querySelectorAll("input[type='text']"); //BUSCAMOS TODOS LOS INPUTS
     for(var b in a){ //COMO RETORNA UN ARRAY ITERAMOS
       var c = a[b];
       if(typeof c == "object"){ // SOLO PUROS OBJECTS
        if(c.id != "idusuario"){ // SOLO BUSCAMOS LOS PRODUCTOS Y CANTIDADES
          console.log(c.name,c.value); // NOMBRE DEL INPUT Y SU VALOR DE LA BUSQUEDA...
        } 
       }
     }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario" action="registrar.php" method="post">
           <div class="form-group">
         <label for="idusuario">Ingresar cliente:</label>
         <input type="text" REQUIRED class="form-control" id="idusuario" placeholder="Ingresar Nombre">
       </div>


       <div class="form-group">
           <label class="col-sm-3 control-label">Ingrese el producto:</label>
           <div class="col-sm-9">
             <div class="input-group">
               <input type="text" name="field_producto[]" class="form-control"  placeholder="Ingrese el producto">
               <span class="input-group-btn" style="width:0px;"></span>
                <input type="text" name="field_cantidad[]" class="form-control" placeholder="Ingrese la cantidad">
               <div class="input-group-btn">
                 <button type="button" class="btn btn-danger">+</button>
               </div>
             </div>
           </div>
       </div>

   <button type="submit" class="btn btn-primary">Registrar</button>
   <button type="button" class="btn btn-default">Cancelar</button>
</form>

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.