2

Gracias a la ayuda de Carlos Quitenro ya tengo el formulario dínamico funcionando.

La única modificación que necesitaría para que fuera perfecto sería añadir un valor máximo a la variable "contador" para evitar que el usuario intente enviar mas contactos de los que la tabla de mysql donde se envían admite.

Este es el código que tengo ahora:

        <html>
        <head>
            <title>Webslesson Demo - Dynamically Add or Remove input fields in PHP with JQuery</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
            <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
            <script src="jquery-ui.min.js" type="text/javascript"></script>
            <meta charset="utf-8">

        </head>
        <body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



            <div class="container">
                <br />
                <br />
                <h2 align="center"><a href="http://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html" title="Dynamically Add or Remove input fields in PHP with JQuery">Dynamically Add or Remove input fields in PHP with JQuery</a></h2><br />
                <form action="data.php" method="POST">
                            <table class="table table-bordered" id="dynamic_fieldcli">

                                <td colspan="3" align="center" style="color:#FFFFFF" bgcolor="#00CCFF"><b>DATOS DEL CLIENTE</b></td>
                                <tr>
                                    <td>
                                    <div   class="col-xs-4">
                                        <label for="ex1">Cliente</label>
                                        <input class="form-control" name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' type="text">
                                    </div>
                                    <div   class="col-xs-5">
                                        <label for="ex1">Referencia Facturación </label>
                                        <input class="form-control" name="referencia_cliente" placeholder="Introduce la referencía de facturación" id='referencia_cliente' type="text">
                                    </div>                         
                                    <div   class="col-xs-3">
                                        <label for="ex1">Orden de carga</label>
                                        <input class="form-control" name="ordendecarga" placeholder="Sube la orden de carga" id='ordendecarga' type="file">
                                    </div>
                                    </td>
                                </tr>
                            </table>




                <div class="lista2">

                    <div class="group" id="1">
                        <table class="table table-bordered" id="dynamic_fieldcli">

                            <td>
                            <div   class="col-xs-3">
                                <label for="ex1">Contacto</label>
                                <input class="form-control" name="nombrecon_1" id="nombrecon_1" type="text">
                            </div>
                            <div class="col-xs-3">
                                <label for="ex2">Teléfono</label>
                                <input class="form-control" name="telefonocon_1" id="telefonocon_1" type="text">
                            </div>
                            <div class="col-xs-5">
                                <label for="ex3">Mail</label>
                                <input class="form-control" name="mailcon_1" id="mailcon_1" type="text">
                            </div>
                            <a href="#" data-id="1" onClick="agrega()" class="btn btn-success">+</a>
                            </td>

                        </table>
                    </div>
                </div>

                    <button class="btn btn-success" type="submit">Submit</button>
                </form>
            </div>



        </body>
    </html>

    <script type="text/javascript">




            var contador = 1;

            function agrega(){
                contador = parseInt(contador) + 1;
                  var item = `<div class="group" id="`+contador+`">
                <table class="table table-bordered" id="dynamic_fieldcli">

                    <td>
                    <div   class="col-xs-3">
                        <label for="ex1">Contacto</label>
                        <input class="form-control" name="nombrecon_`+contador+`" id="nombrecon_`+contador+`" type="text">
                    </div>
                    <div class="col-xs-3">
                        <label for="ex2">Teléfono</label>
                        <input class="form-control" name="telefonocon_`+contador+`" id="telefonocon_`+contador+`" type="text">
                    </div>
                    <div class="col-xs-5">
                        <label for="ex3">Mail</label>
                        <input class="form-control" name="mailcon_`+contador+`" id="mailcon_`+contador+`" type="text">
                    </div>
                    <button onClick="elimina(`+contador+`)" data-id="`+contador+`" class="del">Eliminar</button>
                    </td>

                </table>
            </div>`;
                    $(".lista2").append(item);
            }

            function elimina(x){
                $("div[id="+x+"]").remove();
              contador = 0;
              $(".lista2 .group").each(function(){
                contador = parseInt(contador) + 1;
                $(this).attr('id',contador)
                $(this).find('input.form-control').attr('id','nombrecon_'+contador+'')
                $(this).find('input.form-control').attr('name','nombrecon_'+contador+'')
                $(this).find('input.form-control').attr('id','telefonocon_'+contador+'')
                $(this).find('input.form-control').attr('id','mailcon_'+contador+'')
                $(this).find('input.form-control').attr('name','telefonocon_'+contador+'')
                $(this).find('input.form-control').attr('name','mailcon_'+contador+'')
                $(this).find('button.del').attr('data-id',contador)
                $(this).find('button.del').attr('onClick','elimina('+contador+')')
              })
            }


        </script>
1
  • Revisa mi respuesta, la edite para adaptarla a tu nuevo código, ya con esto debería de estar funcionando el 3 may. 2018 a las 20:41

2 respuestas 2

3

He editado mi respuesta para adaptarla a tu nuevo código, puedes hacer estos cambios:

Como puedes ver hice algunos cambios menores, por ejemplo, cambiar el button por un enlace para así evitar el envío del formulario al clonar los formularios, así como un cambio menor en la formula de eliminación de clones

