How to insert data in MySQL with dynamic fields inputs?

Question

How to insert data in MySQL with dynamic fields inputs?

Navigation

#1 by (0 votes)

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>

Good morning. As it says in the title of the question, I need help to insert the data entered in dynamic inputs fields. I usually add for each input that I put myself, but I do not know how to insert data from inputs generated by jquery.

This is the jquery code:

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

And this would be the fragment of my HTML code with 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>

It works well, I add the input, and I delete it, everything perfectly ordered. Now what I want to do is that at the moment of registering in the database, I can register all that was entered in each generated input. I will be enormously grateful.

jquery html5 php

asked by Raphael 30.05.2016 в 21:16

source

1 answer

spring data jpa Pageable Sort Error Expand background image completely in a RelativeLayout

score 0 · Accepted Answer

Look here I leave you an approximation to what you are looking for, I hope it helps you in something ...

Greetings.

$(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>