how to enable button by javascript in html5?

Question

I'm trying to enable a button in JavaScript as long as the user enter a text . What is wrong with this code?is it because of the using fieldset?

function setText() {
  var x = document.getElementById("mail").value;
  if (x != "") {
    document.getElementById("btn").disabled = 'false';
  }
}

<form>
  <fieldset id="file1">
    <legend><img src="fb-login.png" height="70" width="70" /> :</legend>

    Email: <input id="mail" type="email" onchange="setText()"><br> password: <input type="password"><br><br>
    <input type="submit" id="btn" value="ok" disabled> <br>
  </fieldset>
</form>

remove the quotes from 'false'; I vote to close this as a Typo. — mplungjan, Apr 19 '17 at 12:29
Lots of stuff. Which is an answer about as clear as your question. — Jared Smith, Apr 19 '17 at 12:30
You should write the script tag just before body tag ends not in head section — Saroj, Apr 19 '17 at 12:30
@SarojSasmal Says who? Such a tiny script lives well in the head. http://stackoverflow.com/questions/3531314/should-i-write-script-in-the-body-or-the-head-of-the-html — mplungjan, Apr 19 '17 at 12:33
@dan I created a snippet for you. The script in the snippet STILL lives inside `` tags — mplungjan, Apr 19 '17 at 13:03

score 1 · Answer 1 · edited Apr 19 '17 at 12:42

1

Below is the correct approach rather than using onchange you should use oninput / onkeyup:

 function setText(){
  var x=document.getElementById("mail").value.trim();
  if(x !=""){
  document.getElementById("btn").disabled = false;
      }
  else{
  document.getElementById("btn").disabled = true;
      }
    }

 <form>
  <fieldset id="file1">
    <legend><img src="fb-login.png" height="70" width="70"/> :</legend>

       Email: <input id="mail" type="email" onkeyup="setText()"><br>
      password: <input type="password"><br><br>
     <input type="submit" id="btn" value="ok"  disabled> <br>
   </fieldset>
 </form>

UPDATE

A shorter approach is given by @mplungjan below:

function setText() {
  document.getElementById("btn").disabled = document.getElementById("mail").value.trim()=="";
}

edited Apr 19 '17 at 12:42

mplungjan

169,008
28
173
236

answered Apr 19 '17 at 12:31

Shakti Phartiyal

6,156
3
25
46

1

`document.getElementById("btn").disabled = document.getElementById("mail").value.trim()==""` – mplungjan Apr 19 '17 at 12:32
@mplungjan thank you for the update.. updated my answer.. – Shakti Phartiyal Apr 19 '17 at 12:33
but why the if and else? – mplungjan Apr 19 '17 at 12:34
@mplungjan else for disabling the button if the user removes the text. – Shakti Phartiyal Apr 19 '17 at 12:35
My code does either. Try it. – mplungjan Apr 19 '17 at 12:35
@mplungjan yes actually it does.. but I haven't given that approach in my answer and therefore voted up your comment. – Shakti Phartiyal Apr 19 '17 at 12:37
No problem. I rolled it back. I just find it a waste of code – mplungjan Apr 19 '17 at 12:37

score 1 · Answer 2 · edited Apr 19 '17 at 12:42

1

First, use oninput event instead of onchange to bind typing events. Then, false is a boolean keyword in JavaScript, not a string. Here is a working example:

function setText() {
  var x = document.getElementById("mail").value.trim();
  document.getElementById("btn").disabled = x == "";
}

<form>
  <fieldset id="file1">
    <legend><img src="fb-login.png" height="70" width="70" /> :</legend>

    Email:
    <input id="mail" type="email" oninput="setText()">
    <br> password:
    <input type="password">
    <br>
    <br>
    <input type="submit" id="btn" value="ok" disabled>
    <br>
  </fieldset>
</form>

edited Apr 19 '17 at 12:42

mplungjan

169,008
28
173
236

answered Apr 19 '17 at 12:32

Hulothe

744
1
5
17

`document.getElementById("btn").disabled = document.getElementById("mail").value.trim()=="";` – mplungjan Apr 19 '17 at 12:34
@mplungjan apart from the `trim()` part I'm afraid I don't understand what you mean... – Hulothe Apr 19 '17 at 12:36
It replaces all of your `var x = document.getElementById("mail").value; if (x != "") { document.getElementById("btn").disabled = false; } else { document.getElementById("btn").disabled = true; }` – mplungjan Apr 19 '17 at 12:37
Oh sorry you're right it wasn't clear with the line break in your comment (the line is too long). Thanks, I will edit my answer :) – Hulothe Apr 19 '17 at 12:38
1

oninput is the better event handler – mplungjan Apr 19 '17 at 12:39
ok,i will try this. but where should i put the function? and the script in your code is used for? – dan Apr 19 '17 at 12:42
The function is replacing yours. Leave it where it was. – mplungjan Apr 19 '17 at 12:43
but my function is inside the script. in your code the script is written seperatly – dan Apr 19 '17 at 12:44
Just let it inside the tags, replace your function with this one. – Hulothe Apr 19 '17 at 12:46

how to enable button by javascript in html5?

2 Answers2