Enable submit button with validation

Question

Here is my code. The problem I encountered is how do I make the submit button work only when it is 10?

<input type="text" name="qty>
<input type="submit" name="proceedbtn" value="PROCEED" id="button">

<script>
   $(document).ready(function(){
        $('input[id="button"]').attr('disabled',true);
        $('input[id="qty"]').on('keyup',function(){
            if($(this).val() == 10)
            $('input[id="button"]').attr('disabled',false);
    });
});
</script>

How do i fix it?

you don't have any input with id qty in your html. That is the only issue I see. — Manoz
– Manoz, Commented Feb 20, 2020 at 6:59

Shiv Patne · Accepted Answer · 2020-02-20 07:03:04Z

1

I have made some corrections in your code, and now its working. The problem in your code was, you were writing key up event on ID but haven't assigned any id to input box, but you had name property so instead of id I used that name property as a selector for key up event.

$(document).ready(function() {
  $('input[id="button"]').attr('disabled', true);
  $('input[name="qty"]').on('keyup', function() {
    if ($(this).val() == 10) {
      $('input[id="button"]').attr('disabled', false);
    } else {
      $('input[id="button"]').attr('disabled', true);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" name="qty" />
<input type="submit" name="proceedbtn" value="PROCEED" id="button" />

edited Feb 20, 2020 at 7:03

answered Feb 20, 2020 at 6:57

Shiv Patne

5433 silver badges10 bronze badges

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

Comments

suraj · Accepted Answer · 2020-02-20 06:57:13Z

1

Please check, I have updated your code

  $(document).ready(function(){
        $('input[id="button"]').attr('disabled',true);
        $('input[name="qty"]').keyup(function(){
            if($(this).val() == 10){
            $('input[id="button"]').removeAttr('disabled');
            }
            else{
              $('input[id="button"]').attr('disabled',true);
            }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="qty">
<input type="submit" name="proceedbtn" value="PROCEED" id="button">

answered Feb 20, 2020 at 6:57

suraj

1016 bronze badges

Comments

Saeed Jamali · Accepted Answer · 2020-02-20 06:59:05Z

1

I have made some editions on your code and IT WORKS PERFECTLY!

$(document).ready(function() {
        $('#button').attr('disabled', true);
        $('input[name="qty"]').on('keyup', function () {
            if ($(this).val() == 10) {
                $('#button').attr('disabled', false);
            }else {
                $('#button').attr('disabled', true);
            }
        });
    });

<input type="text" name="qty">
<input type="submit" name="proceedbtn" value="PROCEED" id="button">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Feb 20, 2020 at 6:59

Saeed Jamali

1,1952 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Enable submit button with validation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related