Wenn die Einreichung erfolgreich ist, wie kann ich das Div verschwinden lassen?

Question

Wenn das Formular abgeschickt wird und erfolgreich ist es zeigt eine Warnung sagen eher: „Es war ein Erfolg“, als dass ich die div möchte nur verschwinden ..

JQuery

$(document).ready(function() { 
     $(":submit").click(function() { 

      var name= $('#name').val(); 
      var email= $('#email').val(); 

      var varData= 'name=' + name + '&email' + email; 
      console.log(varData); 

      $.ajax({ 
       type: "POST", 
       url: "form.php", 
       data: varData, 
       success: function() { 
        // needs changing 
        alert("It was success"); 
       } 
      }) 

     }); 
    }); 

HTML

<div id="container.form"> 
       <hr> 
       <label for="name">Name</label> 
       <br> 
       <input type="text" name="name" id="name" class="NewsLetter1" /> 
       <br> 
       <label for="email">Email</label> 
       <br> 
       <input type="text" name="email" id="email" class="NewsLetter2" /> 
       <input type="submit" value="Submit"> 
       <hr> 
</div> 

PHP

<?php  
$name = $_POST['name']; 
$email = $_POST['email'];  
mail($email, $name, "Thank you")  
?> 

Answer 1

Sie ersetzen konnte diese dies:

success: function() { 
    // needs changing 
    alert("It was success"); 
} 

mit diesem:

success: function() {  
    $('#container\\.form').hide(); 
} 

Answer 2

Es gibt ein paar Probleme hier.

Zuerst sollten Sie das Ereignis submit() des übergeordneten form haken und es mit event.preventDefault() abbrechen. Ihr aktueller Code wird die AJAX-Anfrage ignorieren und das Formular in der üblichen Weise übermitteln.

Zweitens ist Ihre Querystring nicht richtig formatiert - Sie vermissen eine =. Es ist besser, ein Objekt der data Eigenschaft von $.ajax teilweise aus diesem Grund bereitzustellen (um Tippfehler zu vermeiden) und auch, weil jQuery alle erforderlichen Zeichen für Sie codiert.

Um Ihr aktuelles Problem zu lösen, rufen Sie hide() oder fadeOut() auf die div Sie möchten ausblenden. Sie müssen die . in der id entkommen, andernfalls wird es als Klassenselektor interpretiert. Versuchen Sie folgendes:

<div id="container.form"> 
    <form method="post" action="form.php"> 
     <hr> 
     <label for="name">Name</label><br> 
     <input type="text" name="name" id="name" class="NewsLetter1" /><br> 
     <label for="email">Email</label><br> 
     <input type="text" name="email" id="email" class="NewsLetter2" /> 
     <input type="submit" value="Submit"> 
     <hr> 
    </form> 
</div> 

$("form").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: this.method, 
     url: this.action, 
     data: { 
      name: $('#name').val(), 
      email: $('#email').val() 
     }, 
     success: function() { 
      $('#container\\.form').hide(); 
     } 
    }) 

}); 

Answer 3

1) Bessere < Form verwenden> Elemente und Event onSubmit verwenden. Das ist der wahre Weg.

$("#formid").submit(function() { 
    $.ajax({ 
     type: "POST", 
     url: "form.php", 
     data: $("#formid").serialize(), 
     success: function() { 
      // needs changing 
      alert("It was success"); 
     } 
    }) 
}) 

Answer 4

Da Sie einen Punkt in Ihrem id-Attribut haben, und Punkte sind für Klasse-Filterung verwendet wird, sollten Sie diesen Punkt entkommen:

success: function() { 
    $('#container\\.form').hide(); 
}