なぜこのjavascript/jQueryはHTMLフォームを送信しないのですか？

Question

Javascript/jQueryを使用してHTMLベースのフォームを送信しようとしていますが、何も送信しないようです。

私のHTMLフォームは今です。

<form class="navbar-form navbar-right" role="form" id="loginForm" action="login.php"> 
    <div class="form-group"> 
     <input type="text" class="form-control" name="username" placeholder="Username"> 
    </div> 

    <div class="form-group"> 
     <input type="text" class="form-control" name="password" placeholder="Password"> 
    </div> 

    <button type="submit" class="btn btn-primary">Sign In</button> 
</form> 

私のJavascriptコードは現在です。

$(document).ready(function() { 
    $("#loginForm").submit(function(e) { 
     e.preventDefault(); 

     var $form = $(this); 
     var $url = $form.attr('action'); 
     var $username = $("#username"); 
     var $password = $("#password"); 

     if ($username.val().length > 0 && $password.val().length > 0) { 
      var $posting = $.post(
       $url, { 
        name: $username.val(), 
        password: $password.val() 
       } 
      ); 

      $posting.done(function(data) { 
       alert("Username: " + data.name + "\nPassword: " + data.password); 
      }); 
     } else { 
      alertify.warning("Username or password is empty!"); 
     } 
    }); 
}) 

Answer 1

あなたはこれらのセレクタがあります。

​​

をしかし、マークアップには、このような整合素子はありません。どちらの

if ($username.val().length > 0 && $password.val().length > 0) { 

（関連するHTML要素にid="username"とid="password"を追加することによって）セレクタに一致するようにマークアップを変更したり、マークアップを一致させるセレクタを変更します：だから、この条件は常にfalseなります

var $username = $("input[name=username]"); 
var $password = $("input[name=password]"); 

pointed out in a comment belowとして

または、より良い、submitハンドラがすでに$(this)の方法により、フォームへの参照を持っているので、あなたはその上で検索することができます。

を10

var $username = $form.find("input[name=username]"); 
var $password = $form.find("input[name=password]"); 

これはnameは（非常に頻繁formでユニークですが）DOMでユニークである必要はありませんことを考えると特に便利です。あなたが見ることができるようにあなたが名前上を使用している場合、あなたは、名前代わりにIDの使用

<input type="text" class="form-control" name="username" placeholder="Username"> 
<input type="text" class="form-control" name="password" placeholder="Password"> 

：

Answer 2

あなたのコードの問題は、あなたが目標入力を参照していないことです

var $username = $('[name="username"]'); 
    var $password = $('[name="password"]'"); 

しかし、あなたの作業を簡単にするために、ちょうどあなたのelemenにid属性を追加します。あなたのHTML要素は、あなたのコード行を変更する必要がありますts :)

<input type="text" class="form-control" name="username" id="username" placeholder="Username"> 
<input type="text" class="form-control" name="password" id="password" placeholder="Password">