CODEWITHSUNDEEP
javascript
Ishat Noor Mahi
Ishat Noor Mahi

Reputation: 1

How to Print username after user fills the "username" filed? why it disappears?

I was trying to make a JavaScript program the will do the following work:

The problem I am facing:

After clicking on submit button the result disappears. (note: the username is visible for about 0.1 seconds);

What I want

  1. How can I stop it from disappearing?
  2. Can I print the username before the user clicks in submit?
<form action="" name="jsform">
    <input type="text" name="uname" id="uname" placeholder="Your Name">
    <input type="email" name="uemail" id="uemail" placeholder="Your Email">
    <input type="password" name="upass" id="main_pass" placeholder="Enter A Password">
    <input type="password" name="passconf" id="confirm_pass" placeholder="Confirm Password">
    <h3 id="printUserName"></h3>
</form>

function validateForm() {
    var userName = document.getElementById('uname').value;
    document.getElementById('printUserName').innerHTML= userName + "is available" ;
    console.log(userName);

    return false;
 }

Upvotes: 0

Views: 124

Answers (3)

Karthikeyan
Karthikeyan

Reputation: 414

Attach your function to onSubmit event of your form and do your printing. Refer https://www.w3schools.com/jsref/event_onsubmit.asp

Don't forgot to add event.preventDefault() to the top of your function. Refer https://www.w3schools.com/jsref/event_preventdefault.asp

Upvotes: 0

Rob
Rob

Reputation: 12872

  1. It disappears because the form is submitted to the same url essentially refreshing the page. You can prevent this binding a function to onsubmit event and calling return false or event.preventDefault() from within.

  2. You can show the data before submit by binding a function to the onchange event.

Upvotes: 1

eamanola
eamanola

Reputation: 434

add submit handler to the form

<form action="" name="jsform" onsubmit="return validateForm()">

the form wont submit, if onsubmit returns false

Upvotes: 0

Related Questions