Ajax POST to PHP help

turnip

06-18-2007, 04:26 AM

I would like to post a form via ajax to a php file

The file is index.php, the string passed in has to be ?do=xyz
The form data we need looks like this

<form method="post" action="$PHP_SELF/index.php?do=recruit_update">
<tr>
<td class="alt1">Druid: </td>
<td class="alt1"><input name="classes[Druid]" type="text" value="$druid" size="10"></td>
</tr>

<tr>
<td class="alt1">Hunter: </td>
<td class="alt1"><input name="classes[Hunter]" type="text" value="$hunter" size="10"></td>
</tr>

<tr>
<td class="alt1">Mage: </td>
<td class="alt1"><input name="classes[Mage]" type="text" value="$mage" size="10"></td>
</tr>

<tr>
<td class="alt1">Paladin: </td>
<td class="alt1"><input name="classes[Paladin]" type="text" value="$paladin" size="10"></td>
</tr>

<tr>
<td class="alt1">Priest: </td>
<td class="alt1"><input name="classes[Priest]" type="text" value="$priest" size="10"></td>
</tr>

<tr>
<td class="alt1">Rogue: </td>
<td class="alt1"><input name="classes[Rogue]" type="text" value="$rogue" size="10"></td>
</tr>

<tr>
<td class="alt1">Shaman: </td>
<td class="alt1"><input name="classes[Shaman]" type="text" value="$shaman" size="10"></td>
</tr>

<tr>
<td class="alt1">Warlock: </td>
<td class="alt1"><input name="classes[Warlock]" type="text" value="$warlock" size="10"></td>
</tr>

<tr>
<td class="alt1">Warrior: </td>
<td class="alt1"><input name="classes[Warrior]" type="text" value="$warrior" size="10"></td>
</tr>

<tr>
<td valign="top" colspan="2" class="alt2">
<div align="center"><input name="Edit" type="submit" id="Edit" value="Update"></div>
</td>
</tr>

</form>

This is a vbulletin template. The variables are set when the eval call is made. I am just looking to use ajax to post the classes array to <myurl>index.php?do=recruit_update.. Once it is posted to the page PHP takes over and all is well.
The format of the posted array would be:

//example.
$_POST['classes'] = array ('Druid' => 1, 'Hunter' => 1);

foreach($_POST['classes'] AS $index => $val ){
$db->insert(update xyz SET $index = $value....);
}

if that makes sense.

I am not even looking for a return result, just to stop a page refresh. Would be a huge bonus if the form still worked if js was disabled.

Thanks in advance if anyone decides to take pita and help, id be happy to return the favor with some php if need be.

_Aerospace_Eng_

06-18-2007, 07:32 AM

http://www.openjs.com/ajax/tutorial/index.php
http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

turnip

06-19-2007, 08:47 PM

I managed to get somewhere here..

I have code that works on firefox, but not IE, if someone could point out why I would appreciate it

form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="post.js" language="javascript"</script>
</head>
<body>
<form method="POST" name="recruitment" id="recruitment" onSubmit="postMethod(); return false;">
<input type="text" name="classes[Assassin]" id="classes[Assassin]" />
<input type="text" name="classes[Bruiser]" id="classes[Bruiser]"/>
<input type="submit" name="Submit" value="Submit"/>

</form>
</body>
</html>

post.js

function getHTTPObject() {
var http = false;
if(typeof ActiveXObject != 'undefined') {
try {http = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {
try {http = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E) {http = false;}
}
} else if (XMLHttpRequest) {
try {http = new XMLHttpRequest();}
catch (e) {http = false;}
}
if(http == false){
alert("no http object");
}
return http;
}

function handler() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}

var http = getHTTPObject();
var url = "index.php";

function postMethod(){
var post = document.recruitment;
var data;
var key;

for(var i = 0; i < post.length; i++){
if(post.elements[i].value == 'Submit'){
}else{
key = post.elements[i].name;
data += '&'+key+'='+post.elements[i].value;
}
}

var params = "do=recruit_update&classes=" + data;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = handler;
http.send(params);
}

Again any help is appreciated.