Jump to content


Form submit and AJAX


4 replies to this topic

#1 Marxx

    Young Padawan

  • Members
  • Pip
  • 116 posts
  • Gender:Male
  • Location:Finland

Posted 20 November 2007 - 07:25 AM

I don't know.. I have looking for ages for simple method to submit forms via AJAX and not have found single one. Maybe I'm just blind or my brains are refusing to work whit my will... anyhow, that's why I'm now going to ask some help from here.

I know, i know - use google search etc.. Belive me, I have!

basics: Prototype is maybe the best tools on earth? Ok, i call it in my head.

<script language="JavaScript" type="text/javascript" src="./js/prototype.js"></script>

the I add my form:

<form name="myform" action="doquery.php" method="post">
<input type="text" id="myname" name="myname" />
<input type="text" id="mylastname" name="mylastname" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>

I know littlebit how AJAX submit works so I create file (doquery.php) where is only query which will insert my new information into the database right?

What I'm looking for is that what I need to do that I can submit this via AJAX. No page reloads and showing information (lets say bottom of that form) that information is added into the database??
What if I have more that one form in same page? Form validation (ex. email validation and no empty fields)?



Thanks SOO much for all help! =)

Edited by Marxx, 20 November 2007 - 07:26 AM.


#2 dotbart

    Young Padawan

  • Members
  • Pip
  • 141 posts
  • Gender:Male
  • Location:Diepenbeek
  • Interests:Webdesign, Webdeveloppement, DJ, ...

Posted 20 November 2007 - 10:39 AM

<form onsubmit="return false;">
<input type="text" id="myname" name="myname" />
<input type="text" id="mylastname" name="mylastname" />
<input onclick="sendMyData();" type="submit" id="submit" name="submit" value="Submit" />
</form>

Make sure your form does not send data by returning false. Then give your submitbutton an 'onclick' handler'.
You want javascript to send the data, not HTML (or browser).
Now in your sendMyData() you can define AJAX request to send the data by POST to your PHP script (please refer to Prototype documentation for this matter)

#3 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 20 November 2007 - 01:00 PM

I don't know how prototype works (never cared to look at it), but i know it is technically best to use the onSubmit handler of the form to process the data, not the onClick of the submit button (although, 9 times out of 10 it will yield the same result, it's just sematics...).

If you know JS and AJAX well enough, you can just create a query string and append it to the url you are using in open() or pass it to send() (which would require a post operation), then you can do all the error checking in the php file, and output the result. From there, simply use responseText to update a div with what ever is returned.

#4 shameless_w_o_a_d

    Young Padawan

  • Members
  • Pip
  • 42 posts
  • Gender:Male
  • Location:New Zealand
  • Interests:Web Design, Graphics Design, Computers, Games, Music, Basketball

Posted 22 November 2007 - 10:53 AM

Hey, Marxx. :)

If you do decide to use Prototype for your purposes, I believe the best route for you to take is to use the Ajax.Request object if all you want to do is take the information and place it within a database. Of course, if you wish to send information back to the client, the Ajax.Request object can return the information and then what you do with that information is completely up to you by means of JavaScript.

http://www.prototype...pi/ajax/request

#5 Wildhoney

    Young Padawan

  • Members
  • Pip
  • 31 posts

Posted 05 December 2007 - 07:42 PM

http://www.prototype...pi/form/request





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users