[RESOLVED] Submit form (via AJAX)

dougal85

I'm wondering if somebody could help me out with the basics or a simple example to get me started with something.

I have a form that you fill out, its going to be a feeback form (and its going to email the inputed data to the website owner)

Anyway, When you click submit on the form I want ti send this information using AJAX rather than a full page refresh.

I've been looking at librarys and some AJAx examples but most of them are really confusing me. So any pointers for this simple (i hope) example would be great.

Thanks!

etully

<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">

//  You don't need to change anything in this function:

function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            updatepage(self.xmlHttpReq.responseText);
        }
    }
    self.xmlHttpReq.send(getquerystring());
}

//   The following function obtains two variables from your form (email and message) 
//   and builds a string that gets sent to your PHP script.  Change this function to
//   obtain whatever fields you want from your form.

function getquerystring() {
    var form     = document.forms['form1'];
    var email = form.email.value;
    var message = form.message.value;
    qstr = 'email=' + escape(email) + '&message=' + escape(message); 
    return qstr;
}

function updatepage(str){
    document.getElementById("result").innerHTML = str;
}
</script>
</head>

<table border=1 width=100%>
	<tr>
		<td>
			<form name="form1">
			<p>Your Email Address: <input name="email" type="text"><p>
			Your Message:<br>
			<textarea name="message" rows=10 cols=80></textarea>			
			<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("ajax-send-email.php")'></p>
		</td>
		<td><div id="result"></div></td>
	</tr>
	</form>
</table>
</body>
</html>

That form posts to this PHP script. It must be called ajax-send-email.php in this example.

<?php
mail("put@your_email_here.com","This is the subject line","","From:$email\nReply-To:$email\n\n
$email
sent you this message:
$message
");
?>
We have received your email.  Thanks

The first block of code is the form, No libraries are necessary - it contains all the code necessary.

dougal85

Wow... Awesome. Thanks.

I'm gonna give this a shot straight away!

abda53

thank you!!!!

Kudose

<?php
// don't forget that register_globals(on) is bad
$email = $_POST['email'];
$message = $_POST['message'];

mail("put@your_email_here.com","This is the subject line","$email
sent you this message:
$message","From:$email\nReply-To:$email\n\n");
?>
We have received your email.  Thanks

bruce2005

I also thank you for the above, it works perfectly.
I tried adding more fields, got name added but can't get it to include that in the email.

Where does one add another field?

Thanks

etully

Read the script carefully to see what is happening.

When you click submit on the button in the form, it runs the xmlhttpPost method in the javascript. That method refers to the getquerystring method which is responsible for reading the fields out of your form. If you add fields to your form, the getquerystring method needs to be told that it should read them from the form too.

Then everything is posted to your PHP script which emails you the data. If that email script is supposed to pass on some variables, then that needs to be modified too.

Kudose: Your point is well taken. And he's right kids, Just Say No to register globals. Since this was a question about how to make Ajax work, I skipped the part about that unrelated topic to reduce the complexity of the script. A programmer using Ajax should understand how to access the variables posted to a script.

bruce2005

Well, I spent three hours on it and tried everything.
I understand that a programmer "should" understand. My apologies, I thought this was a help form. I shall not return as obviously it isn't.

I never claimed to be a programmer and while I don't expect everyone to do everything for me, its common to be able to ask for help when one has tried their best. Again, obviously that doesn;t apply here.

So I'll simply go elsewhere and continue learning until I become proficient myself, and when that day comes I will hopefully be more accomodating to those honestly trying their best to learn.

But I certainly will not return here nor recommend it.

etully

Whoa there Bruce. Cool down a second.

First off, text based forums leave out a lot the normal clues that we humans look for to understand what the other person means. My sincere apologies if you thought I was insulting you - I was not.

Second off, let me explain what happened. Please take a look at my post above (#7). First I did my best to answer your question, THEN I responded to Kudose's post above (#5). See, Kudose was correcting me on my failure to deal with register globals correctly - but really, register globals have nothing to do with Ajax so he was just complicating the discussion.

My response to Kudose was essentially: "Yeah Kudose, I know. I didn't deal with Register Globals correctly... but this wasn't really a register globals question... this was an Ajax question."

If you (or anyone else) wants to know how to handle register globals, there's tons of information about them on the web AND in this forum. But this particular Thread was about Ajax and didn't need to be confused with a discussion about register globals - I was telling Kudose why I didn't bother to address register globals correctly.

My comment might be the same as a mechanic talking about cars. "Yeah, I know you shouldn't ride the clutch... but anyone asking about installing a new transmission in a car doesn't need to be told not to ride the clutch." He's not insulting people who don't know that you shouldn't ride the clutch.

So, I'm willing to start from scratch. I'm sorry for any confusion that led to hurt feelings. If you want to show me your code, I'll be happy to help you get it working.

Kudose

My bad.

mohawk411

Hi etully, I really liked this article, its was brill!!

I'd like to see if you can aid me, I have an contact form with an action that moves it to the next page (action="otherpage.php") I would like to submit my form to an email address on the current page (contact.php) and make it submit fully before loading the next page (otherpage.php)

I have a loader gif which activates when the submit button is pressed to allow time for the form to submit before changing to (otherpage.php) at a later stage of development an xml quote will perform an action and when the page finally moves to (otherpage.php) the xml query will show results and the email was sent from the previous page

Every form submition i try moves to the next page automaticly without waiting to send the email from its (contact.php) page

any help would be great........

If i can post anything that can aid my help i will do so,

thanks

etully

What you are trying to do CAN be done... but there's no reason to do it that way. Never use a client side technology when you can accomplish the same thing with a server side technology. It's cleaner, faster, and more stable.

So what you want is to hit the submit button, and then contact.php is executed, and then otherpage.php is executed. All you need to do it put this at the end of contact.php:

include("otherpage.php");

If you really want to do it with Ajax, you'll need to write a Javascript function and disable the action on the form. The JS function should use Ajax to post the contents to contact.php and then enable the action on the form and then trigger the submit method for the form. It's possible... but there's just too much stuff that can break when you consider all the possible browsers out there... and it's so simple to do server side.

mohawk411

Will you have a look at this quote form, this is the 1 i am modeling my site on, we are going to do quotes has well http://www.123.ie/life/ when you click get quote the loader.gif appears and then switches to the next result page

Can you tell me how they are sending their mail from the form submition so quickly, the forms action has a (.cgi) file, so iam thinking its executed on the next page however they have 1 hidden form field thats making me think that they are sending the email from the same page has the form.??

My page with quotation form goes directly to the otherpage.php skipping the loader and then loads the results page like a snail,

I hope the page gives some clues, because i am really clueless lol 🙂

thanks

dougal85

It looks like its the onsubmit of the form is processing it with javascript

onSubmit="return CheckForm(); showhide('center');"

so the javascript displays the please wait and sends the form after checking it.