Page 1 of 1

Dynamically disable a submit button

Posted: Sat Sep 26, 2009 9:32 am
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

Re: Dynamically disable a submit button

Posted: Sat Sep 26, 2009 11:16 am
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.

:)

Re: Dynamically disable a submit button

Posted: Sat Sep 26, 2009 12:30 pm
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");
        }
    })
})