?
Solved

AJAX building query string from checkbox array

Posted on 2011-09-26
3
Medium Priority
?
274 Views
Last Modified: 2012-05-12
Hi all,

I'm trying to build a querystring from a check box array.

Here's my AJAX code - the var options and var querystring are the areas I'm guessing I need to flesh out but not quite sure how to do it:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
			document.getElementById('result').innerHTML = ajaxRequest.responseText;
		}
	}
	//Need to grab query string and append checked checkboxes array
	var options = document.get......
	var queryString = "?filter_options=" + options....;
	ajaxRequest.open("GET", "filter_query.php" + queryString, true);
	ajaxRequest.send(null);  
}

//-->
</script>

Open in new window



Here's some checkboxes:

<label for="1"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="1" id="1">Option 1</label>
<label for="2"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="2" id="2">Option 2</label>
<label for="3"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="3" id="3">Option 3</label>

Open in new window


There can be loads of these and I was thinking of sending the string of id's to the server like:
filter_option=1-2-3-4-5-45-34-67-89 and doing an explode() on them before querying.

Lastly, the user arrives at this page with variables in the URL obtained via GET already.

e.g. search.php?qs=My+Search&date=3m


So I have a few questions around this:
A) How can this be achieved?
B) Is this the best way and is this fully browser compliant?
C) How can I include the variables already in the URL in the AJAX call? Write them into it via php?

Huge thanks
David
0
Comment
Question by:dolythgoe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 1400 total points
ID: 36600799
use :

var checkboxes = document.getElementsByName("filter_option[]");
var queryString = [];
for(var i=0;i<checkboxes.length;i++) {
    if( checkboxes[i].checked ) {
        queryString.push( checkboxes[i].value );
    }
    
}
queryString = "?filter_options=" + queryString.join(",");

Open in new window


test page : http://jsfiddle.net/XekX7/
0
 
LVL 3

Assisted Solution

by:azserrata
azserrata earned 600 total points
ID: 36603584
In order to include the "variables already in URL" into the new URL you could add to leakim971 last line:

prevQS="<?php echo($_SERVER["QUERY_STRING"])?>";
queryString = "?"+prevQS+"&filter_options=" + queryString.join(",");

Open in new window


I believe this should work.

Cheers
David
0
 

Author Closing Comment

by:dolythgoe
ID: 36711193
Huge thanks guys
0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does the idea of dealing with bits scare or confuse you? Does it seem like a waste of time in an age where we all have terabytes of storage? If so, you're missing out on one of the core tools in every professional programmer's toolbox. Learn how to …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question