jquery enable submit button on input value change

Question

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)

OK, I see HTML and I see some jQuery, now where is the question? — Anthony Forloney
– Anthony Forloney, Commented Jul 22, 2010 at 12:50

Sarfraz · Accepted Answer · 2010-07-22 12:52:22Z

11

You can do something like this:

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

answered Jul 22, 2010 at 12:52

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

2 Comments

Sarfraz Over a year ago

@KennyTM: Agreed, I find myself more used to removeAttr in those cases :)

jinglesthula Over a year ago

@Sarfraz: +1 I think it's more clear as to what it does as well.

Lo Juego · Accepted Answer · 2012-11-16 09:37:34Z

4

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');
}
});

answered Nov 16, 2012 at 9:37

Lo Juego

1,32511 silver badges12 bronze badges

2 Comments

Ajay Kumar Over a year ago

This works but if only space is give the button gets enable

Zaheer Over a year ago

trim the input with trim() method. if ($(this).val().trim())

Matthew J Morrison · Accepted Answer · 2010-07-22 12:52:19Z

3

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

http://jsfiddle.net/9sxwN/

answered Jul 22, 2010 at 12:52

Matthew J Morrison

4,4333 gold badges30 silver badges46 bronze badges

Comments

Christopher Creutzig · Accepted Answer · 2010-07-22 12:52:25Z

0

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.

answered Jul 22, 2010 at 12:52

Christopher Creutzig

8,77437 silver badges46 bronze badges

1 Comment

damien Over a year ago

hi, can you please tell me how, i am very new to jquery & js

NoWar · Accepted Answer · 2018-12-20 04:02:34Z

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>

nyn3x · Accepted Answer · 2010-07-22 12:54:45Z

-1

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

answered Jul 22, 2010 at 12:54

nyn3x

9191 gold badge11 silver badges28 bronze badges

Collectives™ on Stack Overflow

jquery enable submit button on input value change

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related