var contador = 1;

            function agrega(){
                contador = parseInt(contador) + 1;
                  var item = `<div class="group" id="`+contador+`">
                <table class="table table-bordered" id="dynamic_fieldcli">

                    <td>
                    <div   class="col-xs-3">
                        <label for="ex1">Contacto</label>
                        <input class="form-control" name="nombrecon_`+contador+`" id="nombrecon_`+contador+`" type="text">
                    </div>
                    <div class="col-xs-3">
                        <label for="ex2">Teléfono</label>
                        <input class="form-control" id="telefonocon_`+contador+`" type="text">
                    </div>
                    <div class="col-xs-5">
                        <label for="ex3">Mail</label>
                        <input class="form-control" id="mailcon_`+contador+`" type="text">
                    </div>
                    <a href="#" onClick="elimina(`+contador+`)" data-id="`+contador+`" class="btn btn-danger del">Eliminar</a>
                    </td>

                </table>
            </div>`;
                    $(".lista2").append(item);
            }

            function elimina(x){
                $("div[id="+x+"]").remove();
              contador = 0;
              $(".lista2 .group").each(function(){
                contador = parseInt(contador) + 1;
                $(this).attr('id',contador)
                $(this).find('input .form-control').attr('id','nombrecon_'+contador+'')
                $(this).find('input .form-control').attr('name','nombrecon_'+contador+'')
                $(this).find('input .form-control').attr('id','telefonocon_'+contador+'')
                $(this).find('input .form-control').attr('id','mailcon_'+contador+'')
                $(this).find('.del').attr('data-id',contador)
                $(this).find('.del').attr('onClick','elimina('+contador+')')
              })
            }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
                <br />
                <br />
                <h2 align="center"><a href="http://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html" title="Dynamically Add or Remove input fields in PHP with JQuery">Dynamically Add or Remove input fields in PHP with JQuery</a></h2><br />
                <div class="form-group">
                    <form name="add_name" id="add_name">
                        <div class="lista1">
                            <table class="table table-bordered" id="dynamic_fieldcli">

                                <td colspan="3" align="center" style="color:#FFFFFF" bgcolor="#00CCFF"><b>DATOS DEL CLIENTE</b></td>
                                <tr>
                                    <td>CLIENTE: <input type="text" name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' class="form-control name_list1" /></td>
                                    <td>REF. CLIENTE:<input type="text" name="referencia_cliente" placeholder="Introduce la referencía de facturación" id='referencia_cliente'  size="40" class="form-control name_list"" /></td>
                                    <td>Orden:<input type="file" name="ordendecarga" placeholder="Sube la orden de carga" id='ordendecarga'  size="10" class="form-control name_list"" /></td>
                                </tr>
                            </table>
                        </div>




            <div class="lista2">

                <div class="group" id="1">
                    <table class="table table-bordered" id="dynamic_fieldcli">

                        <td>
                        <div   class="col-xs-3">
                            <label for="ex1">Contacto</label>
                            <input class="form-control" name="nombrecon_1" id="nombrecon_1" type="text">
                        </div>
                        <div class="col-xs-3">
                            <label for="ex2">Teléfono</label>
                            <input class="form-control" id="telefonocon_1" type="text">
                        </div>
                        <div class="col-xs-5">
                            <label for="ex3">Mail</label>
                            <input class="form-control" id="mailcon_1" type="text">
                        </div>
                        <a href="#" data-id="1" onClick="agrega()" class="btn btn-success">+</a>
                        </td>

                    </table>
                </div>
            </div>


                </form>
            </div>



           <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit">

           </div>

4
  • Funcionando!! Me ha llevado un rato conseguir modificar el id del input text, pero por fin lo he conseguido. Muchísimas gracias Carlos Quintero el 30 abr. 2018 a las 22:02
  • Buenas Carlos Quintero, pude utilizar tu ejemplo, pero cuando quiero añadir el <div> dentro de un <form> el campo clonado aparece y desaparece. el 1 may. 2018 a las 18:22
  • @XavierVillafaina edita pu pregunta con el nuevo código para ayudarte mejor. Saludos el 1 may. 2018 a las 22:52
  • Muchas gracias por tu tiempo Carlos Quintero. Solo necesitaría poder introducir un valor máximo para "contador" para evitar que el usuario añada mas contactos de los que la tabla de mysql a donde envío el registro admite. He re formulado la pregunta el 4 may. 2018 a las 21:43
1

Te voy a sugerir otra forma mas sencilla de hacerlo que no se si te sirva:

Veo que los formularios los insertas en la tabla con el id 'dynamic_fieldcon', si lo que quieres es eliminar cada formulario uno por uno desde el primero,sin saltarte ninguno entonces puedes remplazar la función que remueve los formularios con este código:

$(document).on('click', '.btn_remove', function(){
        $('#dynamic_fieldcon').children('tr').eq(2).remove();
    });

en el código selecciono al tercer hijo tr de la tabla (porque veo que hay dos predeterminados, y los que vas a clonar se pondrán después de esos dos) para eliminarlo, entonces los demás formularios se irán recorriendo de abajo hacia arriba

Así ya no tendrás que ponerles un id para indicar su numero de indice. Espero que me hayas entendido por que la verdad no soy muy bueno explicando código :p

1
  • Garcias por tu respuesta Cris Rodriquez, pero necesito remunerar los id ya que luego este formulario ha de ser enviado a una tabla mysql el 30 abr. 2018 a las 22:05

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.