In usually every web application checkbox and radio button play a major role in getting the information from the user. In this article, we will learn to send the asynchronous messages of the selected checkboxes and radio boxes to the server.
For this article, we will be creating three files:
- checkboxradioajax.php – PHP script that will display three radio buttons and three checkboxes for the user to select from.
- checkboxradioajax.js – JavaScript file that create XMLHttpReqest object and that send the information of the selected checkboxes and radio buttons to the server asynchronously
- checkboxradiodata.php – Server side PHP script that displays information about the selected checkboxes and radio buttons to the client as a server response
Coding for “Sending radio and checkbox options to the server asynchronously”
The code in checkboxradioajax.php file is as under :
checkboxradioajax.php
<html>
<head>
<script type=”text/JavaScript” src=”checkboxradioajax.js”></script>
</head>
<body>
Choose one : <br>
<input name=”drink” value =”Hot Coffee” onClick=’display()’> Hot Coffee <br>
<input name=”drink” value =”Cold Coffee” onClick=’display()’> Cold Coffee <br>
<input name=”drink” value =”Soft Drink” onClick=’display()’> Soft Drink <br><br>
Choose all the options that you want to have : <br>
<input name=”food” value =”Hot Dog” onClick=’display()’> Hot Dog <br>
<input name=”food” value=”Pizza” onClick=’display()’>Pizza <br>
<input name=”food” value=”Noodles” onClick=’display()’>Noodles <br>
<input name=”food” value=”Chips” onClick=’display()’>Chips <br><br>
<div></div>
</body>
</html>
Above program defines three radio buttons with options : Hot Coffee, Cold Coffee and Soft Drink and four checkboxes with options : Hot Dog, Pizza, Noodles and Chips. The name assigned to the radio buttons is “drink” and if any of the radio button is selected, display() method will be invoked. Similarly the checkboxes are named : “food” and if any of the checkbox is selected, same display() method will be invoked. Beside this, a <div> element is defined with id : “info” for displaying the server response. Remember, that we can select only one radio button in a group whereas any number of checkboxes can be selected in a group.
The code in JavaScript file, checkboxradioajax.js file is as under :
checkboxradioajax.js
1. function makeRequestObject(){
2. var xmlhttp=false;
3. try {
4. xmlhttp = new ActiveXObject(‘Msxml2.XMLHTTP’);
5. } catch (e) {
6. try {
7. xmlhttp = new
8. ActiveXObject(‘Microsoft.XMLHTTP’);
9. } catch (E) {
10. xmlhttp = false;
11. }
12. }
13. if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
14. xmlhttp = new XMLHttpRequest();
15. }
16. return xmlhttp;
17. }
18. function display()
19. {
20. var xmlhttp=makeRequestObject();
21. ControlsArray=document.getElementsByTagName(‘input’);
22. var fooditms=”";
23. var drinkitms=”";
24. for(var i=0; i< ControlsArray.length; i++)
25. {
26. if(ControlsArray[i].type==”checkbox” && ControlsArray[i].checked)
27. {
28. fooditms+=ControlsArray[i].value + ” “;
29. }
30. if(ControlsArray[i].type==”radio” && ControlsArray[i].checked)
31. {
32. drinkitms+=ControlsArray[i].value + ” “;
33. }
34. }
35. xmlhttp.open(‘GET’, ‘checkradiodata.php SelectedDrink=’+drinkitms+’&SelectedFood=’+fooditms, true);
36. xmlhttp.onreadystatechange=function() {
37. if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
38. var content = xmlhttp.responseText;
39. if( content ){
40. document.getElementById(‘info’).innerHTML = content;
41. }
42. }
43. }
44. xmlhttp.send(null)
45. }
Explanation of the above program
Statements from 1-17 are making an XMLHttpRequest object.
21. ControlsArray=document.getElementsByTagName(‘input’);
The elements in the web page with name : “input” (usually all the elements in a web page come under this category) are searched and all the items with this name are assigned to an array : ControlsArray.
22. var fooditms=”";
23. var drinkitms=”";
24. for(var i=0; i< ControlsArray.length; i++)
25. {
26. if(ControlsArray[i].type==”checkbox” && ControlsArray[i].checked)
27. {
28. fooditms+=ControlsArray[i].value + ” “;
29. }
30. if(ControlsArray[i].type==”radio” && ControlsArray[i].checked)
31. {
32. drinkitms+=ControlsArray[i].value + ” “;
33. }
34. }
With the help of a loop, all the elements in the ControlsArray are checked one by one and the value of all the elements in the array which are of type “checkbox” and are checked (selected) are stored in a variable fooditms. Similarly, all of the elements of type “radio” and are checked, their values is assigned to variable drinkitms
35. xmlhttp.open(‘GET’, ‘checkradiodata.php?SelectedDrink=’+drinkitms+’&SelectedFood=’+fooditms, true);
36. xmlhttp.onreadystatechange=function() {
37. if (xmlhttp.readyState==4 && xmlhttp.status == 200) {
38. var content = xmlhttp.responseText;
39. if( content ){
40. document.getElementById(‘info’).innerHTML = content;
41. }
42. }
43. }
44. xmlhttp.send(null)
45. }
XMLHttp request is made to the server (by GET method) for the file checkboxradiodata.php, sending all the selected drink items and selected food items (stored in variables drinkitms and fooditms respectively) to it.
The state and the response to asynchronous request are checked. If the value of readyState property becomes 4 and the value of the status of the HTTP Request is 200, the response is then retrieved from the response stream and is assigned to variable : content which is then applied to the innerHTML property of the element with id : “info” to display the response from the server (i.e. to display all the items selected from the checkbox and radio buttons).
The instruction : xmlhttp.send(null) is used to actually send the request to the server. And if we don’t want to pass any query string with the requested file, the argument passed to this method is null or else it contains the query string.
Remember, the response generated by the server is based on the execution of the file : checkboxradiodata.php. Lets analyze what it returns
checkboxradiodata.php
<?php
$food=$_GET['SelectedFood'];
$drink=$_GET['SelectedDrink'];
if($drink==”")
{
echo “You have not selected any drink <br><br>”;
}
else
{
echo “The drink selected is : ” . $drink . “<br><br>”;
}
if($food==”")
{
echo “You have not selected food <br><br>”;
}
else
{
echo “The types of Food selected are : ” . $food . “<br><br>”;
}
?>
The selected food items and selected drink items are retrieved from $_GET array and stored in variables $food, and $drink respectively. The list of items selected from checkboxes and radio buttons are passed to this file while making the XMLHttp request for the file using following command :
35. xmlhttp.open(‘GET’, ‘checkradiodata.php?SelectedDrink=’+drinkitms+’&SelectedFood=’+fooditms, true);
We can see in above instruction that selected drink item and the selected food items are passed to the checkboxradiodata.php file. The retrieved items in $food and $drink variables are displayed on the screen (in case the contents of the variable are non blank or else the message : “You have not selected” food or dink is displayed).
Output of “Sending radio and checkbox options to the server asynchronously”
If both drink as well as food items are selected, the output may appear as shown below :
Output if both drink and food items are selected
This finishes my article on “Sending radio and checkbox options to the server asynchronously”
For more information, refer my book: “Developing Web Applications in PHP and AJAX” available at: http://www.amazon.com/Developing-Web-Applications-PHP-AJAX/dp/0070707103/ref=ntt_at_ep_dpt_4
