Displaying user input from form using Javascript

Question

I want to get the user filled form and display their output.

So I tried this:

<form name="testForm">

<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">

</form>

<div id="demo"></div>

<script>
	function myFunc(){
	var x = document.getElementById('username').value;
	
	document.write(x);
	}
	
	
</script>

This works as intended. Now, I just want to change the way it displays by making it display in the div with the id demo.

So this is what I tried:

<form name="testForm">

<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">

</form>

<div id="demo"></div>

<script>
	function myFunc(){
	var x = document.getElementById('username').value;
	
	document.getElementById('demo').innerHTML =x;
	}
	
	
</script>

Now as you can see, this doesn't work. It actually displays the results and then reloads a blank screen. I can't seem to understand why this is happening.

From my code, I can see that I've assigned x to the username value. So all I am doing is instead of using document.write (which worked), I am just wanting it to display in the div. However it displays and loads a blank screen.

Can someone please let me know what am I doing wrong? How can I display under the div demo of what the user typed in for username field. Is it a syntax error?

ps: I am self learning and practicing, so I just tried to play with username. Once I do that I will apply the same codes for password.

clicking on submit causes your browser to reload, which is why you don't see the result. (See answers below to prevent it) — Ulysse BN
– Ulysse BN, Commented Jul 10, 2017 at 16:29
I see, but if it submits and since its not going to any action page, shouldn't it just reload the entire page with empty fields? Why does it go to a blank page? — Gosi
– Gosi, Commented Jul 10, 2017 at 16:32
I don't have enough clues to answer, maybe it redirect to another url or fragment ? — Ulysse BN
– Ulysse BN, Commented Jul 10, 2017 at 18:02

Dij · Accepted Answer · 2017-07-10 16:26:54Z

1

you can use preventDefault() to stop submit button from submitting.

<form name="testForm">

<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc(event)">

</form>

<div id="demo"></div>

<script>
	function myFunc(event){
        event.preventDefault();
	var x = document.getElementById('username').value;
	
	document.getElementById('demo').innerHTML =x;
	}
	
	
</script>

answered Jul 10, 2017 at 16:26

Dij

9,8184 gold badges21 silver badges35 bronze badges

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

2 Comments

Gosi Over a year ago

I don't understand, why do I need to stop the submit button from submitting? If it submits, shouldn't it just reload the page with the default form with empty fields?

Dij Over a year ago

When submit button is clicked, the form will be submitted to the server and the browser will redirect away to the current address of the browser and append as query string parameters the values of the input fields. your code too is working the same way, I checked.

user3369753 · Accepted Answer · 2017-07-10 16:26:37Z

1

You need to prevent form submission.

Change myFunc to:

function myFunc (evt) {
  evt.preventDefault();

  // everything else
}

answered Jul 10, 2017 at 16:26

user3369753

1 Comment

Gosi Over a year ago

May I know the reason why I need to prevent form submission? If it submits, shouldn't it reload the form with all the user filled data empty?

Collectives™ on Stack Overflow

Displaying user input from form using Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related