Crear input dinámico y almacenar en BD

HackID1 · #1 (**permalink**) 20/03/2015, 04:43

Buenas.

Estoy intentando realizar una aplicación que permita almacenar una cantidad indefinida de productos que se vayan agregando con un botón, es para realizar una facturación, en la cual un cliente se le reparan o venden X cantidad de productos.

El código que estoy usando es este, el crear el producto de forma dinámica funciona (se van añadiendo inputs para el nombre de producto) lo único que me falta es poder realizar el guardado de esto y de el resto de campos input que tengo en el form.

Adjunto el código de creación de INPUTS por JQuery.

Código HTML:

Ver original<html>
<head>
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-es.js"></script>
    <style>
        .top-buffer { 
            margin-top:20px; 
        }
    </style>
</head>
 
<body>
 
<table width="100%" cellpadding="0" >
            
            <form method="post" action="procesar_datos.php" name="miform" id="miform">
            
            <tr>
                <td colspan="2"> DATOS CLIENTE </td>
            <tr>
                <td> Nombre: </td>
                <td> <input type="text" name="nombre" value="" required="required" /> </td>
            </tr>
<div id="container ">
                <div class="row-fluid top-buffer">
                    <div class="col-lg-6 col-lg-offset-3 text-center">
                        <!-- <form id="miform" method="post" name="miform" > -->
                            <table id="tblprod" class="table table-hover table-bordered">
                                  <thead>
                                    <tr>
                                      <th>Codigo Producto</th>
                                      <th>Nombre</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>1</td>
                                       <td>
                                        <div class="form-group col-lg-12">
                                            <input class="form-control validate[required]"name="prod[]" />
                                        </div>
                                     </td>
                                    </tr>
             
                                  </tbody>
                                </table>
                                <button id="btnadd" class="btn btn-primary">Agregar Nuevo</button>
                                <button id="btnsubmit" type="submit" class="btn btn-success">Guardar</button>
                        <!-- </form> -->
                    </div>
                </div>
            </div>
 
            <div align="center">
                <tr>
                    <td colspan="2"> <input type="submit" name="enviar" value="Enviar" /> </td>
                </tr>
            </div>
                
        </table>
</form>
 
 
 
    <script type="text/javascript">
        $(function() {
            var count = 1;
            jQuery("#miform").validationEngine({promptPosition : "centerRight:0,-5"});
            
           $(document).on("click","#btnadd",function( event ) {  
              count++;
              $('#tblprod tr:last').after('<tr><td>'+count+'</td><td><div class="form-group col-lg-12"><input class="form-control validate[required]" name="prod[]" /></div></td></tr>');
              event.preventDefault();
           });
           
           $( "#miform" ).submit(function( event ) {
                  var frm = $(this);
              var formulario = $(this).serialize();
              
              if($('#miform').validationEngine('validate')){
              $.post( "save_article.php", formulario)
                        .done(function(data){
                        //  alert(data);
//aqui me falta conocer el codigo o que estoy haciendo mal que no me procesa los datos.
                      $(frm)[0].reset();
                    })
                    .fail(function() {
                    alert( "error no pude enviar los datos" );
                    });
              }
              event.preventDefault();
            });
 
        });
    </script>
    <!-- END SCRIPT PARA ARTICULOS DINAMICOS ANADIDOS -->
    
 
 
</body>
 
</html>

Bien con esto creo los inputs de cada producto y además el del nombre del cliente(hay mas campos pero bueno el problema esta aquí).

Ahora quiero guardar los datos pero no lo consigo, por ahora estoy intentando mostrar TODOS los campos que cree, pero no me funcionan ni el proceso de enviarlos al php.

El código PHP es:

Código PHP:

  
<?php

 
    if(isset($_POST['prod']) && !empty($_POST['prod'])) {

            echo join(",",$_POST['prod']);

            echo "<br/>" . $_POST['prod'];

    }

    else {

      echo 'failed';

    }

?>

Gracias a quien pueda ayudarme con el poco de código que creo me falta de JQuery (no soy muy entendido en este lenguaje solo lo muy básico), y ayudarme a mostrar los datos de todos los campos rellenados, luego esto lo intento procesar a la BD conectando y almacenando con INSERT en una tabla.

Saludos