AJAX Contact Form do this on ERROR and that on SUCCESS

[Doc]

Hello, first i'd like to say thank you for this nice little script! It's exactly what i've been looking for. I have a small problem though that i'm not able to resolve. Would it be possible to have either the input fields cleared automatically after the email has been sent or just disable the submit button after a successful submit?

I've managed to disable the button after the first click but if not all of the fields are correctly filled in and the end-user receives an error message they would have to refresh the page and try again.

I ask because I found that an individual could keep hitting the submit button and it'll keep sending the email over and over again. I appreciate your thoughts.

[roScripts]

Hi Doc, what you want has been asked before and it's about time to make a sticky. I'll make it like a small tutorial for everyone to understand.

In order for our script to know when it's dealing with an error or success message we will have to modify the javascript code from index.php and make it evaluate the response that is sent back by send.php which will be also a little modified. The responses will now contain a message for our script and a message for the visitor, both of them at the same time. We will split them by a character that we want (I've used the pipe '|') as follows:

If it's an error:
error|you forgot to do this.....bla bla...the error

If it's an ok message:
ok|message sent

The javascript will take this message, explode it by '|' (the character that we chosed) and evaluate the first reponse from our array which in arrays has the index of 0. If the first element of our array (the status) comes back as 'ok', we can add a code that we want in order to disable the form, redirect or whatever. I've just added an if and else statement. You can play and configure your script to output all kinds of messages for different situations.

JAVASCRIPT

onComplete: function(response) {
        update = response.split('|');
        if(update[0]=="ok"){
                log.removeClass('ajax-loading');
                log.setHTML(update[1]);//OR
                //do whatever you like here, the message was sent, disable forms, redirect etc.
        }
        else {
                log.removeClass('ajax-loading');
                log.setHTML(update[1]);
        }
}

Parsed in 0.022 seconds

Here's how the php code will look in this situation.

PHP

if ( $_POST['first_name'] != '' && $_POST['last_name'] != '' && valid_email ( $_POST['e_mail'] ) == TRUE && strlen ( $_POST['message'] ) > 30 )
    {
        $to = '';
        $headers =     'From: '.$_POST['e_mail'].''. "\r\n" .
                'Reply-To: '.$_POST['e_mail'].'' . "\r\n" .
                'X-Mailer: PHP/' . phpversion();
        $subject = "Hello! I'm testing my new ajax email that I got from roscripts.com";
        $message = htmlspecialchars($_POST['message']);

        if ( mail ( $to, $subject, $message, $headers ) )
        {//we show the good guy only in one case and the bad one for the rest.
            echo 'ok|Thank you '.$_POST['first_name'].'. Your message was sent';
        }
        else {
            echo 'ok|Message not sent. Please make sure you\'re not
                running this on localhost and also that you
                are allowed to run mail() function from your webserver';
        }
    }
    else {
        echo 'error|Please make sure you filled all the required fields,
        that you entered a valid email and also that your message
        contains more then 30 characters.';
    }

Parsed in 0.083 seconds

[Doc]

Beautiful! I really appreciate you taking the time to set up and explain how this can be accomplished. I'm going to play with it this weekend and see what kind of damage I can do.

Thanks again!

[superbrain]

I got everything to work for this script and it works great but I am still having problems with creating a redirect.. Here is the script I have and it is still opening the page within the error div area.. How do I escape into the main function and redirect the entire page?

<script type="text/javascript">
window.addEvent('domready', function(){
$('registerForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function(response) {
update = response.split('|');
if(update[0]=="ok"){
log.removeClass('ajax-loading');
//log.setHTML(update[1]);//OR
document.window.location = "signup3.php";
} else {
log.removeClass('ajax-loading');
}
}
});
});
});

Any help would be appreciated.. I am sure it is an easy fix, I am just not seing it.

Thanks

[superbrain]

Should of waited a bit before I posted that last one.. I figured it out.

I didn't read the PHP addition for the ok and error section and that is where it was not working..

Thanks for the script.

[Neoszion]

Ok I am being a bit of a newbie, I cannot remove my button on form completion I tried adding the following in my javascript:

any help would most appriciated..

HTML4STRICT

<script type="text/javascript">
         window.addEvent('domready', function(){
             $('myForm').addEvent('submit', function(e) {
 
             new Event(e).stop();
             var log = $('log_res').empty().addClass('ajax-loading');
             this.send({
                 update: log,
                 onComplete: function(response) {
                     update = response.split('|');
                     if(update[0]=="ok"){
                             log.removeClass('ajax-loading');
                             //log.setHTML(update[1]);//OR
document.getElementById('submitter').disabled = true;
                     }
                     else {
                             log.removeClass('ajax-loading');
                             log.setHTML(update[1]);
                     }
             }
             });
             });       
         });
     </script>

Parsed in 0.016 seconds

[yesrightconnet]

excellent thread!!!

[Lihualee]

just my two centsbump

[Lihualee]

bump and lurk-------------------------------------------------------------wow power leveling..wow power leveling..Cheap WoW Gold..WoW Gold..World Of Warcraft gold,

[Huoliuhi]

just my two centsbump-----------------------------------------Wow Gold Store Welcome you! whether you are looking for Cheap WoW Gold,cheap wow power leveling,ffxi gil,eq2 plat or any other game currency or accounts, We provide Cheap WoW Gold , World of warcraft Power Leveling, Cheap WoW Gold..