Dynamically disable a submit button

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Dynamically disable a submit button

Post by malcolmboston »

I have the following HTML form

Code: Select all

 
<select name="itemSize" class="itemSize" id="itemSize">
<option value="FALSE">Select a size</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
 
<select name="itemQuantity" id="itemQuantity">
<option value="FALSE">Qty</option>
<option value="1">1</option>
<option value="1">2</option>
</select>
 
<input name="addToCart" type="submit" value="Add to basket" />
 
I would like to disable the button until both select boxes have valid options selected (ie. not false) how can this be done? my javascript skills are useless!

Any help or nod's in the right direction would be great
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Dynamically disable a submit button

Post by jackpf »

With the onclick event of each checkbox, check the other's "checked" attribute evaluates to true. If so, enable the button.

If not, disable it.

:)
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Re: Dynamically disable a submit button

Post by JayBird »

jQuery

Code: Select all

$(document).ready(function() {
    $("#itemSize").change(function(){
                                   
                                   
        if($(this).val() != "FALSE" && $("#itemQuantity").val() != "FALSE") 
        {
            
            $('#buttonID').removeAttr("disabled");
        
        }
        else
        {
        
            $('#buttonID').attr("disabled", "disabled");
        
        }
    })
    
    $("#itemQuantity").change(function(){
        if($(this).val() != "FALSE" && $("#itemSize").val() != "FALSE") 
        {
            $('#buttonID').removeAttr("disabled");
        
        }
        else
        {
            $('#buttonID').attr("disabled", "disabled");
        }
    })
})
 
Post Reply