JavaScript and client side scripting.
Moderator: General Moderators
malcolmboston
DevNet Resident
Posts: 1826 Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK
Post
by malcolmboston » Sat Sep 26, 2009 9:32 am
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
jackpf
DevNet Resident
Posts: 2119 Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK
Post
by jackpf » Sat Sep 26, 2009 11:16 am
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.
JayBird
Admin
Posts: 4524 Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:
Post
by JayBird » Sat Sep 26, 2009 12:30 pm
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");
}
})
})