So verstecken Sie das Formular beim Senden

Question

Ich versuche, mein Formular zu verstecken, sobald es eingereicht wurde, aber ich kann es einfach nicht funktionieren. Nur neugierig zu wissen, was ich vermisse. Das Formular übermittelt alle Details gut. Ich habe den folgenden jquery Code hinzugefügt, aber es scheint nicht zu funktionieren.

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-Skript

<?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

Wie in einem Postback Vorlage Ursache Form. Es lädt die aktuelle Seite neu und alle Änderungen passieren, wenn JavaScript verloren geht. In diesem Fall wird das Formular sichtbar.

So Lösung außerhalb der click im doc bereit Block über einen Scheck haben, wenn die Meldung div sichtbar ist dann das Formular verbergen wie:

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

es aus irgendeinem Grunde die Form isn sein muss Versteck dich nicht? Ist es möglich, dass es so einfach sein könnte wie es nicht auf dieser Seite ist? Oder gibt es einen JavaScript-Fehler, der den gesamten Code daran hindert, zu funktionieren? Haben Sie versucht, $() in der Konsole auszuführen, um sicherzustellen, dass jQuery ausgeführt wird? Nur grundlegende Dinge, aber es ist einfacher, die grundlegenden Probleme zu beheben.

Answer 3

versuchen diese

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

Answer 4

Dies ist ein am meisten konfrontiert häufiges Problem von Formular ist.

Besserer Ansatz wäre, senden Sie Formulardaten als Ajax mit Button-Typ, die die Seite neu laden oder aktualisieren Probleme im Falle der einzelnen Seite Anwendungen entfernt.

Also, was mögliche Änderungen, die Sie tun könnten,

1. ändern Knopf zur Absenden-Button.

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

2. ein Click-Ereignis auf diese Schaltfläche Hinzufügen und auf dessen Klick eine Ajax senden

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