I have this example form with jquery and javascript in which the user can add forms to add more phones if desired and delete them equally but I want to send the form when sending a message, I do not save the data on a base of data, I simply want to use them in a message after clicking on the send button but it says it is undefined
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Titulo de Página</title>
<link rel="stylesheet" href="css/style.css">
</head>
<!---->
<body>
<div id="formulario">
<div class="">
<h2>Envio de comentatios</h2>
</div>
<fieldset>
<label for="">Nombre:</label>
<input type="text" id="nombre"><br>
<label for="">Apellido:</label>
<input type="text" id="apellido"><br>
<label for="">Correo:</label>
<input type="text" id="correo"><br>
<label for="">Comentario:</label>
<textarea></textarea><br>
<fieldset id="telefonos">
<legend><strong>Telefonos</strong></legend>
<div class="">
<input type="text" placeholder="casa">
</div>
</fieldset>
</fieldset>
<div class="">
<button id="btnEnviar">Enviar Formulario.</button>
<button id="btnAgregarTelefono">Agregar Telefono</button>
</div>
</div>
<script src="scripts/jquery.min.js"></script>
<script>
$(function(){
$('#btnAgregarTelefono').click(function(){
$('#telefonos').append('<div> <input type="text" placeholder="otro" /><button class="borrarTelefono" onclick="eliminarTelefono(this);"><strong>X<strong> </button> </div>');
});
$('#btnEnviar').click(function(){
var nombre = $('#nombre').attr('value');
var apellido = $('#apellido').attr('value');
$('<h1>' +nombre +' '+ apellido + ' </br> Gracias por enviar tu comentario. </h1>').replaceAll('#formulario');
});
});
function eliminarTelefono(telefono){
$(telefono).parent().remove();
}
</script>
</body>
I understand that the function .attr('value'); extracts the value of the form where I have id that I select in the selector but it is not subtracting it from me
.error{
border: solid 2px red;
color: red;
}
.borrarTelefono{
color: red;
}
#formulario{
background-color: #E5EECC;
background-repeat: repeat-x;
border: 1px solid #D4D4D4;
color: #000000;
padding:50px;
position: absolute;
right: 400px;
text-align: center;
top: 40px;
width: 616px;
}