How to submit email in autoresponder form without page reloading?

[345dfg]

Hi guys,

 

I have an autoresponder form on my website and I would like to use AJAX so that the page doesn't refresh when the visitor submits his email address.

 

Instead, I would like a message to appear where the form used to be. The form itself would need to disappear after submission, since it did it's part (*Not* show a thank-you message while still leaving the form there).

 

I must have been searching for 4 hours online now and don't seem to be able to find a simple solution for this.

 

Could somebody perhaps point me in the right direction - or maybe to a newbie-friendly tutorial I have missed?

 

I already have the autoresponder code, of course - which includes form validation with javascript. I just don't know how to make the AJAX aspect of it work.

 

I would appreciate any help with this.

 

Thanks in advance,

 

George

[CONFUSIONUK]

You could maybe use this piece I made up the other day?

 

Hope it helps 

 

$(function() {
    $("#form_submit").click(function() {		
        $.ajax({
            type: "POST",
            url: "your_php_script.php",
            data: $("#form").serialize(),
            success: function(){
            $('#form').html("<div id='message'>Success!</div>") //this part replaces the contents of "#form" with either a success DIV or you could just display "" 
        }
    });
    return false;
});
});

[345dfg]

Thanks, I appreciate it.

 

I'm not really experienced with this type of stuff.

 

Where do I put this code? And is that all?

 

Do I have to also enclose it within <script type="text/javascript"></script> and put it in the head tag?

 

Is "#form" the name of the form?

 

Thanks again for taking the time to reply.

 

George

 

[CONFUSIONUK]

yes and yes, sorry I didn't explain it a bit more. You can put that either in the script tags or include through an external .js file, either way will work just as well and yes you can change the ID tag "#form" to what ever the form is called.

 

If you get stuck any more just post the code you got so far and I'll quickly implement it for you, good luck

[345dfg]

Thanks for being so patient.

 

The actual name of my form is "signup", so I replaced all instances of "form" in the code you provided with "signup."

 

I tried but my form just worked as normally (it redirected the entire page to the thank-you page).

 

Here's the original form code (includes some javascript for validation):

 

<script language="JavaScript" type="text/javascript">
function checkSub(){
if (document.signup.email.value.indexOf('@', 0) == -1) {
alert("Please fill in your valid Email address.\nYour email should be in the following format: email@address.com")
document.signup.email.focus()
return false}
}</script>

<form action="http://someautoresponderservice/optin.php" method="post" name="signup" id="signup" onSubmit="return checkSub()">
<input type="hidden" name="action" value="addlead" />
<input type="hidden" name="member" value="1234" />
<input type="hidden" name="auto" value="3456" />
<input type="hidden" name="thankyou" value="http://www.mysite.com/thanks" />
<input type="hidden" name="resubsetting" value="Y" />
<input type="hidden" name="resubredirect" value="" />
<input type="hidden" name="invalid_redirect" value="" />
<input type="hidden" name="fname" value="Friend" />
<input type="text" name="email" class="input">
<input type="submit" value="Cound Me In!" />
</form>

 

Note that I have to use the code above as is - it was created by the autoresponder service I use.

 

Not sure if the form code as well as your code should be "merged" in any way (probably a dumb thing to say).

 

Thanks again - I appreciate your help :-)

 

George

[gamblor01]

There are a few things you need to change.  Not only do you need to change the name of the form from #form to submit, but you also need to invoke the AJAX code.  He's using JQuery -- essentially a Javascript framework -- which (I don't think) is as straightforward as Javascript, but it's incredibly powerful with very little code.  The basic idea behind AJAX is quite simple:

 

- You create an XmlHttpRequest object

- You submit the HTTP request via GET or POST

- The server performs some processing and returns the result to the client

- Your client does something with that response, which is generally to update the content of the page with information in the response

 

 

In order for this to work however -- I think you need to do all of this through javascript.  I think the reason that your page is redirecting is because you have defined the action of the form to redirect to "someautoresponderservice".  Instead, what you need to do is get rid of that action there, and then update your function called by onSubmit to handle everything for you.  The only bummer is that you will need to pass all of the values of the form as arguments which is a bit of a pain.  It would look something like this:

 

<form name="signup" id="signup" onSubmit="return checkSub(this.signup.action, this.signup.member, this.signup.auto, ..., this.signup.email)">

 

I can provide code if you want, but I think there is probably a better way to do this.  Anyone else care to comment?