0

I have a contact form that I want to submit using ajax. It seems like send the data, but the only retrieved is 0.

HTML form:

<form method="post" action="http://www.codetocode-developments.com/ela/wp-admin/admin-ajax.php" name="contactform" id="contactform">
       <fieldset>
                            <label for="name" accesskey="U">
                <span class="required">*</span>Your Name</label>
                <input name="name" type="text" id="name" size="30" value="" />
                <br />
                                        <label for="email" accesskey="E">
                <span class="required">*</span>Email</label>
                <input name="email" type="text" id="email" size="30" value="" />
                <br />
                                        <label for="phone" accesskey="P">
                <span class="required">*</span>Phone</label>
                <input name="phone" type="text" id="phone" size="30" value="" />
                <br />
                   </fieldset>
       <fieldset>
          <label for="subject" accesskey="S">Subject</label>
          <select class="form-control" name="subject" id="subject">
             <option value="Support">Support</option>
             <option value="a Sale">Sales</option>
             <option value="a Bug fix">Report a bug</option>
          </select>
          <br />
          <label for="comments" accesskey="C">
          <span class="required">*</span>Your comments</label>
          <textarea name="comments" cols="40" rows="5" id="comments"></textarea>
          <button type="submit" class="btn btn-border btn-lg" style="border-color:#00aff0;color:#00aff0;" data-color="#00aff0" data-hover="#00aff0" id="submit" value="Submit" data-loader="http://www.codetocode-developments.com/ela/wp-content/themes/ela/assets/images/ajax-loader.gif">Send Message</button>
       </fieldset>
    </form>

JS code:

$('#contactform').submit(function(){

        var action = $(this).attr('action');

        $("#message").slideUp(750,function() {
        $('#message').hide();

        $('#submit')
            .after('<img src="assets/ajax-loader.gif" class="loader" />')
            .attr('disabled','disabled');

        $.post(action, {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            subject: $('#subject').val(),
            comments: $('#comments').val(),
            verify: $('#verify').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
                $('#submit').removeAttr('disabled');
                if(data.match('success') != null) $('#contactform').slideUp('slow');

            }
        );

        });

        return false;

    });

PHP:

add_action('wp_ajax_ajaxContacForm', 'ajaxContacForm');
add_action('wp_ajax_nopriv_ajaxContacForm', 'ajaxContacForm');

//Ajax contact form filter function
function ajaxContacForm() {

    if(!$_POST) exit;

    global $ela_opt;

    if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

    $name     = $_POST['name'];
    $email    = $_POST['email'];
    $phone   = $_POST['phone'];
    $subject  = $_POST['subject'];
    $comments = $_POST['comments'];


    if(trim($name) == '') {
        echo '<div class="alert alert-danger">Please enter your name.</div>';
        exit();
    } else if(trim($email) == '') {
        echo '<div class="alert alert-danger">Please enter a valid email address.</div>';
        exit();
    } else if(trim($phone) == '') {
        echo '<div class="alert alert-danger">Please enter a valid phone number.</div>';
        exit();
    } else if(!is_numeric($phone)) {
        echo '<div class="alert alert-danger">Phone number can only contain digits.</div>';
        exit();
    } else if(!isEmail($email)) {
        echo '<div class="alert alert-danger">You have enter an invalid e-mail address,please try again.</div>';
        exit();
    }

    if(trim($subject) == '') {
        echo '<div class="alert alert-danger">Please enter a subject.</div>';
        exit();
    } else if(trim($comments) == '') {
        echo '<div class="alert alert-danger">Please enter your message.</div>';
        exit();
    } 

    if(get_magic_quotes_gpc()) {
        $comments = stripslashes($comments);
    }


    // Configuration option.
    // Enter the email address that you want to emails to be sent to.
    // Example $address = "joe.doe@yourdomain.com";

    //$address = "example@themeforest.net";
    $address = $ela_opt['contact_email'];


    // Configuration option.
    // i.e. The standard subject will appear as, "You've been contacted by John Doe."

    // Example, $e_subject = '$name . ' has contacted you via Your Website.';

    $e_subject = 'You\'ve been contacted by ' . $name . '.';


    // Configuration option.
    // You can change this if you feel that you need to.
    // Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

    $e_body = "You have been contacted by $name with regards to $subject, their additional message is as follows." . PHP_EOL . PHP_EOL;
    $e_content = "\"$comments\"" . PHP_EOL . PHP_EOL;
    $e_reply = "You can contact $name via email, $email or via phone $phone";

    $msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

    $headers = "From: $email" . PHP_EOL;
    $headers .= "Reply-To: $email" . PHP_EOL;
    $headers .= "MIME-Version: 1.0" . PHP_EOL;
    $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
    $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

    if(mail($address, $e_subject, $msg, $headers)) {

        // Email has sent successfully, echo a success page.

        echo "<fieldset>";
        echo "<div class='alert alert-success'>";
        echo "<h3>Well done!</h3>";
        echo "<p>Thank you <strong>$name</strong>, your message has been submitted to us.</p>";
        echo "</div>";
        echo "</fieldset>";

    } else {

        echo 'ERROR!';

    }

    die();

}

I usually use chrome developers tools to find errors on html, js.. but this time I don't know how to find where is the error and all seems correct. Can somebody help me find the problem? Thanks in advance!

  • 1
    you don't pass an action, how does WordPress know what function should handle these requests? – Milo Jun 11 '14 at 17:46
  • @Milo as an answer please :) – Rarst Jun 11 '14 at 17:55
3

Your javascript is missing an action parameter with the data:

$.post(action, {
        name: $('#name').val(),
        email: $('#email').val(),
        phone: $('#phone').val(),
        subject: $('#subject').val(),
        comments: $('#comments').val(),
        verify: $('#verify').val(),
        action: 'ajaxContacForm' // <-- added action here
    },
    function(data){
        document.getElementById('message').innerHTML = data;
        $('#message').slideDown('slow');
        $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
        $('#submit').removeAttr('disabled');
        if(data.match('success') != null) $('#contactform').slideUp('slow');

    }
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.