Buenas, estoy haciendo un formulario y quiero que sea dinámico.
Este aparece tras presionar un enlace (simula botón) y tiene diferentes campos a rellenar. Además, aquí mi duda , este formulario puede ampliarse según el usuario necesite.
Quiero que al pulsar sobre el "+" de al lado del input: text
título 1 aparezca los campos de las fila 2 y 3 y que si pulsan al "+" del otro, se añada solo otra fila 3.
¿Como puedo hacer esto?
Yo este formulario inicial lo represento mediante una serie de contenedores que están en el html
pero estos nuevos deberán aparecer o no, según el usuario decida, por lo tanto no puedo dejar una estructura prefabricada puesto que cada vez cambiará, además cada uno de sus elementos deberán tener id
diferentes ya que luego tengo que poder actuar con cada elemento ya sea por CSS
, PHP
, etc
Espero haberme sabido explicar muchas gracias por toda la ayuda que ofrece esta comunidad. Un saludo.
$(document).ready(function() {
$('#Anyadir-Rutina-btn').click(function() {
// Hacemos aparecer la ventana modal donde rellenamos formulario.
$('#Modal-Escribir-Rutina').css({
'display': 'flex',
'height': 'auto',
'width': '80%'
});
// Creamos las variables donde se describen todos los elementos del formulario
var titulo1 = '<input type="text" placeholder="Introduce un título general" class="Inputs-Modal" id="Titulo1" />';
var titulo2 = '<input type="text" placeholder="Título 1" class="Inputs-Modal" id="Titulo2" />';
var titulo3 = '<input type="text" placeholder="Ejercicio" class="Inputs-Modal" id="Titulo3" />';
var titulo4 = '<input type="text" placeholder="Herramienta" class="Inputs-Modal" id="Titulo4" />';
var titulo5 = '<input type="text" placeholder="Rondas" class="Inputs-Modal" id="Titulo5" />';
var titulo6 = '<input type="text" placeholder="Repeticiones" class="Inputs-Modal" id="Titulo6" />';
var titulo7 = '<input type="text" placeholder="Propuesta de peso" class="Inputs-Modal" id="Titulo7" />';
var titulo8 = '<input type="text" placeholder="Peso usado" class="Inputs-Modal" id="Titulo8" />';
var cerrarModalBtn = '<input type="button" value="Cancelar" class="Inputs-Modal" id="cerrar-modal-btn" />';
var guardarModalBtn = '<input type="button" value="Guardar" class="Inputs-Modal" id="Guardar-modal-btn" />';
var anyadirObjetivo = '<input type="button" value="+" class="Inputs-Modal" id="AnyadirObjetivo-modal-btn" />';
var anyadirEjercicio = '<input type="button" value="+" class="Inputs-Modal" id="AnyadirEjercicio-modal-btn" />';
// Insertamos los elementos para que el usuario rellene el formulario
$('#ModalFila1').append(titulo1);
$('#ModalFila2').append(titulo2);
$('#ModalFila3').append(titulo3);
$('#ModalFila3').append(titulo4);
$('#ModalFila3').append(titulo5);
$('#ModalFila3').append(titulo6);
$('#ModalFila3').append(titulo7);
$('#ModalFila3').append(titulo8);
$('#ModalFila4').append(cerrarModalBtn);
$('#ModalFila4').append(guardarModalBtn);
$('#ModalFila2').append(anyadirObjetivo);
$('#ModalFila3').append(anyadirEjercicio);
$('#AnyadirObjetivo-modal-btn').click(function() {
alert('Ahora habría que insertar de nuevo las filas 2 y 3')
});
});
});
#Modal-Escribir-Rutina {
height: 0px;
width: 0px;
background-color: #21211d;
margin: auto;
display: none;
flex-direction: column;
margin-top: 50px;
padding: 20px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Power-Contenedor">
<a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>
<div id="Modal-Escribir-Rutina">
<div id="ModalFila1"></div>
<div id="ModalFila2"></div>
<div id="ModalFila3"></div>
<div id="ModalFila4"></div>
</div>
</div>