Question

尝试让我的表单在提交后隐藏但我似乎无法让它工作。只是想知道我错过了什么。表格提交所有细节都很好。我添加了下面的jquery代码，但它仍然没有;似乎工作。

的jQuery

 $('.form-button').click(function () {
      $('.form').hide();
    });

HTML

 <div class="row">
                <div class="col-md-12">
                  <div class="form" id="lesson-signup-status">
                    <form method="post" action="mailer-lessons.php">
                      <select name="lesson-enquiry" id="lesson-enquiry">
                        <option value="" disabled selected>Select a lesson</option>
                        <option value="1 Hour Adult Lesson">1 Hour Adult Lesson</option>
                        <option value="1 Hour Joint Lesson">1 Hour Joint Lesson</option>
                        <option value="1 Hour Junior Lesson">1 Hour Junior Lesson</option>
                        <option value="Have A Go Lesson">Have A Go Lesson</option>
                        <option value="Other Enquiry">Other Enquiry</option>
                      </select>
                      <input type="text" name="name" id="name" placeholder="Name" required>
                      <input type="email" name="email" id="email" placeholder="Email" required>
                      <input type="text" name="telephone" id="telephone" placeholder="Contact Number" required>
                      <textarea name="message" id="message" placeholder="Your Message" required style="min-height:50px;"></textarea>
                      <input type="submit" class="form-button">
                    </form>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1">
                    <?php
            if($_GET['success'] == 1) {
              echo "<div class=\"form-messages success\">Your lesson enquiry has been sent! Thanks for enquiring.</div>";
            }
            if($_GET['success'] == -1) {
              echo "<div class=\"form-messages error\">Oops! Something went wrong there, please try again.</div>";
            }
          ?>
                  </div>
                </div>
              </div>

php脚本

<?php

     // Get the form fields, removes html tags and whitespace.
    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $telephone = strip_tags(trim($_POST["telephone"]));
    $lesson_enquiry = strip_tags(trim($_POST["lesson-enquiry"]));
    $message = strip_tags(trim($_POST["message"]));

    // Check the data.
    if (empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        header("Location: lessons.php?success=-1#lesson-signup-status");
        exit;
    }

    // Set the recipient email address. Update this to YOUR desired email address.
    $recipient = "email_address";

    // Set the email subject.
    $subject = "$lesson_enquiry enquiry";



    // Build the email content.
    $email_content = "Lesson Type: $lesson_enquiry \n\n";    
    $email_content .= "Name: $name\n\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Contact Number: $telephone\n\n";
    $email_content .= "Message: $message\n\n";



    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    mail($recipient, $subject, $email_content, $email_headers);

    // Redirect to the index.html page with success code
    header("Location: lessons.php?success=1#lesson-signup-status");

?>

Answer 1

作为回发中的表单提交原因。它会重新加载当前页面，所有更改都会在javascript丢失的情况下发生，因此在您的情况下表单可见。

因此，解决方案是在doc ready块中的click之外检查消息div是否可见，然后隐藏表单，如：

$(document).ready(function(){

    // here you have to check: 

    if($('.form-messages.success').is(':visible')){ // if success message is visible. 
      // add this with or condition if it is also required $('.form-messages.error').is(':visible')
      $('.form').hide(); // <-----hide it here 
    }

    $('.form-button').click(function () {
      $('.form').hide();
    });

});

Answer 2

试试这个

 <form onsubmit="myFunction()">
    Enter name: <input type="text">
     <input type="submit">
</form>
<script>
    function myFunction() {
       $('#formid').hide();
    }
</script>

如何在提交时隐藏表单

2 个答案: