0

Estoy realizando un programa que formula proyectos. Para empezar, toca formular uno. Ningún proyecto tiene límite de personas que puedan participar, por lo que cree un botón que permite agregar campos y así añadir a más personas al trabajo.

Aquí está el código.

var nextinput = 1;
function AgregarCampos(){
	nextinput++;
	campo = "<input type='number' id='documento" + nextinput + "' name='documento_autor[]' style='width:43%;' max='11' maxlength='11' placeholder='Documento autor...' required autocomplete='off'><br><input type='text' id='nombre" + nextinput + "' name='nombre_autor[]' style='width:100%;' placeholder='Nombres del autor...' autocomplete='off'><br><br>";
	$("#actores").append(campo);
	$("#cantidad").val(nextinput);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta name="encoding" charset="utf-8" />
	<meta name="viewport" content= "width=device-width, initial-scale=1.0"/>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximun-scale=1, minimun-scale=1">
</head>
<body>
	<form action="subir_proyecto.php" method="POST">
		<table class="table table-hover" id="nuevo_project">
			<thead>
				<tr>
					<th colspan="2">DATOS B&Aacute;SICOS DEL PROYECTO</th>
					<input type="hidden" name="cantidad" id="cantidad" value="">
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Nombre del proyecto *</th>
					<td><input type="text" name="nombre_proyecto" id="nuevo_proyecto" style="width:100%;" placeholder="Nombre del proyecto a evaluar..." required autocomplete="off" class="crear_obligatorios"></td>
				</tr>
				<tr>
					<th>
						Autores del proyecto *<br><br>
						<button type="button" onclick="AgregarCampos()" id="agregar_campos">+</button>&nbsp;&nbsp;
					</th>
					<td id="actores">
							<input type="number" name="documento_autor[]" style="width:43%;" maxlength="11" placeholder="Documento autor..." required autocomplete="off" class="crear_obligatorios"><br><input type="text" name="nombre_autor[]" style="width:100%;" placeholder="Nombres del autor..." autocomplete="off"><br><br>
					</td>
				</tr>
			</tbody>
     </table>
	</form>
</body>
</html>

Lo que quisiera agregar, es otro botón, que me permita eliminar los campos que no necesito. Esto es por si alguien se equivoca y tiene que iniciar el proceso de nuevo, porque los campos que agrego son requeridos (required).

Por favor, si alguien pudiera ayudarme. No es mucho, pero he intentado bastante y no he logrado el resultado que deseo.

1 respuesta 1

2

¿Que tal algo así?

Cuando creo una nueva persona, va con el botón de borrar y una función con el id correspondiente a la operación. Luego solo tengo que ocultar o eliminar los campos que tengan ese id

var nextinput = 1;
var nextinput = 1;
function AgregarCampos(){
	nextinput++;
	campo = "<input type='number' id='documento" + nextinput + "' name='documento_autor[]' style='width:43%;' max='11' maxlength='11' placeholder='Documento autor...' required autocomplete='off'>"+
    "<br><input type='text' id='nombre" + nextinput + "' name='nombre_autor[]' style='width:100%;' placeholder='Nombres del autor...' autocomplete='off'>"+
    "<button type='button' onclick='EliminarCampos(" + nextinput + " )' id='borrarcampos" + nextinput + "' value =" + nextinput + " '>-</button><br><br>";
	$("#actores").append(campo);
	$("#cantidad").val(nextinput);
    borrar = nextinput;
}
function EliminarCampos(idBorrar){
    $("#documento"+ idBorrar).hide();
    $("#nombre"+ idBorrar).hide();
    $("#borrarcampos"+ idBorrar).remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta name="encoding" charset="utf-8" />
	<meta name="viewport" content= "width=device-width, initial-scale=1.0"/>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximun-scale=1, minimun-scale=1">
</head>
<body>
	<form action="subir_proyecto.php" method="POST">
		<table class="table table-hover" id="nuevo_project">
			<thead>
				<tr>
					<th colspan="2">DATOS B&Aacute;SICOS DEL PROYECTO</th>
					<input type="hidden" name="cantidad" id="cantidad" value="">
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Nombre del proyecto *</th>
					<td><input type="text" name="nombre_proyecto" id="nuevo_proyecto" style="width:100%;" placeholder="Nombre del proyecto a evaluar..." required autocomplete="off" class="crear_obligatorios"></td>
				</tr>
				<tr>
					<th>
						Autores del proyecto *<br><br>
						<button type="button" onclick="AgregarCampos()" id="agregar_campos">+</button>&nbsp;&nbsp;
					</th>
					<td id="actores">
							<input type="number" name="documento_autor[]" style="width:43%;" maxlength="11" placeholder="Documento autor..." required autocomplete="off" class="crear_obligatorios"><br><input type="text" name="nombre_autor[]" style="width:100%;" placeholder="Nombres del autor..." autocomplete="off"><br><br>
					</td>
				</tr>
			</tbody>
     </table>
	</form>
</body>
</html>

1
  • Si aquí funciona, me funcionará a mí. Ya lo pruebo. Muchas gracias. Ya te califico.
    – Saco04
    Commented el 9 jun. 2019 a las 1:10

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.