How to remove a class while typing using jquery

Issue

I would like to remove the class that disables the button to submit the form.
Can i do it while the user starts typing in the form?
the button has the id “add” and the class is “disabled”.

this is the html form

<form id="form" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" action="index.php"  method="post" >
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <label>SlackSpot Name</label>
    <input type="text" class="form-control required" placeholder="Spot Name" name="nome" id="nome">
<label>SlackSpot Description</label>
<textarea class="form-control required" rows="3" name="descrizione" placeholder="Description" id="descrizione"></textarea>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <label>SlackSpot Latitude</label>
    <input type="text" class="form-control required" placeholder="latitude" name="latitudine" id="lat" title="Insert your Spot latitude or live the geolocation value">
<label>SlackSpot Longitude</label>
<input type="text" class="form-control required" placeholder="longitude" name="longitudine" id="lon" title="Insert your Spot longitude or live the geolocation value">
</div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <input class="btn btn-default pull-right disabled" type="submit" value="Add Spot" id="add">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <button type="button" class="btn btn-danger pull-right" id="close">
    <span class="glyphicon glyphicon-remove"> Close</span>
  </button>
</div>

this is my jquery code

$("#nome,#lat,#lon").on('keyup', function (e) {
    if ($(this).val().length == 0) {
        $('#add').prop("disabled", true);
    } else {
      $('#add').prop("disabled", false);
    }
})

Solution

To supplement answer by Bhojendra Nepal:

1) “keyup” event fits better here.

2) You could try using “disabled” attribute on submit input button instead of another class. It looks like something that fits your case.

$("#nome,#lat,#lon").on('keyup', function (e) {
    if ($(this).val().length > 0) {
        $('#add').prop("disabled", false);
    }
});

(Updated to use .prop() instead of .attr(), which seems more appropriate. Thanks to War10ck for pointing that out!)

Fiddle: http://jsfiddle.net/44ewj7hs/2/

EDIT: As suggested in the comment by @Teemu, even better idea is to use input event (MDN) – with one catch being lack of support in IE < 9.

Answered By – bardzusny

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published