PHP / Ajax and Posting Variables

StevenJ

Hi,

I am trying to learn how to post data from a form into a database without having to go through a page refresh/load, and I am trying to use ajax to do so.

I have a working PHP function which inserts data into a database, and the form looks like:

<form id="form1" name="form1" method="POST" action="async.php";>
<input type="text" name="Field1" id="Field1" />
<input type="text" name="Field2" id="Field2" />
<input type="text" name="Field3" id="Field3" />
<input type="button" value="send" id="send" onclick="process()" /> 
<input type="submit" name="submit" id="submit" value="Submit" />
</form>

You will notice that there are two buttons. I have put one in there to use the POST method to prove my php function works. The first button however calls a function called "process" which is basically

var Field1 = document.getElementById("1").value
var Field2 = document.getElementById("2").value
var Field3 = document.getElementById("3").value
var parameters = "Field1=" + Field1 + "&Field2=" + Field2 + "&Field3=" + Field3 ;
xmlHttp.open("GET", "async.php" + parameters, true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);

when I click on the button to process the form, I get a prompt box with the error
There was a problem retrieving the data:
Not Found

I have checked the value of parameters after it has been constructed by printing it using the alert method, and parameters = "Field1=TEST1&Field2=TEST2&Field3=TEST3"

I am completely new to javascript so I would be most grateful of any help.

Regards

EDIT

I should add, that when handling the RequestStateChange, I have this in the function:

else if (xmlHttp.readyState == 4) 
  {
    // continue only if HTTP status is "OK"
    if (xmlHttp.status == 200) 
    {
      try
      {
        // read the message from the server
        response = xmlHttp.responseText;
        // display the message 
        myDiv.innerHTML += 
                      "Request status: 4 (complete). Server said: <br/>";
        myDiv.innerHTML += response;
      }
      catch(e)
      {
        // display error message
        alert("Error reading the response: " + e.toString());
      }
    } 
    else
    {
      // display status message
      alert("There was a problem retrieving the data:\n" + 
            xmlHttp.statusText);
    }
  }

Kudose

You're getting a 404 error because:

"async.php" + parameters

async.phpField1=....

You need a ? in there.

i.e.

"async.php?" + parameters

Also, FireBug, the Firefox extension, is great for Ajax and JS debugging. I would also recommend the Live HTTP Headers extension as well.

StevenJ

after playing around alittle linger, I did figure that out.

Thanks. Before I close the thread though, can anyone advise just how I can enhance the form to upload a file? I am away from my dev machine now so can't try in anger - but is it a simple matter of adding/alerting the form so that it includes the elements:

<form enctype="multipart/form-data" action="upload.php" method="POST">
<input name="uploaded" type="file" /><br />
<input type="submit" value="Upload" />
</form>

Kudose

Yes