Javascript output error

Question

I am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;

Code:

function val(){
        var x = document.getElementById('us').value
        document.getElementById("demo").innerHTML = x;
}

HTML:

<form method="post">
   <p id="demo"></p>
   <br />
   <input type="text" id="us" name="username"></input>
   <br />           
   <button type="submit" onclick="val()">Sign Up</button>
</form>

i made a few changes from your code try this one jsfiddle.net/b19u9q4k — guradio
– guradio, Commented Sep 5, 2015 at 5:14
and if you are not using submit, then remove that method="post" attribute, because you are not submitting the form. — Newinjava
– Newinjava, Commented Sep 5, 2015 at 5:22

guradio · Accepted Answer · 2015-09-05 06:18:07Z

4

<form method="post">
   <p id="demo"></p>
   <br />
   <input type="text" id="us" name="username"></input>
   <br />           
   <button type="button" id="asd">Sign Up</button>
</form>

$('#asd').click(function () {
    var x = document.getElementById('us').value
        document.getElementById("demo").innerHTML = x;

});

FIDDLE

I made a few changes. I changed the button type from submit to button also i added an id for the button. check it

edited Sep 5, 2015 at 6:18

answered Sep 5, 2015 at 5:16

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

1 Comment

Rayon Over a year ago

Any reason to prefer jQuery over vanilla js ?

Arun P Johny · Accepted Answer · 2015-09-05 05:15:30Z

3

You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).

Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button

function val() {
  var x = document.getElementById('us').value
  document.getElementById("demo").innerHTML = x;
}

<form method="post">
  <p id="demo"></p>
  <br />
  <input type="text" id="us" name="username"></input>
  <br />
  <button type="button" onclick="val()">Sign Up</button>
</form>

Another solution is to prevent the default action of the submit button click by returning false

answered Sep 5, 2015 at 5:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Rayon · Accepted Answer · 2015-09-05 05:16:05Z

3

Try this:

Your code works as expected but as you have taken button type as submit, i submits the form.

function val() {
  var x = document.getElementById('us').value
  document.getElementById("demo").innerHTML = x;
}

<form method="post">
  <p id="demo"></p>
  <br />
  <input type="text" id="us" name="username"></input>
  <br />
  <button type="button" onclick="val()">Sign Up</button>
</form>

answered Sep 5, 2015 at 5:16

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Collectives™ on Stack Overflow

Javascript output error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related