Using Javascript To Show Values From HTML

Question

I'm trying to create a HTML Page with multiple forms, and I would like to show the values from the form on the same page (wiping the original HTML), but after using the button, nothing shows up (the page like reloaded)

Here's the code for HTML :

function Results() {
  var fname = document.getElementById('fname').value;
  var lname = document.getElementById('lname').value;
  var gender = document.getElementById('gender').value;
  var date = document.getElementById('birthday').value;

  if (document.getElementById('genderM').checked) {
      gender = document.getElementById('genderM').value;
    } else if (document.getElementById('genderF').checked) {
        gender = document.getElementById('genderF').value;
      }

      document.writeIn("<h3>Thank You! Here's Your Precious Data! </h3>"); document.writeIn("<p> Your Name Is : </p>" + fname + lname); document.writeIn("<p> Gender : " + gender); document.writeIn("<p> Birthday : " + birthday);

      document.getElementById('forms').innerHTML = forms;
    }

<!DOCTYPE HTML>
<html>

<head>
  <title> The Page Number 2 </title>
  <link rel="stylesheet" type="text/css" href="page2.css">

</head>

<body>

  <h1> Please fill in the form for exciting contents! </h1>

  <hr size="5px" color="black">

  <div id="forms" class="forms">
    <form onsubmit="Results()" method="post">

      <div class="textFirst">
        First Name
      </div>

      <input id="fname" type="text" name="fname"> <br>

      <br>
      <div class="textLast">
        Last Name <br>
      </div>

      <input id="lname" type="text" name="lname"> <br>

      <br>

      <div class="textGender">
        Gender <br>
        <input id="genderM" type="radio" name="gender" value="male"> Male <br>
        <input id="genderF" type="radio" name="gender" value="female"> Female <br>
      </div>

      <br>

      <div class="textBirth">
        Birthday <br>
      </div>

      <input id="birthday" type="date" name="birthday"> <br>


  <input id="submit" class="buttonagain" type="submit" value="Submit!" />

  </form>
  
  </div>

</body>

</html>

Any ideas what should I do?

Edit : I'm not able to use php or server for this

Yes, the page is reloaded, that's the default response from your server when submitting a form. And what should you do ... Don't submit the form. — Teemu
– Teemu, Commented Mar 29, 2018 at 11:01
their is a lot of error in your code , the submit is not the only issue — Abslen Char
– Abslen Char, Commented Mar 29, 2018 at 11:10
I changed the input type to button, but nothing happened. Is there any errors? — Bill S
– Bill S, Commented Mar 29, 2018 at 11:10
Please review my answer and please comment on it to tell my mistake. — user9539919
– user9539919, Commented Mar 30, 2018 at 7:15

Xavier Guihot · Accepted Answer · 2018-03-29 18:19:55Z

1

Your code is riddled with syntax errors: missing parentheses, missing + operators, etc.
document.writeIn (with an uppercase I) is not a function; document.writeln (with a lowercase L) is.
<script> tags aren't self-closing, i.e. you have to write <script src="scriptPage2.js"></script>
document.getElementById('gender') returns null, because there is no element with id="gender".
You're trying to write birthday but you never declared that variable.
I have no idea what you're trying to accomplish with document.getElementById('forms').innerHTML = forms;

In general, you should make use of the browser's built-in debugger to catch all these errors. If you're using Chrome or Firefox, press Ctrl+Shift+I (in IE or Edge, press F12) and open the "Console" tab; you will see all the errors there as the JS parser encounters them.

Once that's all fixed, remove the submit event handler from <form>, and change your submit button like this:

<input id="submit" class="buttonagain" type="button" onclick="Results()" value="Submit!" />

Note the change of type from submit to button. This will prevent the page from reloading, which is the expected behavior when submitting a form.

edited Mar 29, 2018 at 18:19

Xavier Guihot

62.8k26 gold badges320 silver badges202 bronze badges

answered Mar 29, 2018 at 11:09

Máté Safranka

4,1161 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bill S Over a year ago

I've tried your suggestion, but still, nothing happened. No value showed up

Máté Safranka Over a year ago

Updated my answer with more details

Bill S Over a year ago

Well that was very embarassing. You were right : there's lots of syntax error in the JS. Thanks for the advise!

henriquehbr · Accepted Answer · 2018-03-29 11:06:46Z

1

You don't need the return and ; when calling a js function in html

<form onsubmit="Results()" method="post">

answered Mar 29, 2018 at 11:06

henriquehbr

1,1424 gold badges23 silver badges44 bronze badges

Comments

user9539919 · Accepted Answer · 2018-03-29 11:33:00Z

This is your answer.

function Results() {
      var fname = document.getElementById('fname').value;
      var lname = document.getElementById('lname').value;
      var gender;
      var date = document.getElementById('birthday').value;
 
if (document.getElementById('genderM').checked) {
gender = "Male";
} else {
gender = "Female"
}

          document.writeln("<h3>Thank You! Here's Your Precious Data! </h3>");
          document.writeln("<p> Your Name Is : </p>" + fname + " " + lname); 
          document.writeln("<p> Gender : " + gender); 
          document.writeln("<p> Birthday : " + date);

          document.getElementById('forms').style.display = "none";
        }

<!DOCTYPE HTML>
    <html>

    <head>
      <title> The Page Number 2 </title>
      <link rel="stylesheet" type="text/css" href="page2.css">

    </head>

    <body>

      <h1> Please fill in the form for exciting contents! </h1>

      <hr size="5px" color="black">

      <div id="forms" class="forms">
        <form onsubmit="Results();" method="post">

          <div class="textFirst">
            First Name
          </div>

          <input id="fname" type="text" name="fname" required> <br>

          <br>
          <div class="textLast">
            Last Name <br>
          </div>

          <input id="lname" type="text" name="lname"required> <br>

          <br>

          <div class="textGender">
            Gender <br>
            <input id="genderM" type="radio" name="gender" value="male" required> Male <br>
            <input id="genderF" type="radio" name="gender" value="female"> Female <br>
          </div>

          <br>

          <div class="textBirth">
            Birthday <br>
          </div>
          <input id="birthday" type="date" name="birthday"required> <br>
      </div>


      <input id="submit" class="buttonagain" type="submit" value="Submit!" />

      </div>


      </form>



    </body>

    </html>

Collectives™ on Stack Overflow

Using Javascript To Show Values From HTML

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related