Good morning,
I have a form and I would like to get the values written on it, and then insert them into a table. What I have done is to obtain the value of the field by .val() and that is inserted, but doing so instead of appearing my result, the word undefined appears. What is the mistake I make?
Thank you and 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 guardarModalBtn = '<input type="button" value="Guardar" class="Inputs-Modal BtnFormulario" id="Guardar-modal-btn" />';
var anyadirObjetivo = '<input type="button" value="+" class="Inputs-Modal BtnFormulario" id="AnyadirObjetivo-modal-btn" />';
var anyadirEjercicio = '<input type="button" value="+" class="Inputs-Modal BtnFormulario" 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);
$('#ModalFila1').append(cerrarModalBtn);
$('#ModalFila1').append(guardarModalBtn);
$('#ModalFila2').append(anyadirObjetivo);
$('#ModalFila3').append(anyadirEjercicio);
// Botón añadir objetivo
$('#AnyadirObjetivo-modal-btn').click(function() {
contadorObjetivo = contadorObjetivo + 1;
$('#Modal-Escribir-Rutina').append('<div class="ModalFila" id="FilaNuevaObj1' + contadorObjetivo + '"></div>');
$('#Modal-Escribir-Rutina').append('<div class="ModalFila" id="FilaNuevaObj2' + contadorObjetivo + '"></div>');
$('#FilaNuevaObj1' + contadorObjetivo).append(titulo2);
$('#FilaNuevaObj2' + contadorObjetivo).append(titulo3);
$('#FilaNuevaObj2' + contadorObjetivo).append(titulo4);
$('#FilaNuevaObj2' + contadorObjetivo).append(titulo5);
$('#FilaNuevaObj2' + contadorObjetivo).append(titulo6);
$('#FilaNuevaObj2' + contadorObjetivo).append(titulo7);
$('#FilaNuevaObj2' + contadorObjetivo).append(titulo8);
});
// Botón añadir ejercicio
$('#AnyadirEjercicio-modal-btn').click(function() {
contadorEjercicio = contadorEjercicio + 1;
$('#Modal-Escribir-Rutina').append('<div class="ModalFila" id="FilaNuevaEjer' + contadorEjercicio + '"></div>');
$('#FilaNuevaEjer' + contadorEjercicio).append(titulo3);
$('#FilaNuevaEjer' + contadorEjercicio).append(titulo4);
$('#FilaNuevaEjer' + contadorEjercicio).append(titulo5);
$('#FilaNuevaEjer' + contadorEjercicio).append(titulo6);
$('#FilaNuevaEjer' + contadorEjercicio).append(titulo7);
$('#FilaNuevaEjer' + contadorEjercicio).append(titulo8);
});
// Botón cerrar. Sale SIN guardar lo escrito.
$('#cerrar-modal-btn').click(function() {
// Elimino los elementos creados.
$('.Inputs-Modal').remove();
// Hacemos desaparecer la ventana modal
$('#Modal-Escribir-Rutina').css('display', 'none');
});
// Botón guardar. Guarda y muestra los datos escritos en el formulario. NO VAAAAAAAAAAAA
$('#Guardar-modal-btn').click(function() {
// Elimino los elementos creados.
$('.Inputs-Modal').remove();
// Hacemos desaparecer la ventana modal
$('#Modal-Escribir-Rutina').css('display', 'none');
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();
$('#Tabla-Rutinas').append(
'<tr><td colspan="6">' + Resultado1 + '</td></tr>' +
'<tr><th>' + 'Nombre' + '</th><th>' + 'Herramienta' + '</th><th>' + 'Rondas' + '</th><th>' + 'Repetciones' + '</th><th>' + 'Peso Propuesto' + '</th><th>' + 'Peso Final' + '</th></tr>' +
'<tr><td colspan="6">' + Resultado2 + '</td></tr>' +
'<tr><td>' + Resultado3 + '</td><td>' + Resultado4 + '</td><td>' + Resultado5 + '</td><td>' + Resultado6 + '</td><td>' + Resultado7 + '</td><td>' + Resultado8 + '</td></tr>'
);
});
});
});#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%;
}
#Guardar-modal-btn {
margin-right: 5px;
}
/**** TABLA ***/
#Tabla-Rutinas {
height: auto;
width: 70%;
/* background-color: aqua;*/
border: solid 1px;
margin: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Power-Contenedor">
<h1> Diario de entreno</h1>
<table id="Tabla-Rutinas"></table>
<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>