AJAX Checkbox

[kyern]

I have a large form that is used to enable / disable several categories of a report generator I am creating. Each category has a simple checkbox. I would really like to find a way to ajax enable this application. I am still extremely new to ajax. I figure to do this I need to make each checkbox have a unique name then somehow do a onclick event on the checkbox that does the ajax call. How do i do the ajax call though? Any insight would be appreciated.

David

 

[Xaqte]

If you were using the prototype library:

		<script type="text/javascript" language="javascript" charset="utf-8">
			// <![CDATA[
		var checkList = Form.getElements("myform");
		checkList.each(function(el) {
				Event.observe(el, "change", function() {
				new Ajax.Request('yourscript.asp', {
				  method: "post",
				  postBody: el.name + '=' + $F(el),
				  asynchronous: true
				});       
				});
		}.bind(this));
			// ]]>
		</script>

Let us know your results!

X

 

[rhyno2k]

Hi Kyern,

Prototype is very popular, and Xagte's suggestion looks good.

Another alternative is to use a library like the lightweight jQuery.

http://www.jquery.com

Sample jQuery code for your script might simply be:

$("#category1").click(function(){
   $.post("config_report.php", { report: "financials" } );
});

...where "category1" would be the id of one of your checkboxes, and "config_report.php" (or ASP, or what have you) would process the info (a parameter called "report" with a value of "financials") immediately when the checkbox is ticked.

This is a simple example (and not tested), used to demonstrate the code. Check out

http://jquery.com/docs/

for more information, documentation, tutorials and demos.

http://jquery.com/docs/AJAXModule/

covers core AJAX-specific features.


Good luck,
--RHYNO