HTML Form to display output by using a button

Question

Please let me know what I am doing wrong, I have tried to debug but it hasn't been working. I want to enter information into a text field and then display that after clicking a button.

<!DOCTYPE html>
<html>
<head>
  <script type = 'text/javascript'>
    var name; //name
    console.log("hi from script");
    function getName() { //get name
      return document.getElementById("name").value;
    }

    function display()  { //get the name and display
        name = getName();
        alert(name);
    }

    document.getElementById("Submit").onclick = display();
</script>
</head>
<body>

  <form id='form'method = 'post'>
    <p> Name: <input type="text" id="name"/></p>
    <p><input id ="Submit" type = "button" value = 'Submit' /></p>
  </form>

</body>
</html>

score 1 · Answer 1 · answered Oct 03 '17 at 01:00

The problem is that you are making use of a <form> POST. The default behaviour is to navigate away from the page (or refresh if you're posting to the same page), and doing so would mean that the script cannot execute any further functionality. To prevent this, you need to use .preventDefault() to prevent the default behaviour of the form submission.

In order to do this, I've changed your .onclick = display() functionality to add an event listener on the click, which prevents the default behaviour, and then calls display():

.addEventListener("click", function(event) {
  event.preventDefault();
  display();
});

Adding this provides the following working example:

var name; //name
console.log("hi from script");

function getName() { //get name
  return document.getElementById("name").value;
}

function display() { //get the name and display
  name = getName();
  alert(name);
}

document.getElementById("Submit").addEventListener("click", function(event) {
  event.preventDefault();
  display();
});

<form id='form' method='post'>
  <p> Name: <input type="text" id="name" /></p>
  <p><input id="Submit" type="button" value='Submit' /></p>
</form>

Hope this helps! :)

score 0 · Answer 2 · answered Oct 03 '17 at 01:06

Create an empty p tag and give it an id, then call the id and .html to input the text into the field. Like so

so get your html ready

<p><span id="youridhere"><p>

then add this to your function instead of using alert.

$('#youridhere').html(name);

that should do it

here's a jsfiddle of what I think you are looking for

https://jsfiddle.net/uzdt715L/

$('button').click(function(){

    var thing = $('#whatever').val();


    $('#final').html(thing);

   });

score 0 · Answer 3 · answered Oct 03 '17 at 01:15

0

You need to update your click handler syntax. The following should work for you,

document.getElementById("Submit").addEventListener("click", display);

See this related question - addEventListener vs onclick

answered Oct 03 '17 at 01:15

lukeocom

3,243
3
18
30

score 0 · Answer 4 · answered Oct 03 '17 at 02:05

Your code is not really wrong. But because the JavaScript is placed before htm code, so the onlick event is not registered. You must replace

document.getElementById("Submit").onclick = display();

With

document.onload = function() {
    document.getElementById("Submit").onclick = display();
}

Sorry for the formatting as I'm answering via mobile.

HTML Form to display output by using a button

4 Answers4