0

Mi problema consta en que al introducir los datos a un input, solamente los imprima luego de hacer click en el botón enviar. Pero no se la razón por la cual es que mi código no los imprime en el <H1>. Ademas me gustaría saber como poder comprobar si el usuario a llenado todos los inputs de texto y si no mostrarle un mensaje para que los llene.

mi html es.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="work js/form.js"></script>
    <title>formulario</title>
    <link href="rcss/" rel="stylesheet" type="text/css">

</head>
<body>
    <div id="contenedor">
        <div id="cabeza">
        <form action="" id="formulario">

        <label id="engreso"for="">ingrese sus datos</label>

        <input type="text" id="nombre" placeholder="Nombre"  >

            <input type="text" id="apellido" placeholder="Apellido" >

            <input type="date" name="fecha" class="sendit" onchange="edad(event);">

            <input type="email" id="emai" placeholder="[email protected]">

        <input type="button" value="enviar" name="boton" onclick="sub()" >

    </form>
    </div>    

   <div id="cuerpo">

    <h1 id="yax">Cuales son sus datos</h1>

    <h1 id="nom">Su nombre</h1>

    <h1 id="yax">Cual es su apellido</h1>

    <h1 id="ape">su apellido</h1>

    <h1 id="yax">Cual es su edad</h1>

    <h1 id="eda">su edad</h1>

    <h1 id="yax">Cual es su correo</h1>

    <h1 id="mai">su email</h1>

    </div>
</div>
</body>
</html>

Y mi Javascript es


function sub(){
    var nombre = null;
    var correo = null;
    var apellido = null;

    nombre = document.getElementById("nombre").value;
    apellido = document.getElementById("apellido").value;
    correo = document.getElementById("correo").value;

    document.getElementById('nom').innerHTML = nombre;
    document.getElementById('ape').innerHTML = apellido;
    document.getElementById('mai').innerHTML = correo;

}
    function edad(e) {
    edadM = Date.parse(Date()) - Date.parse(e.target.value);
    edads = new Date();
    edads.setTime(edadM);
    resultado = edads.getFullYear() - 1970;
    res = (resultado <= 0) ? 0 : resultado; // Para evitar que sea negativo
    document.getElementById('eda').innerHTML = res;}

me gustaría saber como imprimir los inputs de nombre, apellido, y correo en un <h1> gracias por su timepo.

2 respuestas 2

1

para validar que los datos no esten vacios en tu funcion java script debes validarlos con un if por ejemplo

    function sub(){
        var nombre = null;
        var correo = null;
        var apellido = null;

        nombre = document.getElementById("nombre").value;
        apellido = document.getElementById("apellido").value;
        correo = document.getElementById("correo").value;
      /// validacion de nombres
       if (nombre === '' || apellido === '' || correo === ''){
       alert("favor de llenar todos los campos")
       }

    para imprimir correctamente los nombres debes referenciar el valor del input en donde los quieres imprimir por ejemplo:

<span id="userInfo"></span><br />

 y dentro de una funcion :

        nombre = document.getElementById("nombre").value;
        apellido = document.getElementById("apellido").value;
        correo = document.getElementById("correo").value;
  document.getElementById('userInfo').innerHTML = nombre + ' ' + apellido + ' ' + correo;
1
  • pero para imprimir eso datos en un <h1> como seria? Commented el 10 abr. 2020 a las 0:48
1

lo que esta haciendo que se caiga es esto:

correo = document.getElementById("correo").value;

Ya que no existe un input con ese id, deberas cambiarlo a emai que es como lo tienes en el HTML.

Para validar si los campos van vacíos puedes utilizar un if y comparar los valores obtenidos para que no sean vacíos. En caso de ser vació mostrar algún mensaje.

function sub() {
  var nombre = null;
  var correo = null;
  var apellido = null;


  nombre = document.getElementById("nombre").value;
  apellido = document.getElementById("apellido").value;
  correo = document.getElementById("emai").value;

  if ("" != nombre && "" != apellido && "" != correo) {
    document.getElementById('nom').innerHTML = nombre;
    document.getElementById('ape').innerHTML = apellido;
    document.getElementById('mai').innerHTML = correo;
  } else {
    alert('Ingrese todos los datos');
    return false;
  }
}

function edad(e) {
  edadM = Date.parse(Date()) - Date.parse(e.target.value);
  edads = new Date();
  edads.setTime(edadM);
  resultado = edads.getFullYear() - 1970;
  res = (resultado <= 0) ? 0 : resultado; // Para evitar que sea negativo
  document.getElementById('eda').innerHTML = res;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="work js/form.js"></script>
  <title>formulario</title>
  <link href="rcss/" rel="stylesheet" type="text/css">

</head>

<body>
  <div id="contenedor">
    <div id="cabeza">
      <form action="" id="formulario">

        <label id="engreso" for="">ingrese sus datos</label>

        <input type="text" id="nombre" placeholder="Nombre" >

        <input type="text" id="apellido" placeholder="Apellido">

        <input type="date" name="fecha" class="sendit" onchange="edad(event);">

        <input type="email" id="emai" placeholder="[email protected]">

        <input type="button" value="enviar" name="boton" onclick="sub()">

      </form>
    </div>

    <div id="cuerpo">

      <h1 id="yax">Cuales son sus datos</h1>

      <h1 id="nom">Su nombre</h1>

      <h1 id="yax">Cual es su apellido</h1>

      <h1 id="ape">su apellido</h1>

      <h1 id="yax">Cual es su edad</h1>

      <h1 id="eda">su edad</h1>

      <h1 id="yax">Cual es su correo</h1>

      <h1 id="mai">su email</h1>

    </div>
  </div>
</body>

</html>

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.