Aliaspooryorik
ColdFusion ORM Book

jQuery and the not selector

I'm just working on a site that will have a collect from store option. I needed to be able to hide and show the relevant parts of the form depending on what they select. With jQuery and the not selector this is really easy to achieve, so I thought I'd knock up a quick blog post...


<form action="someaction.cfm" method="post">
<div id="delivery_type">
<label for="deliverytype_collect">
<input type="radio" name="collection" id="deliverytype_collect" value="1" />
Collect from store
</label>
<!--- this div is hidden for javascript users --->
<div id="deliveryinfo_collect" class="hideme">
<label for="store">Choose Store...</label>
<select name="store" id="store">
<option>London</option>
<option>New York</option>
<option>Peckham</option>
</select>
</div>

<label for="deliverytype_ship">
<input type="radio" name="collection" id="deliverytype_ship" value="1" />
Ship to a UK address
</label>
<!--- this div is hidden for javascript users --->
<div id="deliveryinfo_ship" class="hideme">
<label for="address">Address</label>
<textarea name="address"></textarea>
</div>

</div>
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
// user has Javascript so hide elements
$hidden = $('div.hideme').hide();
// detect radio option being selected
$('[name="collection"]').click(function(){
var type = this.id.split('_');
type = type[type.length-1];
var toshow = '#deliveryinfo_'+type;
// hide other options excluding the selected one
$hidden.not(toshow).hide('fast');
$(toshow).show('fast');
});

});
</script>

No comments

Leave a comment

If you found this post useful, interesting or just plain wrong, let me know - I like feedback :)

Please note: If you haven't commented before, then your comments will be moderated before they are displayed.

Please subscribe me to any further comments
 

Search

Wish List

Found something helpful & want to say ’thanks‘? Then visit my Amazon Wish List :)

Categories

Recent Posts