• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Ajax form submit to php script

Question

smash505    0

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!

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
roosevelt    22

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

Share this post


Link to post
Share on other sites
  • 0
Wilhelmus    12

See examples and javascript code at Ajax Toolbox.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.