如何隐藏表单提交

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会丢失，因此在您的情况下，表单会变得可见。

因此，解决方案是在文档准备好块左右，如果消息DIV可见然后隐藏等形式的click外的检查：

$(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

必须有某种原因的形式ISN不会为你隐藏？有没有可能它可能像它不在那个页面上一样简单？或者有JavaScript错误停止工作的所有代码？你有没有尝试在控制台中运行$（）以确保jQuery正在运行？只是基本的东西，但解决基本问题更容易。

Answer 3

试试这个

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

Answer 4

这是形式的一个最常见面临的问题提交。

更好的方法是使用提交表单数据作为ajax与按钮类型完全删除页面重新加载或单个页面应用程序的情况下刷新问题。

所以，你可以做什么的潜在变化，

1. 更改按钮类型从提交按钮。

   <input id="query" type="button" class="form-button"> 
   

2. 此按钮，其点击添加点击事件发送一个Ajax

   $("button#query").click(function(){ 
   
        // retrieve your form data 
        var formData = $('form').serialize(); 
   
        // prepare and send ajax 
       $.ajax 
       ({ 
        type: "POST", 
        url: your_url, 
        //more setting to go here 
        success: function(html) 
        { 
         // hide your form here 
         $('form').hide(); 
        } 
       }); 
   }); 
   }