Keeping form values

Hi, I have a form that has a select box of categories and a bunch of form fields.
The categories has a link that says Add Categories, when you click on that it runs ajax to call the processAdd.php which adds the category to the database and then the ajax function does document.location.href = "page.php"

what I want to know is there another way to do that and have the new item show up in the select box without deleting all of the other form input stuff that I already entered?

Yes. Instead of document.location.href replacement, the php would need to return (echo) the new option (as text or javascript) and the AJAX would need to add it in the select.

is there a way that i can make it return the mysql_insert_id and the $_POST['category'] and then how do i put it in the select statement
maybe use appendChild?

This is what i have so far but it is still refreshing the page for some reason:


var xmlhttp = false;

try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
xmlhttp = false;
}
}
if(!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}

function submitCategory(cat) {
//make the box visible
serverPage = "processAdd.php?action=ajax&category="+cat;
obj = document.getElementById("types");
xmlhttp.open("GET", serverPage, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var stuff = xmlhttp.responseText.split(" ");
obj.appendChild("<option value=\""+stuff[0]+"\">"+stuff[1]+"</option>");
}
}
xmlhttp.send(null);

}


and here is the php that im using in processAdd.php

else if($action == "ajax") {
$validator->validateGeneral($_REQUEST['category'], 'Category');
if($validator->foundErrors()) {
header("Location: add.php?action=categories&msg=There was a problem with:<br /> ".$validator->listErrors('<br />'));
} else {

$cat = trim(addslashes($_REQUEST['category']));
$ch = $db->query("SELECT title FROM categories WHERE name = '{$cat}'");
$num = $db->getNumRows($ch);
if($num > 0) {
header("Location: add.php?action=categories&msg=Sorry that category already exists in the database");
} else {
$result = $db->query("INSERT INTO categories VALUES('', '{$cat}', 0)");
echo mysql_insert_id()." ".$cat;
}
}
}

anyone?

What action does the user take to run this?
The refresh may be the result of a button click, link being followed, or a form submission. If it's a link, return false.

//Javascript that directs to the ajax function
function addCat() {

var cat = prompt("Please type the name of the new category.");
if(cat) {
submitCategory(cat);
} else {
return false;
}

}
//Link in HTML
<a href="#" onclick="return addCat();">Add Category</a>



Oh and do you have any idea what this error means?

[Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.walrusmusicblog.com/_cms/js/xmlhttp.js :: anonymous :: line 24" data: no]
http://www.walrusmusicblog.com/_cms/js/xmlhttp.js
Line 24
obj.appendChild("<option value=\""+stuff[0]+"\">"+stuff[1]+"</option>");

For anyone who wants to know the answer to this problem i just ended up doing this and it works perfectly.

unction submitCategory(cat) {

serverPage = "processAdd.php?action=ajax&category="+cat;
obj = document.getElementById("types");
xmlhttp.open("get", serverPage, true);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//var stuff = xmlhttp.responseText.split(" ");
//obj.appendChild("<option value=\""+stuff[0]+"\">"+stuff[1]+"</option>");
var xml = xmlhttp.responseXML.documentElement;
var id = xml.firstChild.childNodes[0].nodeValue;
var cat = xml.lastChild.childNodes[0].nodeValue;
var option_obj = new Option(cat, id);
obj.appendChild(option_obj);
}
}
xmlhttp.send(null);

}