Ajax form submit to php script

[smash505]

Hey,

Ive been having trouble all day...Ive started to update a site to use ajax and it really isnt as easy as I thought it would be.

The problem is, I have a comment form on the bottom of a page, which goes to a php script and inserts the comment into a mysql database.

This is how my form is coded:

<form id="comment_form" method="post" action="">
<p>Add Comment	 </p>
<p>Name: <br>
<input name="name" type="text" id="name" size="30" />
</p>
<p>Email:<br>
<input name="email" type="text" id="email" size="30">
</p>
<p>Comment:<br>
<textarea name="post" cols="55" rows="5" id="post"></textarea>
</p><p>
<input type="submit" name="Submit" value="Add Comment" />
</p>
</form>

And this is what my php script is like:

<?php
	include ("connection.php");
	$blogid = $_GET['blog_id'];
	$date = date("d.m.y");
	mysql_query("INSERT INTO blog_comments (post_id,name,email,date,comment) VALUES ('$blogid', '$_POST[name]', '$_POST[email]', '$date', '$_POST[post]')");

	mysql_close();

	header("location: index.php?id=blog&blog_id=$blogid");
?>

Ive left all of my javascript out because im pretty sure it is way off.. :pinch:

What javascript do I need to add so that when a user clicks the submit button, the javascript sends all the form values to the php script? I would prefer it if I didnt have to change the php script in any way..

Thanks in advance!

[roosevelt]

If you use a AJAX framework like XAJAX this will be much easier. But anyways here's how my forms are setup:

<div id="ajax_content">
<form id="comment_form" method="post" action="java script:void(null);" onsubmit="processForm();">
<p>Add Comment	 </p>
<p>Name: <br>
<input name="name" type="text" id="name" size="30" onblur="checkField(this.value);" />
</p>
<p>Email:<br>
<input name="email" type="text" id="email" size="30" onblur="checkField(this.value);" />
</p>
<p>Comment:<br>
<textarea name="post" cols="55" rows="5" id="post" onblur="checkField(this.value);"></textarea>
</p><p>
<input type="submit" name="Submit" value="Add Comment" />
</p>
</form>
</div>

So basically the onblur event handler in the input boxes checks the fields right away and notices the user to fill in some things. The action is null since I don't want to submit the form to a different webpage. Once the user click on the submit button the processForm ajax function takes over. And it processes the form in combination of a PHP function. Once everything is validated or looks cool it replaces the div ajax_content with some good news or bad news. Here's an example of my ajax form: http://www.shobujbangla.com/pages/contactus.html

[Wilhelmus]

See examples and javascript code at Ajax Toolbox.