Código HTML:
Ver original
<form id="PerfilPuesto" name="PerfilPuesto" method="post"> <table width="950"> <tr> </p> <p> <input name="Empresa" type="text" required="required" class="datos" id="Empresa"> </p> <p> <input name="Contacto" type="text" required="required" class="datos" id="Contacto"> </p> <p> <input name="Email" type="email" required="required" class="datos" id="Email"> </tr> <tr> </p> <p> <input name="Tel" type="text" required="required" class="datos" id="Tel"> </p> <p> <input name="NIT" type="text" class="datos" id="NIT"> </p> <p> <input name="Direccion" type="text" class="datos" id="Direccion"> </tr> </table> <br /> <table width="950"> <tr> </p> <p> <input name="cant1" type="number" required="required" class="datosmenor3" id="cant1"> </p> <p> <input name="desc1" type="text" required="required" class="datos3" id="desc1"> </p> <p> <input name="Prec1" type="number" required="required" class="datosmenor3" id="Prec1"> </tr> </table> <br /> <div id="contenedorcampos"> <!--Dentro de este div se generan los campos dinámicos--> </div> </form>
Ese el el formulario html y dento del div con el nombre contenedorcampos van a crearse todos los campos dinámicos
Código Javascript:
Ver original
function agregarCampo(){ campos = campos + 1; var NvoCampo= document.createElement("div"); NvoCampo.id= "divcampo_"+(campos); NvoCampo.innerHTML= "<table width='950'>" + " <tr>" + " <td nowrap='nowrap'>" + " <p><label>Cantidad</label></p>" + " <p><input type='number' class='datosmenor3' required='required' min='1' name='cant" + campos + "' id='cant" + campos + "'></p>" + " </td>" + " <td nowrap='nowrap'>" + " <p><label>Descripión</label></p>" + " <p><input type='text' class='datos3' required='required' name='desc" + campos + "' id='desc" + campos + "'></p>" + " </td>" + " <td nowrap='nowrap'>" + " <p><label>Precio Unitario</label></p>" + " <p><input type='number' class='datosmenor3' required='required' min='1' name='Prec" + campos + "' id='Prec" + campos + "'></p>" + " </td>" + " </tr>" + " <tr>" + " <td nowrap='nowrap'>" + " </td>" + " <td nowrap='nowrap'>" + " </td>" + " <td nowrap='nowrap' align='right'>" + " <a href='JavaScript:quitarCampo(" + campos +");' class='link'> Quitar </a>" + " </td>" + " </tr>" + "</table>"; var contenedor= document.getElementById("contenedorcampos"); contenedor.appendChild(NvoCampo); } function quitarCampo(iddiv){ var eliminar = document.getElementById("divcampo_" + iddiv); var contenedor= document.getElementById("contenedorcampos"); contenedor.removeChild(eliminar); }
LAs funciones de javascript agregarCampo sirve para crear un campo a la vez y la otra para eliminar el ultimo campo creado pero a la hora de almacenar los elementos en las dos tablas es donde me pierdo.
Muchas gracias por leer y tambien por ayudar.