Send checkbox values through ajax for a php/mysql query - php

Question

I am creating an html form and using it's values to dynamically filter search results from a mysql database. I have several dropdown's and one checkbox field for multiple values and I cannot get the checked values to send over ajax to my php page. Is there a way to update my query results based on this checkbox field the same way it current is for the other select fields?
HTML Code:
<form name="searchForm">
<input type="checkbox" name="services" value="twic" onclick="get_check_value()">TWIC</input><br/></li>
<input type="checkbox" name="services" value="enclosedTrucking" onclick="get_check_value()">Enclosed Trucking</input><br/>
<input type="checkbox" name="services" value="flatBedTrucking" onclick="get_check_value()">Flat Bed Trucking</input><br/>
</form>
Java script:
<script type="text/javascript">
function get_check_value()
{
var c_value = "";
for (var i=0; i < document.searchForm.services.length; i++) {
if (document.searchForm.services[i].checked)
{
c_value = c_value + document.searchForm.services[i].value + "\n";
}
}
return = c_value;
//alert(c_value);
}
</script>
<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 and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('results');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var os = document.getElementById('originState').value;
var c = document.getElementById('commodity').value;
var ds = document.getElementById('destState').value;
var ser = c_value;
var queryString = "?os=" + os ;
queryString += "&c=" + c + "&ds=" + ds + "&ser=" + ser;
//ajaxRequest.open("GET", "php/search2.php" +
// queryString, true);
ajaxRequest.open("GET", "php/testqueries.php" + queryString, true);
ajaxRequest.send(null);
}
</script>
PHP to receive the variables:
$ser = $_GET['ser'];

Answer 1

Try this using jquery,
<script type="text/javascript">
function get_check_value() {
var c_value = [];
$('input[name="services"]:checked').each(function () {
c_value.push(this.value);
});
return c_value.join(',');
}
$('#btnSubmit').on('click', function () {
var os = $('#originState').val();
var c = $('#commodity').val();
var ds = $('#destState').val();
var ser = get_check_value();
var queryString = "os=" + os;
queryString += "&c=" + c + "&ds=" + ds + "&ser=" + ser;
$.ajax({
url:'php/testqueries.php',
data:queryString,
success:function(data){
$('#results').html(data);
}
});
return false; // to prevent from page reload
});
</script>
Change your `html like,
<form name="searchForm">
<input type="checkbox" name="services" value="twic" />TWIC
<br/>
<input type="checkbox" name="services" value="enclosedTrucking" />Enclosed Trucking
<br/>
<input type="checkbox" name="services" value="flatBedTrucking" />Flat Bed Trucking
<br/>
<input type="submit" id="btnSubmit" value="Submit" />
</form>