2010-12-02 4 views
2

Sur l'une de mes pages, telle que this one, lorsque vous cliquez sur la colonne de gauche du bouton "Avoir une question", un formulaire s'affiche dans la superposition jQuery Tools. Vous remplissez le formulaire, il soumet à un script PHP (un local) et s'il valide et soumet vous obtenez un message de remerciement ou d'erreur selon ce que la réponse est du serveur. Fonctionne bien dans FF, Safari et Opera, mais pas dans IE ou Chrome. IE et Chrome vont simplement imprimer le message de retour que le .ajax recherche sur une page blanche avec l'URL du script. Je dois avoir quelque chose d'incorrect car même mon script inter-domaine cURL ajax fonctionne mais pas ça! Voici le codejQuery .ajax ne fonctionne pas dans IE et Chrome

$(document).click(function() { 
     $.validator.methods.equal = function(value, element, param) { 
     return value == param; 
    }; 
    var validator = $("#request").bind("invalid-form.validate", function() { 
      $("#summary").html("Your form contains " + validator.numberOfInvalids() + " error(s), please fix."); 
     }).validate({ 
      //debug: true, 
      errorElement: "em", 
      errorContainer: $("#summary"), 
      errorPlacement: function(error, element) { 
       error.appendTo(element.parent("li")); 
      }, 
      success: function(label) { 
       label.text("ok!").addClass("success"); 
      }, 
      submitHandler: function(form) { 
       $("#processing").show(); 
      var dataString = $(form).serialize(); 
       $.ajax({ 
       type: $("#request").attr('method'), 
       url: form.action, 
       data: dataString, 
       clearForm: true, 
       success: function(data) { 
        if (data=="SuccessMail Sent") { 
         $("#formWrap, #supportHdln").hide(); 
          $("#thankYou").html('<h2><span>Thank You</span> We have received your request.</h2><p>A Customer Service Representative from NinjaTrader will contact you shortly.</p>').fadeIn("slow"); 
         } else { 
          $("#formWrap, #supportHdln").hide(); 
          $("#error").html('<h2><span>Uh Oh</span> We are unable to process your request.</h2><p>Please make sure all fields were filled out correctly. If you are still having trouble, please <a href=\"mailto:[email protected]?subject=Support Email\">email us</a></p>').fadeIn("slow"); 
        } 
        } 
       }); 
      return false; 

      }, 
      rules: { 
        hs_customer_firstname: { 
        required: true, 
        minlength: 2 
       }, 
        hs_customer_lastname: { 
        required: true, 
        minlength: 2 
       }, 
        hs_customer_email: { 
        required: true, 
        email: true 
       }, 
        confirmEmail: { 
        required: true, 
        email: true, 
        equalTo: "#hs_customer_email" 
       }, 
        hs_customer_phone: { 
        required: false, 
        digits: true 
       }, 
        hs_category: { 
        required: true  
       }, 
        hs_customLargeTextField: { 
        required: true, 
        minlength: 20 
       }, 
        math: { 
        required: true, 
        equal: <?php echo $randomNumTotal; ?> 
       } 
      }, 

      messages: { 
       hs_customer_firstname: { 
        required: "Please Enter Your First Name", 
        minlength: "Your First Name Must be at Least 2 Characters" 
       }, 
       hs_customer_lastname: { 
        required: "Please Enter Your Last Name", 
        minlength: "Your Last Name Must be at Leaset 2 Characters" 
       }, 
       hs_customer_email: { 
        required: "Please enter your email address", 
        email: "Please enter a valid email address" 
       }, 
       confirmEmail: { 
        required: "Please Confirm Your Email Address", 
        email: "Please Enter a Valid Email Address", 
        equalTo: "Please Enter the Same Email Address as Above" 
       }, 
       hs_customer_phone: { 
        digits: "Numbers only" 
       }, 

       hs_category: { 
        required: "Please Select a Category" 
       }, 
       hs_customLargeTextField: { 
        required: "Please Leave a Comment", 
        minlength: "Your comment must be at least 20 characters" 
       }, 
       math: { 
        required: "Please Solve the Problem", 
        equal: "Please Solve the Problem Correctly" 
       } 
      } 
     }); 
    }); 

et voici le petit script PHP qui exécute

<?php 

if(empty($_POST['hs_customer_firstname']) || empty($_POST['hs_customer_lastname']) || 
empty($_POST['hs_customer_email']) || empty($_POST['hs_category']) || 
empty($_POST['hs_customLargeTextField']) || empty($_POST['math'])) { 
echo ('Success'); 
} 

$headers = 'From: [email protected]' . "\r\n" . 
     'Reply-To: [email protected]' . "\r\n" . 

$firstname = $_POST['hs_customer_firstname'] ; 
//more like this 

mail("[email protected]", "Support Request", 
//$_POST fields 
"From: $email"); 
if(mail($firstname, $lastname, $email, $category, $inquiry)) { 
echo ('Mail Sent'); 
} else { 
echo ('Error: Mail failed'); 
} 

?> 
+0

Vous consultez l'onglet Réseau dans la console pour voir votre demande? – methodin

+0

oui, et il affiche le message attendu! C'est ce qui craint. –

+0

@Dirty Bird Design: Assurez-vous d'annuler le comportement par défaut du formulaire avant de le soumettre via AJAX? J'ai vu un comportement bizarre quand j'oublie de faire event.preventDefault() (jQuery). Je ne peux pas dire si cela se produit b/c Je ne vois pas où vous reliez l'événement submit au formulaire. –

Répondre

0

Il avait à voir avec la validation de nombres aléatoires, IE et Chrome n'a pas aimé le dans le code js. Une fois que je me suis débarrassé de cela, et retiré la validation de la page de formulaire étant apporté avec la superposition, l'a ajouté à la page parente en tant que fichier JS distinct, il a travaillé. Je ne sais pas pourquoi le nombre total aléatoire ne fonctionne pas bien. Lorsque j'ai ajouté la fonction PHP à la page parente, cela n'a pas déclenché une erreur JS dans la validation, mais les chiffres n'ont pas été validés lorsque vous les avez ajoutés correctement. Eh bien, gagnez en perdre.

Questions connexes