0

Tengo conocimiento en CRUD (Create, Read, Update and Delete) de MySQL PHP pero en un último proyecto de almacen he querido hacer un formulario que mientras más insumos se solicitan, se pueda agregar más filas de formulario, pero esto no sé cómo agregarle un id o name para recibir en el php sin que de problemas.

Este es el método script que utilizo para agregar nuevas filas de campos:

<script type="text/javascript">
    function add(){
var elemento = document.createElement("li"), contenido = document.createTextNode("Nueva Lista");
    elemento.appendChild(contenido);

var padre = document.getElementsByTagName("li")[0].parentNode;
padre.appendChild(elemento);
}

function add2(){
var fila = document.createElement("tr"), 
celda2 = document.createElement("td"),
celda3 = document.createElement("td"),
celda4 = document.createElement("td");

var text2 = document.createElement("input");
var text3 = document.createElement("input");
var text4 = document.createElement("input");

    celda2.appendChild(text2);
    celda3.appendChild(text3);
    celda4.appendChild(text4);

    fila.appendChild(celda2);
    fila.appendChild(celda3);
    fila.appendChild(celda4);


var tabla = document.getElementsByTagName("tr")[0].parentNode;
tabla.appendChild(fila);

}

</script>

Alguien podría realizar un ejemplo simple con un solo campo agregándolo y que en una base de datos simple reciban estos datos en conjunto sin problemas.

Gracias de antemano.

1
  • Hola, te refieres a un formulario dinamico? en el que puedas agregar mas inputs con el mismo name?
    – ByGroxD
    Commented el 31 ene. 2018 a las 3:43

2 respuestas 2

2

$(function(){
	$("#agrega").click(function(){
  	var item = `
    	<tr>
      	<td><input type="text" name="nombre[]" placeholder="Nombre"/></td>
        <td><input type="text" name="cedula[]" placeholder="Cédula"/></td>
      </tr>
    `;
    $("#lista").append(item)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="agrega">
Agregar
</button>
<table>
  <thead>
    <th>Nombre</th>
    <th>cedula</th>
  </thead>
  <tbody id="lista">
  </tbody>
</table>

Prueba algo asi:

$(function(){
    $("#agrega").click(function(){
    var item = `
        <tr>
        <td><input type="text" name="nombre[]" placeholder="Nombre"/></td>
        <td><input type="text" name="cedula[]" placeholder="Cédula"/></td>
      </tr>
    `;
    $("#lista").append(item)
  })
})

como ves en el ejemplo, estoy agregando lineas a una tabla con dos campos de texto para ser llenados, en los nombres de los campos utilizo corchetes para indicar a mi archivo php receptor que es un arreglo lo que esta por llegar, por ejemplo:

for($i=0; $i<count($_POST['nombre']); $i++){
    $nombre = $_POST['nombre'][$i];
    $cedula = $_POST['cedula'][$i];
    $a = $this->db->query("INSERT INTO tabla (nombre, cedula) VALUES ('$nombre','$cedula')");
    //Esto va a realizar una inserción en la base de datos por cada fila del array que llega desde mi formulario
}
0

Para agregar un name a tus nuevos elementos input puedes agregarlo directamente una vez creados de la siguiente manera:

var text2 = document.createElement("input");
text2.name = "nuevoname";

Si lo que quieres es que en todos los input lleguen al lado del servidor agrupados en un Array puedes usar la siguiente nomenclatura:

text2.name = "nuevoname[x]";

Donde x es el indice de tu input. Esto se puede omitir si quieres tener un unico grupo (nuevoname[]) o incluir los niveles que necesites (nuevoname[tr1][]).

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.