Contact form using PHP and jQuery form plugin

Question

I'm using the jQuery Form plugin to submit AJAX requests. It's a simple contact from using this PHP script: http://pastie.org/725652 - the only validation happens inside the PHP.

Here's my Javascript code to trigger the whole thing:

$('#contactform').ajaxForm({
    target: '#error',
    beforeSubmit: function() {
        $('#error').append('<p class="loading">Sending your message...</p>');
    },
   success: function() {
       $('#error p.loading').fadeOut();
       $('#error').fadeIn('slow');
    }
});

Unfortunately, it doesn't seem to work. The PHP works perfectly, sends the email and returns the success message, but the AJAX magic isn't working for some reason. Obviously what I want to achieve, is to display the message returned by the PHP script via AJAX in the <div id="error />

I used the same script many times and never had any problems with it, now I can't figure out why it doesn't work. Here's the markup for the contact form.

<form id="contactform" class="group" method="post" action="submitemail.php">
    <fieldset>
        <div><label for="first-name">First Name</label>
        <input type="text" name="first-name" value="Jeremy" /></div>

        <div class="alt"><label for="last-name">Last Name</label>
        <input type="text" name="last-name" value="Anderson" /></div>

        <div><label for="email">E-mail <span>(never published)</span></label>
        <input type="text" name="email" value="[email protected]" /></div>

        <div class="alt"><label for="url">Website</label>
        <input type="text" name="url" value="http://www.mywebsite.com" /></div>

        <label for="question">Message</label>
        <textarea name="question" id="" cols="30" rows="10">Thinking of something to say...</textarea>

        <input type="submit" name="submit" id="submit" value="Send E-mail" />
        <div id="error"></div>
    </fieldset>
</form>

Here's the code of the jQuery plugin if it can be any help. http://pastie.org/726175

If anyone could look at the whole thing and provide some tips why would it not work, I would be very grateful, thanks in advance!

Answer 1

you must include the parameters in which are the response from PHP:

EDIT:

try with these changes, in this example I'm separating the message "loading" with the response message.

HTML:

<form id="contactform" class="group" method="post" action="submitemail.php">
    <fieldset>
        <!-- fields -->

        <input type="submit" name="submit" id="submit" value="Send E-mail" />
        <div id="error"><span id="eloading"></span><span id="eresponse"></span></div>
    </fieldset>
</form>

Javascript:

$('#contactform').ajaxForm({
    target: '#eresponse',
    beforeSubmit: function() {
     $('#eresponse').hide('slow');
     $("#eloading").append("<p class=\"loading\">Sending your message...</p>");
    },
    success: function(responseText, statusText) {

     alert("test status: " + statusText + "\n\nresponseText: \n" + responseText);
     $("#eloading").empty();
     $('#eresponse').show('slow');
    }
});

Answer 2

It didn't do the trick :( It still goes to the submitemail.php file with the success message instead of showing the message in #error. – Justine 39 mins ago

If this happens that means the function attached to the submit event didnt end with

return false;

i beleive with ajaxForm this is done automagically so that means there is an error in your code somewhere. If you dont have firebug installed, install it and keep an eye on the console make sure:

1. jquery is loading ok
2. there are no errrors setting up the ajax interaction or in any other js on the page that may stop it