Disable button untill dropdown item is selected in jquery

I am trying to enable the submit button when any item is selected in dropdown. Here is the code. There are 2 buttons when the user selects from the dropdown the 2 buttons should be enabled. Otherwise it has to be disbled until item is selected from dropdown. Whether any jquery plugin has to be added?

   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
    <script type="text/javascript">


$(document).ready(function() {


    $(".nextbutton").attr("disabled", true);
     $(".nextbutton1").attr("disabled", true);
    $('.dropdown').change(function() {
        if ($('.dropdown').val() == 0) {
                    $(".nextbutton").attr("disabled", true);
                $(".nextbutton1").attr("disabled", true);
        } else {
                    $(".nextbutton").attr("disabled", false);
                $(".nextbutton1").attr("disabled", false);
        }
    });
});</script>
 </head>

  <body>
<form id="phonetypeform">
      <select name="porting-p1" class="dropdown">
<option value="" class="disablenext">Please select an option...</option>
<option value="1" class="enablenext">I want to keep my current phone number</option>
<option value="2" class="enablenext">I want to choose a new number</option>
        </select>

</form>
<button class="nextbutton1">sd Step</button> 
<button class="nextbutton">Next Step</button> 

Answers 1

  • Your solution is actually working. I just need to change it to use jquery 1.12.4 from google CDN.

    Apart from that, you can disable both buttons by default on page load by adding disabled attribute to both buttons. This will make sure the buttons are disabled from the first time they are rendered. And also provide a class name that will be the same for both buttons, so you only need to call a line of code to disable or enable. If you need a unique identifier for each of the button, you can put nextbutton1 and nextbutton2 as the id for each of the button. And last, instead of checking on change event to the form, you can make it listen to the dropdown directly. Therefore it will only be triggered if the change occurs on the dropdown.

    <head>      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#dropdownNumber').change(function() {
                    if ($(this).val() == 0) {
                        $(".nextbutton").attr("disabled", true);
                     } else {
                        $(".nextbutton").attr("disabled", false);
                     }
                });
            });
        </script>
    </head>
    
    <body>
        <form id="phonetypeform">
            <select name="porting-p1" class="dropdown" id="dropdownNumber">
                <option value="" class="disablenext">Please select an option...</option>
                <option value="1" class="enablenext">I want to keep my current phone number</option>
                <option value="2" class="enablenext">I want to choose a new number</option>
            </select>
        </form>
    
        <button class="nextbutton" id="nextbutton1" disabled>sd Step</button> 
        <button class="nextbutton" id="nextbutton2" disabled>Next Step</button> 
    </body>
    

Related Articles