Can't get javascript to show the data in my HTML form

Question

I'm doing a website as a project for a class, and I am new to javascript and I need some help on that.

The evaluation on the project consists on having tables, and making them display information, then make a form (in this case "registering" on the website), and then make a little javascript using .document.getElementById("") . Finally, when pressing a submit button, the info you just placed in the form should be displayed down below.

So this is what I have. (I will only show the last table which contains the submit button, because it is a large html)

<table class="tablasub" border="0" width="600px" height="70px">
    <tr>
        <td>
            <form name="registrarocancelar">

            <input class="registrarse" id="btn-entrar0" type="submit" name="btn-entrar0" value="Registrarse" >

            <input class="cancelarsub" type="submit" name="cancelarsub" value="Cancelar" formaction="main.html">

            </form>
        </td>
    </tr>
</table>

<center><span class="" id="div_abajo1"></span></center>
    <script src="js.js"></script>

And in the js file I have this.

    document.getElementById("btn-entrar0").addEventListener("click", funcionBoton);

function funcionBoton() {
    var nombre = document.getElementById("nombre")
    var correo = document.getElementById("correo")

    document.getElementById("div_abajo1").innerHTML = '<table><tr><td>Muchas gracias' +nombre+', te has registrado con el correo'+correo+'. Gracias por preferirnos.</td></tr></table>' 
}

Thanks in advance to anyone who helped or commented.

Answer 1

Your code is correct and is doing what you want it to do.

However, when you click on Registrarse button, the form will get submitted and brings you to another page as a result.

You can prevent that from happening by doing onsubmit="return false" on your <form> .

This will get the form to do nothing and just return false when the form is submitted.

 document.getElementById("btn-entrar0").addEventListener("click", funcionBoton); function funcionBoton() { var nombre = document.getElementById("nombre") var correo = document.getElementById("correo") document.getElementById("div_abajo1").innerHTML = '<table><tr><td>Muchas gracias' +nombre+', te has registrado con el correo'+correo+'. Gracias por preferirnos.</td></tr></table>' } 

 <table class="tablasub" border="0" width="600px" height="70px"> <tr> <td> <form name="registrarocancelar" onsubmit="return false"> <input class="registrarse" id="btn-entrar0" type="submit" name="btn-entrar0" value="Registrarse" > <input class="cancelarsub" type="submit" name="cancelarsub" value="Cancelar" formaction="main.html"> </form> </td> </tr> </table> <center><span class="" id="div_abajo1"></span></center> 

Answer 2

You have to add this line to your form tag to prevent redirect on submit. onsubmit="return false"

Answer 3

Thank you to everyone who helped.

After a few hours of discussing with some programmers at my university and thinking about it non-stop I got to a fix.

Basically in the var nombre = document.getElementById("nombre") code, I was missing .value; . I also moved the <form> tag to the top of the form, if anyone would like to see the whole code, just ask for it and I will send it to you.

So at the end the code looked like this. (Notice I changed some ID's but either way with old ID's it would've worked)

The HTML CODE

<table class="tablasub" border="0" width="600px" height="70px">
    <tr>
        <td>
        <input class="registrarse" id="btn-entrar0" type="submit" name="btn-entrar0" value="Registrarse" >

         <input class="cancelarsub" type="submit" name="cancelarsub" value="Cancelar" formaction="main.html">

            </td>
        </tr>
    </table>
    </form>
    <center><spam class="" id="div_abajo1"></spam></center>
            <script src="js/js.js"></script>
    </header>

    </body>
    </html>

The Java Code

document.getElementById("btn-entrar0").addEventListener("click", funcionBoton);

function funcionBoton() {
    var nombre = document.getElementById("inputnombre").value;
    var correo = document.getElementById("inputcorreo").value;


    console.log(nombre)
    document.getElementById("div_abajo1").innerHTML = 'Muchas gracias'+nombre+', te has registrado con el correo'+correo+'. Gracias por preferirnos.'
}