[SOLVED]Creating a submit button that outputs the input that has been written in by the user onto the same page.

Question

Hello, this is my code. The objective is to output what the user has written in underneath my form but I am having a few issues where only the first and last name are being outputted.

<form method="post" id="name-form">
First Name: <input type="text" name="first_name"/> <br/><br/> Last Name: <input type="text" name="last_name"/> <br/><br/> Email: <input type="text" name="email"/> <br/><br/> Comment: <textarea name="comment" rows="5" cols="40"></textarea> <br/><br/> Gender: <input type="radio" name="gender" value="female"/>Female <input type="radio" name="gender" value="male"/>Male <br/><br/> <input name="Submit1" type="submit" value="submit" /> </form>

<tr> <td style="width:50px" >Welcome:</td> <td > <label id="welcome" /> </td> <td> email: address</td> <td > <label id="email" /> </td> <td> comment:</td> <td > <label id="comment" /> </td> <td> gender:</td> <td > <label id="gender" /> </td> </tr>

welcome.innerHTML =  form.first_name.value + " " + form.la;st_name.value;
email.innerHTML = document.getElementsByName('email').value 
var text =  document.getElementsByName('comment').value;
comment.innerHTML= text; 
gender.innerHTML =  form.gender.value;

form.reset();

Answer 1 · 2018-01-05T15:55:35Z

January 5, 2018 3:55pm

Thanks for all your help! I managed to fix it. Here is my code!

    </table>

<br/><br/> Email:<input type="text" name="email"/>

        Comment: <textarea name="comment" rows="4" cols="40"></textarea>

Gender: <input type="radio" name="gender" value="female"/>Female <input type="radio" name="gender" value="male"/>Male

        <input name="Submit1" type="submit" value="submit" />

</form>

<div id="results"> </div> <div> <label id="email"></label></div> <div><label id="comment"></label></div> <script> var form = document.getElementById('name-form'); form.onsubmit = function(event) { event.preventDefault(); var results = document.getElementById('results');

    results.innerHTML = "Your gender is: " + form.gender.value + "; "; 
    results.innerHTML += " Your full Name is " + form.full_name.value + "; your email is ";
    document.getElementById('email').innerHTML = form.email.value + " ";
    document.getElementById('comment').innerHTML = form.comment.value + " ";
    form.reset();

}

</script>

Answer 2 · 2018-01-04T17:42:17Z

January 4, 2018 5:42pm

There are a few things going on, to start with,

Some of your getElementById calls don't match the ids in the the Html.

<label id="email" />  does not match   var email = document.getElementById('email1');  
<label id="comment" /> does not match   var comment = document.getElementById('comment1');

They both return null.

Also, your output table is maybe not displaying properly because the tr and td tags are not surrounded by a table tag

eg

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

https://www.w3schools.com/tags/tag_td.asp for more information.

One more thing, the getElementsByName method returns a collection as a NodeList object and it can be accessed by an index starting with 0.

For example you could use

            email.innerHTML = document.getElementsByName('email')[0].value

to access the value in <input type="text" name="email"/> input field. For more info on getElementsByName https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp. If working with NodeList objects and indexes seem confusing, you might want to give the element an id, and then you use that instead.

That should get you started. If you get stuck on other elements, W3 schools is a good place to get example code and try it out. If you make those changes, it should work. I got your code working, so if can be done. If you still get stuck on something further, don't be shy. Good Luck and happy coding.

Welcome to the Treehouse Community

Looking to learn something new?

Charlie Harcourt

Charlie Harcourt

[SOLVED]Creating a submit button that outputs the input that has been written in by the user onto the same page.

2 Answers

Charlie Harcourt

Charlie Harcourt

jeffrey bachynski

jeffrey bachynski

jeffrey bachynski

jeffrey bachynski

Charlie Harcourt

Charlie Harcourt