Simple Ajax Form Processing help

iBuddy

Was wondering if anyone can help with making this simple ajax form processing script I have work?



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<form id="box" action="ajaxupdate.php" method="post"> 
<h2>Submit Quary</h2> 
<label>Name</label> 
<input type="text" name="name" id="name" value="Type your name" /> 
<br>
<label>E-mail</label> 
<input type="text" name="email" id="email" value="Type your email address" /> 
<br>
<label>Message</label> 
<textarea cols="35" rows="2" id="message" name="message" >Type your message</textarea> 

<input type="button" class="submit" onclick="submitAJAXForm(this);" value="Update username"/>
</form> 


<script>
function submitAJAXForm(sub) 
{ 
	sub.setDisabled(true);	
	sub.setValue(".. Saving ..");	

var ajax = new Ajax(); 
ajax.responseType = Ajax.JSON; 


ajax.ondone = function(data) 
{ 
	var msgdialog = new Dialog();
	sub.setValue("Saved!");	
	return false;
}

ajax.onerror = function() {
	var msgdialog = new Dialog();
	msgdialog.showMessage('Error', 'An error has occurred while trying to submit.'); 
	sub.setValue("Error");	
	return false;
}



// collect field values
var queryParams = { 
	'name' : document.getElementById('name').getValue()

};
ajax.post('ajaxupdate.php', queryParams);
return false;
}


</script>

ajaxupdate.php

<?php


if($_POST['name']){
	$success = true;
	$json_values = array('success'=>$success);
	print json_encode($json_values);
}

?>

It's not even making the submit button disabled or doing anything.

bradgrafelman

One problem I see is here:

    sub.setDisabled(true);     

    sub.setValue(".. Saving ..");

You should be getting error messages in your browser's Javascript/developer/debugger/etc. console stating something like:

Uncaught TypeError: Object #<HTMLInputElement> has no method 'setDisabled'

since 'setDisabled' and 'setValue' aren't standard functions in the DOM.

iBuddy

Great thanks Brad.

Now I'm getting ajax is not defined any idea why I'm getting that?

<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

</head>
<body>


<script>

function submitAJAXForm(sub) 
{ 

sub.disabled = true;
sub.value = "saving...";


var queryParams = { 
	'name' : document.getElementById('name').value,

};


var ajax = new Ajax();
ajax.responseType = Ajax.JSON; 
ajax.post('ajaxupdate.php', queryParams);
return false;



ajax.ondone = function(data) 
{ 
	if(data.success){
		sub.value = "saved!";
		return false;
	}else{
		sub.value = "error!";
		return false;
	}
}

ajax.onerror = function() {
	alert("error");
	sub.value = "error!";
	return false;
}





}


</script>


<form id="box" action="" method="post"> 
<label>Name</label> 
<input type="text" name="name" id="name" placeholder="Type your name" /> 
<input type="submit" onclick="submitAJAXForm(this); return false;" value="submit">
</form> 

</body>
</html>

bradgrafelman

Well for one you say 'new Ajax()' and yet you never defined anything named 'Ajax'.

For another, why aren't you just using jQuery's '$' variable that it creates automatically?

Yet another; why are you doing a 'return false' before you define the .ondone and .onerror anonymous functions? I should say attempting to define, since returning before you actually do so means that code will never be executed.