如何隱藏表單提交

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(); 
        } 
       }); 
   }); 
   }