How to enable and disable button using javascript

Question

We are using MVC popup model where having two text box SSN number and DOB(Date of birth), i am using datepicker calendar for DOB and it is read only text box, for SSN number i am manually put the number in text box. i have written the below code to enable next button when SSN number and DOB both are correct. But below code is not working properly, First i put the SSN number and When i Select the DOB using calendar, next button is not enable, Please help me to resolve this issue.

$("#SocialSecurityNumber").blur(function () {

        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#SocialSecurityNumber").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled", true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });


    $("#DateofBirth").blur(function () {

        if ($("#DateofBirth").val() !='' && $("#SocialSecurityNumber").val().length == 11) {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }
        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }

    });

    $("#DateofBirth").keyup(function () {
        if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
            $("#nextSubmit").removeAttr("disabled");
            $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
        }

        else {

            $("#nextSubmit").attr("disabled",true);
            $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

        }
    });

Thanks, Sandeep

please comment this. so we can find out what do you want to do in these statements — noone
– noone, Commented Jun 15, 2018 at 5:22
can you please share your HTML? and as for what code you have written i think these are the scenarios: 1. if user only enter the SSN next button will not be enabled as the DOB field is empty. 2.If the user had entered SSN and enter the DOB(not select the date by any plugin as keyup and blur will not work but onChange might) then the next button will be enabled. — vikscool
– vikscool, Commented Jun 15, 2018 at 5:23
Please find below my HTML. Html.TextBoxFor(m => m.DateofBirth, new { class = "DateofBirth form-control txtWithImage", placeholder = "_ / / _ _ _", readonly = "readonly" }) — Sandeep Verma
– Sandeep Verma, Commented Jun 15, 2018 at 5:56

noone · Accepted Answer · 2018-06-15 06:15:13Z

2

in jquery this is how you should disable a button

$('#id_of_the_button').prop('disabled', true);

to enable the button

$('#pc_add').prop('disabled', false);

in your html the button should be like this

<button id="id_of_the_button"> text of the button </button>

To answer your question here how you should implement your html file

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
<script>
$(document).ready(function(){
     $("#SocialSecurityNumber").keyup(function() {
     if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").prop('disabled', false);
      } else {
        $("#nextSubmit").prop('disabled', true);
      }
    });

    $('#DateofBirth').change(function() {
         if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
         $("#nextSubmit").prop('disabled', false);
        }else {
            $("#nextSubmit").prop('disabled', true);
        }
    });
});


</script>
</head>
<body>

<h2>This is a heading</h2>
  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>

</body>

</html>

edited Jun 15, 2018 at 6:15

answered Jun 15, 2018 at 5:29

noone

6,5782 gold badges48 silver badges54 bronze badges

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

3 Comments

Sandeep Verma Over a year ago

Please find below my HTML. Html.TextBoxFor(m => m.DateofBirth, new { class = "DateofBirth form-control txtWithImage", placeholder = "_ / / _ _ _", readonly = "readonly" })

Sandeep Verma Over a year ago

i have tried the your code but no luck, When i click on DOB text box second time then next button is enable.

noone Over a year ago

please check again I have added full script

Nandita Sharma · Accepted Answer · 2018-06-15 05:40:14Z

0

Instead of using blur and keyup events, use the change event on input.

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <form>
    <input type="text" id="SocialSecurityNumber" />
    <input type="date" id="DateofBirth" />
    <button id="nextSubmit" disabled="disabled" class="btn btn-default">Submit</button>
  </form>
  <script>
    $("#SocialSecurityNumber").change(function() {
      if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }

    });


    $("#DateofBirth").change(function() {

      if ($("#DateofBirth").val() != '' && $("#SocialSecurityNumber").val().length == 11) {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }

    });

    $("#DateofBirth").keyup(function() {
      if ($("#SocialSecurityNumber").val().length == 11 && $("#DateofBirth").val() != '') {
        $("#nextSubmit").removeAttr("disabled");
        $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");
      } else {

        $("#nextSubmit").attr("disabled", true);
        $("#nextSubmit").removeClass("btn-primary").addClass("btn-default");

      }
    });
  </script>

  <body>

answered Jun 15, 2018 at 5:40

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

3 Comments

Sandeep Verma Over a year ago

i have fixed this issue, in datepicker function i have call the onchange event which fixed the issue. thanks for your help.

Nandita Sharma Over a year ago

oh okay. Thanks :)

Sandeep Verma Over a year ago

Hi All, i have fixed this issue, in datepicker function i have write the on change event which fixed the issue. Please find below code, thanks for your help. .on('changeDate', function (ev) { if ($("#DateofBirth").val() == '' && $("#SocialSecurityNumber").val().length == 11) { var newDate = new Date(ev.date) newDate.setDate(newDate.getDate() + 1); $("#nextSubmit").removeAttr("disabled"); $("#nextSubmit").removeClass("btn-default").addClass("btn-primary");}

Andrei · Accepted Answer · 2018-06-15 07:04:45Z

0

Try:

<!-- To disable button -->
$('#ElememtId').prop("disabled",true)

and

<!-- To enable button -->
$('#ElememtId').prop("disabled",false)

edited Jun 15, 2018 at 7:04

Andrei

5,6675 gold badges27 silver badges51 bronze badges

answered Jun 15, 2018 at 6:34

Maddukuri sandeep

363 bronze badges

Collectives™ on Stack Overflow

How to enable and disable button using javascript

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related