Why is my HTML form not displaying my input?-CodePudding

I'm pretty new to JavaScript and am creating a simple page to output the form values. But there's seem to be a problem that it is not showing.

<html>

<head>

<title>Return first and last name from a form - w3resource</title>

</head>

<body>

<form id="form1" onsubmit="form()">

First name: <input type="text" name="fname" value="David"><br>

Last name: <input type="text" name="lname" value="Beckham"><br>

<input type="submit" value="Submit">

</form>

<p id="firstname"></p>

<script>
function form() {
  var x = document.getElementById("form1").elements[0].value;
  document.getElementById("firstname").innerHTML = x;
}
</script>

</body>

</html>

I can't seem to find any problems, the console was fine with the code.

CodePudding user response：

You have to stop the form from submitting.

<html>

<head>

<title>Return first and last name from a form - w3resource</title>

</head>

<body>

<form id="form1" onsubmit="return form()">

First name: <input type="text" name="fname" value="David"><br>

Last name: <input type="text" name="lname" value="Beckham"><br>

<input type="submit" value="Submit">

</form>

<p id="firstname"></p>

<script>
function form() {
  var x = document.getElementById("form1").elements[0].value;
  document.getElementById("firstname").innerHTML = x;
  return false;
}
</script>

</body>

</html>

CodePudding user response：

Use an event listener to handle the submit and preventDefault() for stopping the submission. Following code is tested and working.

<html>
  
  <head>
  
    <title>Return first and last name from a form - w3resource</title>
  
  </head>
  
  <body>
  
    <form id="form1">
  
      First name: <input type="text" name="fname" value="David"><br>
  
      Last name: <input type="text" name="lname" value="Beckham"><br>
  
      <input type="submit" value="Submit">
  
    </form>
  
    <p id="firstname"></p>
  
    <script>
      document.getElementById("form1").addEventListener("submit", form);
      function form(e) {
        e.preventDefault();
        var x = document.getElementById("form1").elements[0].value;
        document.getElementById("firstname").innerHTML = x;
        
      }
    </script>
  
  </body>
  
  </html>
  <script src="script.js"></script>
</body>
</html>