提出が成功した場合どのようにして部門を消滅させるのですか？

Question

フォームを送信し、成功している場合、それは私がdiv要素がちょうど消えるしたいというよりも、「それは成功だった」という警告が表示されます。..

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

あなただけ置き換えることができますこの：これにより

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

：

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

Answer 2

問題のカップルがここにあります。

まず、formのsubmit()イベントに接続し、event.preventDefault()を使用してキャンセルする必要があります。あなたの現在のコードは、AJAXリクエストを無視し、標準的な方法でフォームを送信します。

第2に、クエリ文字列が正しくフォーマットされていない - =がありません。この理由のために$.ajaxのdataプロパティにオブジェクトを指定する方が良い理由があります（タイプミスを避けるため）また、jQueryが必要な文字をエンコードするためです。

実際の問題を解決するには、非表示にしたいdivのhide()または​​に電話してください。 idの.からエスケープする必要があります。そうしないと、クラスセレクタとして解釈されます。

<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）<フォーム>要素を使用して、イベントをonSubmitを使用することをお勧めし：これを試してみてください。それは本当の意味です。

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

Answer 4

あなたのid属性のドットを持っている、とドットがクラスのフィルタリングに使用されているので、あなたはその点をエスケープする必要があります

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