Good, I generate a form in a modal window and now I want its content to be reflected.
I had thought of showing it in a table, but I really do not know how to generate it and say how and where to insert each value of the previous form.
But I do not know how it could be done. From the start I created the variable table, but once here I do not know how many rows and columns to do and then how to insert their respective content in them.
Can anyone help me?
Health.
$(document).ready(function() {
var contadorObjetivo = 0; //Contador para añadir objetivo con sus respectivos ejercicios.
var contadorEjercicio = 0; //Contador para añadir ejercicios.
// JS para crear rutinas estilo POWER
$('#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 TextoFormulario" id="Titulo1" />';
var titulo2 = '<input type="text" placeholder="Objetivo" class="Inputs-Modal TextoFormulario" id="Titulo2" />';
var titulo3 = '<input type="text" placeholder="Ejercicio" class="Inputs-Modal TextoFormulario" id="Titulo3" />';
var titulo4 = '<input type="text" placeholder="Herramienta" class="Inputs-Modal TextoFormulario" id="Titulo4" />';
var titulo5 = '<input type="text" placeholder="Rondas" class="Inputs-Modal TextoFormulario" id="Titulo5" />';
var titulo6 = '<input type="text" placeholder="Repeticiones" class="Inputs-Modal TextoFormulario" id="Titulo6" />';
var titulo7 = '<input type="text" placeholder="Propuesta de peso" class="Inputs-Modal TextoFormulario" id="Titulo7" />';
var titulo8 = '<input type="text" placeholder="Peso usado" class="Inputs-Modal TextoFormulario" id="Titulo8" />';
var cerrarModalBtn = '<input type="button" value="Cancelar" class="Inputs-Modal BtnFormulario" id="cerrar-modal-btn" />';
var mostrarModalBtn = '<input type="button" value="Mostrar" class="Inputs-Modal BtnFormulario" id="Mostrar-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);
$('#ModalFila1').append(cerrarModalBtn);
$('#ModalFila1').append(mostrarModalBtn);
// Botón mostrar. Guarda y muestra los datos escritos en el formulario. ¡¡NO VA!!
$('#Mostrar-modal-btn').click(function() {
var Resultado1 = $("#Titulo1").val();
var Resultado2 = $("#Titulo2").val();
var Resultado3 = $("#Titulo3").val();
var Resultado4 = $("#Titulo4").val();
var Resultado5 = $("#Titulo5").val();
var Resultado6 = $("#Titulo6").val();
var Resultado7 = $("#Titulo7").val();
var Resultado8 = $("#Titulo8").val();
var tabla = '<table></table>';
});
});
});#Power-Contenedor h1 {
text-align: center;
margin-top: 20px;
margin-bottom: 40px;
}
#Anyadir-Rutina-btn {
background-color: #21211d;
color: #FFF;
padding: 10px;
border-radius: 20px;
cursor: pointer;
}
#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;
}
.ModalFila {
margin: 5px 0;
}
.Inputs-Modal {
padding: 3px;
}
.TextoFormulario {
margin-right: 5px;
}
.BtnFormulario {
background-color: #fdd063;
border-color: transparent;
padding: 3px 8px;
float: right;
}
#Titulo1 {
width: 80%;
}
#Titulo2 {
width: 80%;
}
#Titulo3 {
width: 40%;
}
#Mostrar-modal-btn {
margin-right: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Power-Contenedor">
<h1> Apartado Formulario </h1>
<a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>
<div id="Modal-Escribir-Rutina">
<div class="ModalFila" id="ModalFila1"></div>
<div class="ModalFila" id="ModalFila2"></div>
<div class="ModalFila" id="ModalFila3"></div>
<div class="ModalFila" id="ModalFila"></div>
</div>
<div id="Final-Escribir-Rutina">
</div>
</div>