0

我正在尝试让联系表格正常工作。页面末尾的 http://pagina.chalupakoseckerovne.sk/ 是联系表格。使用 jquary.validate 插件进行验证有效，但现在我不知道如何在提交后不刷新就留在页面上，并在提交按钮旁边显示短消息，如“谢谢”。这是我的验证脚本

$("#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。

4

1 回答 1

2

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

$('#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/

于 2012-12-06T19:04:46.650 回答