Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Followers 0
sampath

Checkbox Posting Is Not Working Properly In Ajax For Me...

By sampath, in Building a Web Site with Ajax: Visual QuickProject

Recommended Posts

sampath    1

sampath
Posted

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...

Share this post

Link to post
Share on other sites

HartleySan    813

HartleySan
Posted

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;

   }

 }

  • Upvote 1

Share this post

Link to post
Share on other sites

sampath    1

sampath
Posted

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

Share this post

Link to post
Share on other sites

HartleySan    813

HartleySan
Posted

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Building a Web Site with Ajax: Visual QuickProject
×