為什么此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>

我的Java代碼現在是；

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

您有以下選擇器：

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

但是標記中沒有這樣的匹配元素。 因此，此條件將始終為false ：

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

更改標記以匹配選擇器（通過將id="username"和id="password"到相關的HTML元素），或更改選擇器以匹配標記：

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

或者，甚至更好的是，如下面的注釋中所指出的那樣 ，由於submit處理程序已經通過$(this)引用了表單，因此您可以搜索該表單：

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

鑒於name在DOM中不必唯一（盡管通常在form是唯一的），這特別有用。

Answer 2

代碼上的問題是您沒有引用目標輸入：

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

如您所見，如果在html元素上使用name ，則使用name而不是id ，您需要更改以下代碼行：

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

但是為了使您的工作更簡單，只需在元素上添加id屬性即可：)

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