Bu javascript/jQuery neden html formunu göndermiyor?

Question

Javascript/jQuery kullanarak HTML tabanlı bir form göndermeye çalışıyorum, ancak hiçbir şey göndermiyor gibi görünüyor.

Ve benim HTML formum şimdi;

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

Benim Javascript kodum şimdi;

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

Bu seçicileri var:

var $username = $("#username"); 
var $password = $("#password"); 

Ama işaretlemesinde böyle eşleştirme elemanları vardır.

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

Ya işaretlemeyi maç için (ilgili HTML öğelerine id="username" ve id="password" ekleyerek) seçiciler eşleşecek şekilde işaretlemeyi değiştirmek veya seçiciler değiştirmek: Yani bu durum her zaman false olacak

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

pointed out in a comment below olarak

Veya daha da iyisi, submit işleyicisi zaten $(this) yoluyla forma bir referansı vardır çünkü o zaman bu konuda arama yapabilirsiniz:

Bu 10

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

name DOM benzersiz olması yok verilen özellikle yararlı olabilir (ancak bir form içinde özgü çoğu zaman olan). Gördüğünüz gibi size adını üzerinde kullanıyorsanız, sen adı yerine idkullanımı

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

:

Answer 2

kodunuzu sorun, hedef girişi başvuran olmamasıdır sadece Elemen üzerinde kimlik özniteliği eklemek,

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

Ama işiniz daha basit hale getirmek için: html elemanları, kendi kod satırını değiştirmeniz gerekir 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">