AJAX Contact Form Issue

Question

I created a contact form for my sidebar that is working perfectly in Chrome but not in IE or FF.

I've been staring at it for hours and can't find out what I did wrong.

I'm not getting any errors anywhere, but when I submit it in FF or IE, it logs "nope" in my console and echos out a message of -1 in #jvmsg.

My html is:

<li id="jvcontactwidget-3" class="widget widget_contact">
  <div class="title"><h2>Test</h2></div>
  <form id="jvcontact" name="widget_contact" action="" method="post">
    <label class="required" for="email">Email Address (required)</label>
    <input class="required" type="email" name="email">
    <label class="required" for="firstName">First Name (required)</label>
    <input class="required" type="text" name="firstName">
    <label class="required" for="lastName">Last Name (required)</label>
    <input class="required" type="text" name="lastName">
    <label for="question">Any questions for us?</label>
    <textarea rows="5" name="question"></textarea>
    <input type="submit" value="Send it" style="display: inline-block; ">
</form>
<div class="jvloading" style="display: none; "></div>
<div id="jvsuccess" style="display: none;" >Thanks for the email</div>
<div id="jvmsg" style="display: none; "></div>
</li>

My js file is like this:

jQuery(document).ready(function($) {
jQuery('#jvcontact').submit(function() {
    jQuery('.widget_contact input[type="submit"]').hide();
    jQuery('.jvloading').show();
    var str = jQuery(this).serialize();
    jQuery.ajax({
        type: 'POST',
        url: '/wp-admin/admin-ajax.php',
        data: 'action=contact_form&'+str,
        success: function(msg) {
            //jQuery('#jvmsg').ajaxComplete(function(event, request, settings){
                if(msg === 'sent') {
                    console.log('sent');
                    jQuery('#jvmsg').hide();
                    jQuery('.jvloading').slideUp();
                    jQuery('.widget_contact input[type="submit"]').slideUp();
                    jQuery('#jvcontact').slideUp();
                    jQuery('#jvsuccess').fadeIn('slow');
                }
                else {
                    console.log('nope');
                    jQuery('#jvmsg').html(msg);
                    jQuery('.jvloading').hide();
                    jQuery('.widget_contact input[type="submit"]').show();
                    jQuery('#jvmsg').fadeIn('slow');
                }
            //});
        }
    });
    return false;
});

});

My php file:

function ajax_contact() {
if(!empty($_POST)) {

  $error = "";

  //Check to make sure sure that a valid email address is submitted
  if(trim($_POST['email']) == '')  {
    $error .= "An email address is required<br/>";
  } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
    $error .= "A valid email address is required<br/>";
  } else {
    $email = trim($_POST['email']);
  }

  //Check to make sure that the first name field is not empty
  if(trim($_POST['firstName']) == '') {
    $error .= "Your first name is required<br/>";
  } else {
    $firstName = trim($_POST['firstName']);
  }

  //Check to make sure that the last name field is not empty
  if(trim($_POST['lastName']) == '') {
    $error .= "Your last name is required<br/>";
  } else {
    $lastName = trim($_POST['lastName']);
  }

  if(trim($_POST['question']) == '') {
    $question = "They had no questions at this time";
  } else {
    $question = $_POST['question'];
  }

  $admin_mail = get_bloginfo('admin_email');


if(empty($error)) {

  $message  = "Someone wants to get in touch with you. \n\n
               Name: " . $firstName . " " . $lastName . "\n
               Email: " . $email . "\n
               Question: " . $question . "\n";

  $jvMail = wp_mail($admin_mail, 'Contact from your website', $message);
  echo "sent";

} else {
  echo $error;
}
die();
}
}

add_action('wp_ajax_contact_form', 'ajax_contact');

Thanks for the help!

Answer 1

are you logged-in with all browsers? since

add_action('wp_ajax_contact_form', 'ajax_contact');

only works for logged in users, so to fix it you need to change it:

add_action('wp_ajax_nopriv_contact_form', 'ajax_contact');

if you want your function to work for visitors as well as users.