Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to disable select box if no option is set using Jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 747
    Comment on it

    Hello Reader's if you have desing the html web form where you want to put the select box dissable if no option is selected.

    So let's start with the html form and its code will go like this:-

    <form name="sell" id="sell" method="post" action="http://tajerlee.com/userSite/sell_part2/27">
              <p>Choose a category for your listing.</p>
              <div class="topBookListLeft">
                <div class="clearfix">
                  <span class="numberEdit">1</span>
                   <select onchange="fetchsubcategory_list(this.value)" name="category_list" id="category_list" required = "" class="blockEdit topBookListblocks" size="7">
    
                                         <option value="31">Cars</option> Cars                                <option value="32">Motorbikes</option> Motorbikes                                <option value="42">Buses</option> Buses                                <option value="45">Trucks</option> Trucks                         
                    
                </select>
                </div>
                
                <div class="clearfix">
                  <span class="numberEdit numberEdit2">2</span>
                  <select name="subcategory_list" id="subcategory_list" class="blockEdit topBookListblocks" onchange="fetchsublistings(this.value)" size="7" >
                 
                </select>
                </div>
                
                <div class="clearfix">
                  <span class="numberEdit numberEdit2">3</span>
                 <select name="sublistings" id="sublistings" class="blockEdit topBookListblocks" onchange="populate(2)" size="7" >
                   
                </select>
                </div>
                <p><button type="submit" value="submit" class="btn btn-default nxtBtnEdit">Next ></button></p>
               </form>

    In the code above you can see the first select box its written

    onchange="fetchsubcategory_list(this.value)"

    So on changing the value the select box below it will fetch the  subcategory under current category, and if no sub category is found then the blank option will be shown and select box will dissabled. By making the selectbox dissabled developer can ensure that form will not pass the blank id, However the blank option is to inform user that no further category is found.

    So the final part of Jquery and it's code will go like this:-

    <script type="text/javascript">
    function fetchsubcategory_list (val) {
    //  alert(val);
    var make_options;
    
        jQuery.ajax({
          url: webUrl+"userSite/fetchsubcategory_list",
          data:{ 'id': val },
          type: "POST",
          dataType:"json",
            success:function(getResponse) {
            console.log(getResponse.length);
    
            if(getResponse.length >0 ) {
         
            for (var i = 0; i<getResponse.length; i++)
    {
            //console.log(subcategory);
              make_options = make_options+'<option  value = "'+getResponse[i].id+'" selected="" >'+getResponse[i].category_name+'</option>'; 
            }
             html_syntax = '<select onChange = fetchsublistings(this.value)  name = "make" >'+make_options+'</select>';
            
              //var length = getMakeModel.length; 
              $('#subcategory_list').html(html_syntax);
              $('#subcategory_list').prop('disabled', false);
             
            } else {
             
    
              $('#subcategory_list').html('<option>--no subcategory--</option>');
              $('#sublistings').html('<option>--no subcategory--</option>');
    
              $('#subcategory_list').prop('disabled', 'disabled');
              $('#sublistings').prop('disabled', 'disabled');
            }
             
          }
        });
    
    }
    </script>
    
    <script type="text/javascript">
    function fetchsublistings (val) {
    //  alert(val);
    var make_options;
    
        jQuery.ajax({
          url: webUrl+"userSite/fetchsubcategory_list",
          data:{ 'id': val },
          type: "POST",
          dataType:"json",
            success:function(getResponse) {
            console.log(getResponse.length);
    
            if(getResponse.length >0 ) {
         
            for (var i = 0; i<getResponse.length; i++)
    {
                  console.log(getResponse[i].category_name);
            //console.log(subcategory);
              make_options = make_options+'<option  value = "'+getResponse[i].id+'" selected="">'+getResponse[i].category_name+'</option>'; 
            }
             html_syntax = '<select  name = "model" >'+make_options+'</select>';
             $('#sublistings').prop('disabled', false);
            
              //var length = getMakeModel.length; 
              $('#sublistings').html(html_syntax);
            } else {
                        $('#sublistings').prop('disabled', 'disabled');         
              $('#sublistings').html('<option>--no subcategory--</option>');
            }
            
          }
        });
    
    }
    </script>

     

    Now the output you can see in the picture below:-

    How to disable select box if no option is set using Jquery

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: