When use backspace or delete button submit button color not changes

Question

I have an HTML form where submit button is disabled when input value is less than 10. The button changes its color when input value becomes greater than 10.

Problem comes when I use backspace or delete button to remove input value, submit button color does not change to disabled button until I refresh the page.

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
  }
}, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

You did a wrong way at all... – Pedram Oct 30 '17 at 06:17 — Pedram, Oct 30 '17 at 06:17

score 2 · Accepted Answer · answered Oct 30 '17 at 06:21

You change the colors once the value reaches 10, but you never change them back. You can set them to an empty string ("") to get back to the original colors before you set them. (See jQuery - remove style added with .css() function).

Fixed code below:

setInterval(function () {
  if ($('#tot2').val() >= 10){
    $("#submit").removeAttr("disabled");
    $("#submit").css({"background-color": "blue", "color": "white"});
  } else {
    $("#submit").attr("disabled", "disabled");
    // Remove the custom colors we added.
    $('#submit').css({"background-color": "", "color": ""});
  }
}, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

(Note that, as others point out, it's better to monitor the input for changes rather than use a timer.)

@pedram That's what I was referring to in my last paragraph. — user94559, Oct 30 '17 at 06:24
setInterval will simply use more rersources. Instead you can trigger event handler only when event occurs, as I have mentioned below. — Edison D'souza, Oct 30 '17 at 06:31

score 1 · Answer 2 · answered Oct 30 '17 at 06:19

Here you go with a solution

$('#tot2').keyup(function(){
  if(parseInt($(this).val()) < 10 || $(this).val().length  === 0) {
    $('#submit')
      .attr('disabled', 'disabled')
      .removeClass('active');
  } else {
    $('#submit')
      .removeAttr('disabled')
      .addClass('active');
  }
});

.active {
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post" >
  <input type="text" name="balance"  id="tot2" value=""  />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

score 1 · Answer 3 · answered Oct 30 '17 at 06:21

Try keyup event. Use class for styling and toggle it.

 $("#tot2").on("keyup", function() {
    var elem = $(this);
    if (elem.val() >= 10) {
        $("#submit").removeAttr("disabled").addClass("active");
    } else {
        $("#submit").attr("disabled", "disabled").removeClass("active");
    }
});

CSS:

active {
        background-color: blue;
        color: white
    }

Demo: http://jsfiddle.net/GCu2D/2207/

score 1 · Answer 4 · answered Oct 30 '17 at 06:21

You should use keyup or keypress function, and instead of set inline style use addClass like this:

$('#tot2').keyup(function() {
  var val = $(this).val();
  if (val >= 10) {
    $("#submit").removeAttr("disabled");
    $("#submit").addClass('NewSub');
  } else {
    $("#submit").attr("disabled", "disabled");
    $("#submit").removeClass('NewSub');  
  }
});

.NewSub {
background: blue;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_form" action="ebill.php" method="post">
  <input type="text" name="balance" id="tot2" value="" />
  <input type="submit" id="submit" name="submit" disabled="disabled" />
</form>

score -1 · Answer 5 · edited Jan 14 '18 at 09:28

-1

Rather than using time interval, you can simply do it like this:

$('#tot2').on('change', function(){
  if($('#tot2').val() < 10) 
    $('#submit').attr('disabled', 'disabled');
  else  $('#submit').removeAttr('disabled');
});

edited Jan 14 '18 at 09:28

Pedram

15,766
10
44
73

answered Oct 30 '17 at 06:20

Edison D'souza

4,551
5
28
39

When use backspace or delete button submit button color not changes

5 Answers5