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

你有这些选择器：

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]");

或者，更好的是pointed out in a comment below，因为submit处理程序已经通过$(this)引用了表单，那么您可以搜索它：

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

这可能特别有用，因为name在DOM中不必是唯一的（尽管<{1>}中经常唯一）。

Answer 2

您的代码的问题是您没有引用目标输入：

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

正如您所看到的，您使用名称而不是 id ，如果您在html元素上使用 name ，则需要更改这行代码：

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

为什么这个javascript / jQuery不提交html表单？

2 个答案: