Question

我试图让联系表格正常工作。页面末尾的http://pagina.chalupakoseckerovne.sk/是联系表单。使用jquary.validate插件进行验证工作，但现在我无法找到如何在提交后保持页面而不刷新并在提交按钮旁边显示短消息，例如＆＃34;谢谢＆＃34;。这是我的验证脚本

$("#contact-form").validate({
        rules: {
            name: {minlength: 4,required: true},
            email: {required: true,email: true},
            phone: {number: true,required: true},
            pocet: {range: [1, 10],required: true},
            odkedy: {required: true},
            dokedy: {required: true}
        },   
    });
    $('#contact-form').ajaxForm(function() { 
        $("#done").show("slow");
        $('#contact-form').resetForm();
    }); 
    return false;

这是我的php：

<?php 
$ToEmail = 'sample@email.com'; 
$EmailSubject = 'Chalupa-rezervacia'; 
$mailheader = "Content-type: text/html; charset=windows-1250"; 
$MESSAGE_BODY = 'Meno: '.$_REQUEST["name"].'<br />
                Email: '.$_REQUEST["email"].'<br />
                Tel. cislo: '.$_REQUEST["phone"].'<br />
                Pocet: '.$_REQUEST["pocet"].'<br />
                Prichod: '.$_REQUEST["odkedy"].'<br />
                Odchod: '.$_REQUEST["dokedy"].'<br />
                Poznamka: '.$_REQUEST["comments"].'<br />'; 
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader);
?>

形式

<form name="contact-form" id="contact-form" action="rezervacia.php" method="post">

*编辑：*现在在Chrome，FF和Opera中运行良好，但在IE中没有。在IE中只是重定向到PHP。

Answer 1

您需要为验证功能添加一个带有ajax post函数的提交处理程序。这样的事情应该这样做：

$('#contact-form').validate({
   rules: {
      name: {minlength: 4,required: true},
      email: {required: true,email: true},
      phone: {number: true,required: true},
      pocet: {range: [1, 10],required: true},
      odkedy: {required: true},
      dokedy: {required: true}
   },
   submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // post the form data with ajax

      $.ajax({
          url: 'process.php',
          type: 'POST',
          data: form.serialize(),         
          success: function(data) {
              // Show any returned message
              alert('Load was performed: ' + data);
          }
      });

      // Prevent form submission
      return false;
   }
});

请在此处查看jquery.validate插件文档：http://docs.jquery.com/Plugins/Validation 还有jQuery ajax文档：http://api.jquery.com/jQuery.ajax/

---编辑---

根据下面的Ryleys评论，我已将return false;添加到submitHandler，这将阻止表单提交。以下是速记$.post函数的示例，您可以将其用作$.ajax函数的替代函数：

$.post('process.php', form.serialize(), function(data) {
    // Show any returned message
    alert('Load was performed: ' + data);
});

请在此处查看jQuery $ .post文档：http://api.jquery.com/jQuery.post/

提交表单没有刷新 - jQuery，ajax - IE无法正常工作

1 个答案: