web-dev-qa-db-fra.com

AJAX Formulaire de contact

J'ai créé un formulaire de contact pour ma barre latérale qui fonctionne parfaitement dans Chrome, mais pas dans IE ou FF.

Je la regarde depuis des heures et je ne peux pas savoir ce que j'ai fait de travers.

Je ne reçois aucune erreur, mais lorsque je le soumets au format FF ou IE, il enregistre "non" dans ma console et renvoie un message -1 dans #jvmsg.

Mon html est:

<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>

Mon fichier js est comme ça:

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;
});

});

Mon fichier php:

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');

Merci pour l'aide!

widgetsjqueryjavascriptajaxcontact
1
joshvermaire

êtes-vous connecté avec tous les navigateurs? puisque

add_action('wp_ajax_contact_form', 'ajax_contact');

ne fonctionne que pour les utilisateurs connectés. Pour le corriger, vous devez le changer:

add_action('wp_ajax_nopriv_contact_form', 'ajax_contact');

si vous souhaitez que votre fonction fonctionne aussi bien pour les visiteurs que pour les utilisateurs.

3
Bainternet