Cant Ajax THIS.. Simple HTML POST to a PHP. Help PLEA$E

[diex]

Please help... I will deposit $20.00 in the PayPal account of the person who gives me the MAGIC ANSWER.

Just a token of my appreciation. JEERS to Experts Exchange where no answers are forthcoming. Thank you.

 

SIMPLE NON AJAX VERSION -  I have a form with multiple checkboxes that I post to a PHP script which queries a mySQL DB.  This works except it reloads the page with the returned data, thats why I want to AJAX it.

 

HTML PAGE

<form action="data.php" method="post"  target ="showframe>

<tr>

<td><INPUT TYPE=CHECKBOX VALUE="Chicago" NAME="site[]">Chicago</td>

<td><INPUT TYPE=CHECKBOX VALUE="Cincinnati" NAME="site[]">Cincinnati</td>

<td><INPUT TYPE=CHECKBOX VALUE="Cleveland" NAME="site[]">Cleveland</td>

<td><INPUT TYPE=CHECKBOX VALUE="Des Moines" NAME="site[]">Des Moines</td>

>> many more cities<<<

 

<input type = "Submit" name = "submit"  value="Do it"/>

 

WHATS INTERESTING TO ME HERE: So with the simple POST shown above,  the array for site[] is successfuly recieved by my PHP script. Is this what they call encoded??? that is not with the URL params &value=blahblah.

 

data.php

<start PHP>// The only thing you need to know is that my PHP script recieves the checked box data array and I put it in $Rmarket. From there I am I parse it out and do my query..  THIS IS ALL GOOD.

 

$Rmarket = $_REQUEST['site'];

<end PHP>

 

Now...

 

PAINFUL AJAX ATTEMPT: I want to do the same thing except have the form stay on the page and the results shown below... It appears that my array is not making it to the php script. My JAVASCRIPT AJAX code works for simple stuff, for example if I call the DB query with preset values it will show the results no problem. BUT when I try to send the checked boxes (using the array???) it seems that array is not making it to the script.. and my DB query fails and it seems like the array is empty assuming it even made it to the php.  So here is the code.. remember the JavaScript seems to work...

 

FIRST THE JAVA FUNCTIONS:

 

    <script language = "javascript">

      var XMLHttpRequestObject = false;

 

      if (window.XMLHttpRequest) {

        XMLHttpRequestObject = new XMLHttpRequest();

      } else if (window.ActiveXObject) {

        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

      }

 

      function getData(dataSource, divID)

      {

        if(XMLHttpRequestObject) {

          var obj = document.getElementById(divID);

          XMLHttpRequestObject.open("POST", dataSource);

 

 

          XMLHttpRequestObject.onreadystatechange = function()

          {

            if (XMLHttpRequestObject.readyState == 4 &&

              XMLHttpRequestObject.status == 200) {

                obj.innerHTML = XMLHttpRequestObject.responseText;

            }

          }

 

          XMLHttpRequestObject.send(null);

        }

      }

    </script>

 

NOW THE HTML ...

 

NOTE: There is no FORM ACTION..

 

<tr>

<td><INPUT TYPE=CHECKBOX VALUE="Chicago" NAME="site[]">Chicago</td>

<td><INPUT TYPE=CHECKBOX VALUE="Cincinnati" NAME="site[]">Cincinnati</td>

<td><INPUT TYPE=CHECKBOX VALUE="Cleveland" NAME="site[]">Cleveland</td>

<td><INPUT TYPE=CHECKBOX VALUE="Des Moines" NAME="site[]">Des Moines</td>

>> many more cities<<<

 

<input type = "button" value = "Filter"

        onclick = "getData('data.php', 'targetDiv')">

 

NOW THE PHP .. data.php

 

Again, the only thing important here is

 

$Rmarket = $_REQUEST['site'];

 

I have tried $_POST['site'] and $_GET['site'] .. my checked box array just does not appear to be making it to the PHP script.

 

-----

So..  when you sumbit the mySQL error appears where there should be a table of data. The error occurs because Im not getting my query information from the form.

 

 

Thats it.. Sorry for the long post. My thanks in advance if you take the time to think through this.

 

Thanks

 

diex

 

 

---

 

[artacus]

In this case I think you are going to be better off NOT going with AJAX. So lets look at the problem.

 

This works except it reloads the page with the returned data, thats why I want to AJAX it.

 

I don't understand what your problem is here. Can you explain it and also tell me what the page that you submit to does after it finishes processing? (history.go(-1), document.location.href =, header('location: '))

 

 

[diex]

artacus...

It looks like you are asking about my NON AJAX version which works... You know when I submit , the page clears and a new page is served with the mySQL table.

 

What is driving me here is that I want the form with the checkboxes to stay on the page with the boxes checked and the table to magically appear below the form. Then I can clear some boxes and submit again.You are probably right that AJAX is overkill but I might be able to expand functionality on the form if I can get it to work... Its close to working... The form stays on the page but Im not getting my table.

 

 

[artacus]

Ok, well your form is using POST. To use AJAX, you'll gather all of the checkbox info into GET variables that will look like so: ?site[1]=chicago&site[2]=cincinatti...

 

To do that, I'd use document.getElementsByTagName('INPUT') to go thru each of your checkboxes and add the ones that are checked to your query string.

 

... I still don't think that this is a job best handled by ajax. When it is submitted is anything saved to the database? Or are you using the checkboxes for navigation? I'm not clear on what you are doing.