なぜ私のフォームはajax投稿の後に投稿されますか？これをどうやって解決するのですか？

Question

だから私はこのフォームがあります。

<form method="post" id="login-nav"> 
     <div class="form-group"> 
       <label class="sr-only" for="exampleInputEmail2">Email address</label> 
       <input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
     </div> 
     <div class="form-group"> 
       <label class="sr-only" for="exampleInputPassword2">Password</label> 
       <input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
       <div class="help-block text-right"><a href="">Zaboravili ste password?</a></div> 
     </div> 
     <button id="submitit" onclick="GetUser();" class="btn btn-primary btn-block">Sign in</button> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox"> keep me logged-in 
      </label> 
     </div> 
</form> 

を私はボタンで記号を押したときに、私はポストを送信し、私は私のHTMLは、簡単な秒間正しく更新し、ページをリロードしています。これは私が望むものではありません。私は、ページをリロードする必要はありませんが、私のajax呼び出しの後にそのままです。ここではJavaScript/jQueryのコードは次のとおりです。

function GetUser() { 
var email = $("#email").val(); 
var password = $("#PassWord").val(); 

$.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){ 
    $('#LogNav').html(data); 
}); 
} 

Answer 1

送信ボタンのデフォルトの動作は、あなたが持っているので、にそれを防ぐに、フォームを送信することです。

onclick="GetUser(event);" 

これは、イベントを関数コールバックに渡します。あなたが使用する必要があなたの関数Insde：

function GetUser(e) { 
    e.preventDefault(); 

---

私は、フォームsubmitイベントへのボタンからイベントを変更するには、あなたをお勧めします：

$("#login-nav").on("submit", function(e) { 
    var email = $("#email").val(); 
    var password = $("#PassWord").val(); 

    $.post('../phpdatabase/getlogin.php',{ email: email , password : password }, function(data){ 
     $('#LogNav').html(data); 
    }); 

    e.preventDefault(); 
}); 

はあなたにインラインイベントを使用しないでください例えばHTML要素onclick,onfocusなど

Answer 2

<button type="button"></button>のボタンのタイプを追加します。フォームタグの下にある場合、デフォルトではボタンタイプの送信と見なされるためです。

<form method="post" id="login-nav"> 
    <div class="form-group"> 
      <label class="sr-only" for="exampleInputEmail2">Email address</label> 
      <input type="email" id="email" name="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
    </div> 
    <div class="form-group"> 
      <label class="sr-only" for="exampleInputPassword2">Password</label> 
      <input type="password" id="PassWord" name="PassWord" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
      <div class="help-block text-right"><a href="">Zaboravili ste password?</a></div> 
    </div> 
    <button type="button" id="submitit" onclick="GetUser(e);" class="btn btn-primary btn-block">Sign in</button> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox"> keep me logged-in 
     </label> 
    </div> 
</form> 

また、イベントを関数に渡して、JavaScript関数でイベントを渡すことで、イベントを受け止めることもできます。この

function GetUser(e) { 
    e.preventDefault();