Question

我有一个工作正常的表单，但在提交后重新加载页面。我希望它在表单下显示消息，而不是重新加载页面。

这是我的HTML代码：

  <form class=" form-horizontal" action="php/contact.php" method="post" id="contact_form" name="contact-form">
      <fieldset>

        <div class="form-group">

              <input name="firstname" placeholder="First Name" class="form-control" type="text">
              <input name="lastname" placeholder="Last Name" id="lastname"  class="form-control" type="text">
              <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
              <input type="text" name="mail"> <!-- anti spam - needs to stay non-filled - hidden by css -->
              <input name="phone" placeholder="(+44) 020 1234 5678" class="form-control" type="text">
              <input name="company" placeholder="Company name" class="form-control" type="text">
              <input name="website" placeholder="Website or domain name" class="form-control" type="text">
              <textarea class="form-control" name="message" placeholder="Your message"></textarea>

            <!-- Success message -->
            <div class="alert alert-success" role="alert" id="success_message">
              Thanks for contacting us, we will get back to you shortly.</div>
            <button type="submit" class="btn btn-block btn-primary">Send <span class="fa fa-fw fa-lg fa-send"></span> </button>

        </div>
      </fieldset>
    </form>

我也使用jquery验证脚本，这是对这个脚本的快速总结（我相信大部分更改都需要在这里完成）：

    $(function() {
      $("form[name='contact-form']").validate({

        rules: {

          firstname: "required",
          message: "required",
          email: {
            required: true,

            email: true
          },

        },

        messages: {
          firstname: " Please enter your firstname",
          email: " Please enter a valid email address",
          message: " Please type your message"        
        },

        submitHandler: function(form) {
          form.submit();
        }
      });
    });

这是一个php代码，在提交后重新加载页面：

    <?php

      $adresdo = "info@tucado.com";
      $temat = "Message from tucado.com";
      $zawartosc = "First Name: ".$_POST['firstname']."\n"
                   ."Last Name: ".$_POST['lastname']."\n"
                   ."Company: ".$_POST['company']."\n"
                   ."Email: ".$_POST['email']."\n"
                   ."Telephone: ".$_POST['phone']."\n"
                   ."Website: ".$_POST['website']."\n"      
                   ."Message: ".$_POST['message']."\n";

      if(!$_POST['firstname'] || !$_POST['email'] || !$_POST['message']){
         header("Location: ../contact.html");
         exit;
      }
      $email = $_POST['email'];
      if(mail($adresdo, $temat, $zawartosc, 'From: Contact <'.$email.'>')){
      header("Location: ../msg-sent.html"); 
      }
    ?>

您可以帮我修改此代码，以便在发送消息时显示消息（id =＆＃34; success_message＆＃34;）？谢谢你的帮助。

Answer 1

尝试ajax提交。将ajax代码放在提交处理程序中，使用serialise或formdata获取整个表单。参见示例。

submitHandler: function(form) {
    $.ajax({
        url: "name_of_file.php", 
        type: "POST",             
        data: new FormData($(form)),
        cache: false,             

        success: function(data) {

            $("#success_message").html(data);
        }
    });
    return false;
},

在php文件中回显所需的输出，以便在数据中进行检索。

提交表单而不重新加载页面

1 个答案: