CODEWITHSUNDEEP
jquery
damien
damien

Reputation: 171

jquery enable submit button on input value change

This is my part of my html

<input type="text" name="age" />
<input type="text" name="poscode" />
<input type="submit" name="submit" value="Next >>" disabled="disabled"/>

This is my script

<script type="text/javascript">
$(function(){
var enable = false;
if($("input[name='age']").val != "")
enable = true;
if($("input[name='poscode']").val != "")
enable = true;
if(enable == true) $("input[name='submit']").attr('disabled', '');
});
</script>

This is not working, any idea what i'm doing wrong?

After user filled up two input age & poscode, the submit button should become active ( disabled at start)

Upvotes: 5

Views: 19449

Answers (6)

NoWar
NoWar

Reputation: 37633

Try this example code please

<div class="form-row align-items-center">
          <div class="col-auto">
              <input  type="text" name="inputComment" class="form-control" id="inputComment" placeholder="Your comment goes here">
          </div>
          <div class="col-auto">
               <button disabled id="btnSaveComment" type="button" class="btn btn-success">Save</button>
          </div>
</div>

<script>
  document.getElementById("btnSaveComment").disabled = true;

  $(document).ready(function () {
    $("#inputComment").on("change paste keyup", function () {
                var text = $(this).val();
                if (text.length > 0) {
                    document.getElementById("btnSaveComment").disabled = false;
                }
                else {
                    document.getElementById("btnSaveComment").disabled = true;
                }
            });
        });
</script>

Upvotes: 0

Lo Juego
Lo Juego

Reputation: 1325

To enable/disable when key is pressed do this way:

$('input[name="age"], input[name="poscode"]').keyup(function(){
  if ($(this).val())
{
  $("input[name='submit']").removeAttr('disabled');

}else{
$("input[name='submit']").attr('disabled','disabled');
}
});

Upvotes: 4

nyn3x
nyn3x

Reputation: 919

Like sAc already mentioned, you have to remove the attribute 'disabled' altogether.

Upvotes: -1

Christopher Creutzig
Christopher Creutzig

Reputation: 8774

Did you attach this to the input fields in any way? The way your code is written, I believe the function is called once, after the document has been loaded, and then simply discarded. Give your function a name and attach it to onblur or onchange.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382646

You can do something like this:

$('input[name="age"], input[name="poscode"]').change(function(){
  if ($(this).val())
  {
    $("input[name='submit']").removeAttr('disabled');
  }
});

Upvotes: 11

Matthew J Morrison
Matthew J Morrison

Reputation: 4403

Give this a shot, here is a fiddle that I created so you can play with it.

http://jsfiddle.net/9sxwN/

Upvotes: 3

Related Questions