enable/disable submit button based in input field (filled/not filled)

Question

what I am missing in this code, If I just want the input submit button to enable/disable/enable.. as long as I fill or unfill the input text? sorry I am doing my best to learn javascript...can anyone help me fix this code?

<form name="myform" method="post">
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value=""/>
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>

<script>
var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true; 

function checkFormsValidity(){
var myforms = document.forms["myform"];   
    if (myforms.checkValidity()) {
        sbmtBtn.disabled = false;
    } else {
        sbmtBtn.disabled = true;
    }
}
</script>

This is the fiddle: https://jsfiddle.net/1zfm6uck/

Am I missing declaring onLoad mode or something like this? Thanks!

Dekel · Accepted Answer · 2016-11-05 04:11:18Z

3

Actually - if it wasn't a jsfiddle example your code would work great:

var sbmtBtn = document.getElementById("SubmitButton");
sbmtBtn.disabled = true; 

function checkFormsValidity(){
  var myforms = document.forms["myform"];   
  if (myforms.checkValidity()) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }
}

input[type='submit']:disabled{
	color:red;
}

<form name="myform" method="post">
<input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value="" required="required" />
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>

The problem was the jsfiddle put your javascript code inside a clousure, so the checkFormsValidity function is not available in the scope of your input.

I added a required="required" to your input to make sure it's a required field (which will affect the checkValidity() of your form).

answered Nov 5, 2016 at 4:11

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

2 Comments

NotRocketScientist Over a year ago

thanks, so basically I just missed adding required="required"

Dekel Over a year ago

In your computer/server you probably missed the required, yeah.

K Scandrett · Accepted Answer · 2016-11-05 04:11:50Z

1

function checkFormsValidity(){

needs to be change to:

checkFormsValidity = function(){

Personally I wouldn't check validity that way, but in terms of making your code work without error, that will do it.

Edit: Also add required="required" to the input.

edited Nov 5, 2016 at 4:11

answered Nov 5, 2016 at 4:06

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

2 Comments

NotRocketScientist Over a year ago

okey thanks, that does the trick. But have you noticed that if I delete/unfill the input text the submit button does not go back to the disabled mode? How can we fix that?

K Scandrett Over a year ago

Add required="required" to the input

Collectives™ on Stack Overflow

enable/disable submit button based in input field (filled/not filled)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related