0

Tengo estos dos códigos, lo que quiero hacer, es colocar un boton de regreso en la ventana que me muestra los datos, ya intente muchas maneras, pero no puedo, ¿alguien me ayuda?

var getData = function(){

  var name = document.getElementById("nombre").value;
  var age = document.getElementById("edad").value;
  var genre = document.getElementById("genero").value;
  var hrs = document.getElementById("horas").value;
  var why = document.getElementById("porque").value;

  document.write("Nombre: "+name+"<br/>Edad: "+age+"<br/>G&eacutenero m&uacutesical favorito: "+genre+"<br/>Horas que escucha "+genre+": "+hrs+"<br/>Por qu&eacute le gusta este g&eacutenero: "+why);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <title> Formulario de trabajadores </title>

    <script type="text/javascript" src="formulario.js"></script>
  </head>

  <body bgcolor="#66fff" text="#0000ff">
    <h1 align="center"> Gustos musicales </h1>
    
    <form method="post" action="">
      <h4> Nombre: </h4>
      <input type="text" name="nombre" id="nombre" placeholder="Nombre">
      <h4> Edad: </h4>
      <input type="int" name="edad" id="edad" placeholder="Edad">
      <h4> Genero musical preferido </h4>
      <input type="text" name="genero" id="genero" placeholder="Genero" >
      <h4> &#191Cuantas horas dedicas a escuchar este g&eacutenero en espec&iacutefico? (al d&iacutea) </h4>
      <input type="int" name="horas" id="horas" placeholder="Horas">
      <h4> Describe por qu&eacute te gusta este g&eacutenero musical</h4>
      <textarea name="porque" id="porque"></textarea>
      <button onclick="getData()"> Enviar </button>
      <input value="Reload Page" onclick="history.go(0)" type="button" id="regresar">
    </form>

  </body>

</html>

6
  • te hecho el boton "regresar" deberia estar en donde muestras tus datos recogidos por el form el 14 mar. 2019 a las 20:54
  • es decir luego de esto....document.write("Nombre: "+name+"<br/>..... el 14 mar. 2019 a las 20:54
  • no entendi.....
    – Alexis
    el 14 mar. 2019 a las 20:58
  • si la idea es retornar al formulario html donde ingreso los datos... pues el boton debes crearlo donde estas mostrando tus datos.. el 14 mar. 2019 a las 20:59
  • algo como esto: jsfiddle.net/j83cg9rp/5 el 14 mar. 2019 a las 21:02

1 respuesta 1

0

De esta forma te puede servir, creando 2 contenedores principales, el botón de regresar lo inserto con los datos recolectados

// contenedores
var resultado = document.getElementById('resultado');
var formulario = document.getElementById('formulario');

var getData = function(e){
  e.preventDefault(); // prevenir submit del formulario

  var name = document.getElementById("nombre").value;
  var age = document.getElementById("edad").value;
  var genre = document.getElementById("genero").value;
  var hrs = document.getElementById("horas").value;
  var why = document.getElementById("porque").value;

  //document.write();
  resultado.innerHTML = `
    Nombre: ${name}<br/>
    Edad: ${age}<br/>
    G&eacutenero m&uacutesical favorito: ${genre}<br/>
    Horas que escucha ${genre}: ${hrs}<br/>
    Por qu&eacute le gusta este g&eacutenero: ${why}<br/>
    <input value="Volver" onclick="volver()" type="button" id="regresar">
    `;
  formulario.style.display = "none";
  resultado.style.display = "block";
}

var volver = () => {
  formulario.style.display = "block";
  resultado.style.display = "none";
  
  // acá se podria incluso limpiar el formulario si se necesita
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <title> Formulario de trabajadores </title>

    <script type="text/javascript" src="formulario.js"></script>
  </head>

  <body bgcolor="#66fff" text="#0000ff">
    <div id="resultado"></div>
    <div id="formulario">
    
      <h1 align="center"> Gustos musicales </h1>

      <form method="post" action="">
        <h4> Nombre: </h4>
        <input type="text" name="nombre" id="nombre" placeholder="Nombre">
        <h4> Edad: </h4>
        <input type="int" name="edad" id="edad" placeholder="Edad">
        <h4> Genero musical preferido </h4>
        <input type="text" name="genero" id="genero" placeholder="Genero" >
        <h4> &#191Cuantas horas dedicas a escuchar este g&eacutenero en espec&iacutefico? (al d&iacutea) </h4>
        <input type="int" name="horas" id="horas" placeholder="Horas">
        <h4> Describe por qu&eacute te gusta este g&eacutenero musical</h4>
        <textarea name="porque" id="porque"></textarea>
        <button onclick="getData(event)"> Enviar </button>
      </form>
    </div>

  </body>

</html>

0

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.