Tags:







How can I use jQuery show and hide DIVs based on checkboxes in a submitted form?
July 21, 2010 7:28 AM   Subscribe

How can I use jQuery to show and hide DIVs based on checkboxes in a submitted form from a different page?

I need to submit a form on one page, and show and hide DIVs on the receiving page based on what checkboxes were checked. The script also needs to display different messages for no checkboxes being checked, some checkboxes being checked, or all checkboxes being checked.

(I know this is JavaScript-dependent; it wasn't my idea.)
posted by kirkaracha to computers & internet (9 answers total) 1 user marked this as a favorite
When you're dealing with data submitted from a form (usually via a POST), you generally use a back-end script to determine what gets displayed on what you're calling the 'receiving page'.

I suppose you could submit the form via GET, and then use something like this jQuery URL Parser to get the submitted values from the form, but that's a really roundabout way to do things.
posted by le morte de bea arthur at 7:37 AM on July 21, 2010


Both pages have to be static HTML. (Like I said, not my idea.)
posted by kirkaracha at 7:39 AM on July 21, 2010


If the form is submitted using GET, you can do some URL parsing as suggested above. You can look at the "method" attribute of the form element on the source page to see if that is the case.

But really, this will break if anyone has JavaScript turned off. It might be a better use of your time to see if you can get some PHP going on these pages, since this is one of the things PHP was made to do.
posted by rachelpapers at 7:46 AM on July 21, 2010


Javascript, and not actually jquery, but the getParameterByName function on this page:

Get querystring with jquery

Should do what you want. If you had three checkboxes with the names:

checkbox1
checkbox2
checkbox3

You could then do something like this for each checkbox div with jquery like:

if (getParameterByName('checkbox1')) {
$("#divToShowIfCheckbox1IsChecked").show();
}
posted by backwards guitar at 7:55 AM on July 21, 2010


Basically what you'd need to do to use jQuery for this is to submit the form via GET, and make sure you have that URL Parser installed. In the head of the document you'd need a script that looks something like:

$(document).ready(function() {
    if (jQuery.url.param('checkboxname') == 'checkboxvalue') {
        $('#msgdiv').show();
    } else {
        $('#msgdiv').hide();
    }
});

That would show/hide a message wrapped in a div depending on a particular checkbox value. Obviously your script's going to have a load more conditional stuff, but that's the essence of it.
posted by le morte de bea arthur at 7:56 AM on July 21, 2010




(which is roughly the same as what backwards guitar said)
posted by le morte de bea arthur at 7:57 AM on July 21, 2010


Here's your form-page.html:
<body>
<form method="get" action="next-page.html">
	<input type="checkbox" id="box_1" name="box_1" value="1"><label for="box_1">Box 1</label>
	<input type="checkbox" id="box_2" name="box_2" value="1"><label for="box_2">Box 2</label>
	<input type="checkbox" id="box_3" name="box_3" value="1"><label for="box_3">Box 3</label>
	<input type="checkbox" id="box_4" name="box_4" value="1"><label for="box_4">Box 4</label>
	<input type="submit" value="Go">
</form>
</body>
Here's your next-page.html:
<style type="text/css">
#conditional-divs>div {
	display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
   type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	var parts = document.location.search.substring(1).split("&");
	for (i = 0; i < parts.length; i++) {
		var selector = '#' + parts[i].split("=")[0];
		$(selector).show();
	}
});
</script>
<body>
	<div id="conditional-divs">
		<div id="box_1">div_1</div>
		<div id="box_2">div_2</div>
		<div id="box_3">div_3</div>
		<div id="box_4">div_4</div>
	</div>
</body>

posted by artlung at 12:15 PM on July 21, 2010


There's nothing that says that static HTML pages can't have query parameters. The server will ignore everything after ? in the URL if it's serving a static page, which means you can still put query parameters in the URL even if they are only accessed by clientside JS. A similar method is to use anchors, i.e. encode your parameters after a # in the URL, which is ignored by the browser if there is no anchor by that name, but is still accessible to clientside JS.

If you can't smuggle the check-box states through to the next page with either of those methods then you can set a cookie from the first page and read it on the second page.
posted by Rhomboid at 12:41 PM on July 21, 2010


Thanks artlung, for the excellent answer.
posted by kirkaracha at 5:13 PM on July 22, 2010


« Older Help me understand what seems ...   |  Besides voiding my warranty, w... Newer »
This thread is closed to new comments.