Estoy tratando de crear un formulario de creación de cv y necesito permitir que los usuarios agreguen más entradas (automáticas).
Creé entradas y funcionan bien, pero necesito cambiar el atributo de nombre para cada bloque agregado automáticamente.
Por ejemplo :
<input type="text" id="fname" name="fname"> <input type="text" id="fname" name="fname2"> <input type="text" id="fname" name="fname3"> Sé que puedo usar la matriz name="value[]" , pero cada bloque nuevo va a una columna diferente en la base de datos, así que necesito cambiar los atributos.
Mi código :
$(document).ready(function() { var max_fields = 10; var wrapper = $("#contant"); var add_button = $("#add_form_field"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>'); } else { alert('You Riched limit.') } }); $(wrapper).on("click", "#deleteInput", function(e) { e.preventDefault(); $(this).parent('#input-social').remove(); x--; }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script> <div class="form-group"> <div class="row"> <label class="col-3 inputFontSize" for="social">Others</label> <div id="contant" class="col-7"> <button id="add_form_field" class="btn add_form_field">Add more <i class="fas fa-plus"></i></button> </div> <!-- col-9 --> </div> <!-- row --> </div> <!-- form-group -->gracias por todas las ayudas
Puede usar su variable x que se incrementa para cada input agregada y agregarla al atributo de name . Usaremos una 'cadena de plantilla'. El ajuste es name="fname${x}" que sustituirá ${x} por el valor de x .
$(wrapper).append(` <div id="input-social" class="input-container"> <input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"> <i class="fas fa-trash-alt"></i> </span> </div>` ); $(document).ready(function() { var max_fields = 10; var wrapper = $("#contant"); var add_button = $("#add_form_field"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append(`<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>`); } else { alert('You Riched limit.') } }); $(wrapper).on("click", "#deleteInput", function(e) { e.preventDefault(); $(this).parent('#input-social').remove(); x--; }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script> <div class="form-group"> <div class="row"> <label class="col-3 inputFontSize" for="social">Others</label> <div id="contant" class="col-7"> <button id="add_form_field" class="btn add_form_field">Add more <i class="fas fa-plus"></i></button> </div> <!-- col-9 --> </div> <!-- row --> </div> <!-- form-group -->