sampath Posted October 8, 2012 Share Posted October 8, 2012 Dear All, I recently started using ajax. Now I feel bit comfortable and the most problems I encounter can usually be solved referring to various support forums over the Internet. But the problem I have with check box is still could not be solved. I need to get an input from a user and save it into the database and give a message for the user for successful data saving. The input type is a check box. Following is my code segments. HTML code --------------- <td width="50%" align="left"> <input type="checkbox" id="chkadministrator" name="chkadministrator" value="on"/>Administrator </td> The code goes inside a form. Javascript code in ajax layer --------------------------------------- if(document.getElementById('submit')) { ajax.open('post', 'gui control/user_rights/submit.php'); // Function that handles the response: ajax.onreadystatechange = function() { // Pass it this request object: handleSaveResponse(ajax); } // Assemble all the form data: var fields = ['cmbprofessional', 'chkadministrator']; //var fields = ['cmbprofessional', 'chkadministrator', 'chkviewgeneralreports', 'chkaddcustomers', 'chkviewappointmentreports', 'chkscheduleappointments', 'chkscheduleappointmentsforother', 'chkcreatecalender', 'chkviewreports', 'chkdeleteprofessional', 'chkdeletecustomers']; for (var i = 0; i < fields.length; i++) { fields = fields + '=' + encodeURIComponent(document.getElementById(fields).value); } var values = fields.join('&'); // Set the request headers: ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Send the request along with the data: ajax.send(values); return false; } submit.php file ------------------ header("Content-Type: text/xml"); echo '<?xml version="1.0" encoding="utf-8" standalone="yes" ?><response>'; if (isset($_REQUEST['chkadministrator'])) { echo '<system_error>' . $_POST['chkadministrator'] . '</system_error>'; $administrator = 1; } else { echo '<system_error>' . $_POST['chkadministrator'] . '</system_error>'; $administrator = 0; } I need to set $administrator = 1 when user check the check box and set it to $administrator = 0 when the user uncheck the check box. The problem that I have is it is always set to $administrator = 1. As I understood, the post method sends data for the check box when only it has checked. What is actually has gone wrong with me here? Your support for this issue is highly appreciated! Thanks in advance... Link to comment Share on other sites More sharing options...
HartleySan Posted October 8, 2012 Share Posted October 8, 2012 Instead of trying to edit your script, I've written my own scripts that I think demonstrate what you want to do. Hopefully the comments in the scripts will prove sufficient. If you have any questions, please ask. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax checkboxes</title> </head> <body> <form action="index.html" method="post"> <!-- Note that [] is appended onto the end of the name attribute value for all the checkboxes. --> <!-- This allows PHP to more easily process the checkboxes in the form, although it makes the JS a bit trickier. --> <input type="checkbox" name="food[]" value="hamburger"> Hamburger <input type="checkbox" name="food[]" value="fries"> Fries <input type="checkbox" name="food[]" value="salad"> Salad <input type="checkbox" name="food[]" value="pizza"> Pizza <input type="submit" name="submit" value="Submit"> </form> <script> document.forms[0].onsubmit = function () { // Set up an anonymous function reference for when the form is submitted. var ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Msxml2.XMLHTTP.6.0'); // Simplified testing to create a valid Ajax object in all browsers. ajax.onreadystatechange = function () { // This event handler takes care of the response from the PHP script that handles the DB processing. if ((ajax.readyState === 4) && (ajax.status === 200)) { alert(ajax.responseText); // Do something with the response from the DB processing PHP script. } }; var post_arr = []; // Declare an empty array. for (var i = 0; i < this['food[]'].length; i++) { // Loop through each of the checkboxes. Because the name attribute contains brackets (which have special meaning in JS), // you have to use the above syntax to refer to the checkbox array in JS. if (this['food[]'][i].checked) { // If the ith checkbox is checked, assign 1. post_arr[i] = this['food[]'][i].value + '=' + 1; } else { // If not, assign 0. post_arr[i] = this['food[]'][i].value + '=' + 0; } } var params = post_arr.join('&'); // alert(params); // You can uncomment this line and alert params to the screen to see what's sent to the PHP script. ajax.open('post', 'db_processing.php'); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Don't forget this request header for the post method. ajax.send(params); return false; // Suppress the standard form submission. }; </script> </body> </html> db_processing.php <?php if (isset($_POST['hamburger'])) { // Do your DB processing here. if ('DB processing successful') { echo 1; } else { echo 0; } } 1 Link to comment Share on other sites More sharing options...
sampath Posted October 8, 2012 Author Share Posted October 8, 2012 Dear HartleySan, I'm very happy for your quick reply for my issue and thank you very much. I worked according to your method and successfully completed my program! But for the sake of knowledge, can you just tell me whether why it does not work in the normal way as for text boxes, text areas etc.? Best Regards, Sampath Link to comment Share on other sites More sharing options...
HartleySan Posted October 8, 2012 Share Posted October 8, 2012 I'm not sure what you mean by the "normal method", but by their very nature, checkboxes are different from text input and text areas. The value property for a checkbox is the value set for the value attribute. To confirm whether a checkbox is checked or not, you have to used the Boolean checked property. Beyond that, the rest of the script basically just creates a 1 for checked and a 0 for not checked for each checkbox, and sends that info to the PHP script for further processing. If you want to know more about checkboxes, I recommend Googling some more info on handling checkboxes in JS. If there's anything else I can do to be of assistance, let me know. Link to comment Share on other sites More sharing options...
sampath Posted October 8, 2012 Author Share Posted October 8, 2012 Thank you... It's clear to me. Best Regards, Sampath. Link to comment Share on other sites More sharing options...
Recommended Posts