Question

在我们的应用程序中，我们最近采用了改进的GUI样式。最初，我们的表单提交链接类似于以下内容：

<input type=submit class="some-style" name="Command" value="Save" />

但是，我们正尝试使用以下内容：

<input id='hiddenSaver' type="hidden" name="Command" value="Save" />
<a id='saveButton' href="#" class="some-style"><i class="some-icon"></i> Save</a>

<!-- SNIP: Extraneous other stuff -->

<script>
var $saveButton = $('saveButton'),
    $hiddenSaver = $('hiddenSaver');

$(document).ready(function () {
  $saveButton.click(function () {
    $saveButton.preventDefault();
    $hiddenSaver.submit();
  });
});
</script>

然而，我们的表格不提交......事实上，他们只是不做任何事情。我们缺少什么？

Answer 1

您没有正确使用id selector并错过了选择器中ID之前的#。

var $saveButton = $('#saveButton'),
$hiddenSaver = $('#hiddenSaver');

在表单对象上调用提交而不是按钮

$hiddenSaver.closest('form').submit();

或

$hiddenSaver = $('hiddenSaver').closest("form");
$hiddenSaver.submit();

Answer 2

您在输入字段而不是表单上调用.submit()。以下是jQuery文档的摘录：

当用户尝试提交表单时，会将提交事件发送给元素。它只能附加到<form>元素。可以通过点击明确的<input type="submit">，<input type="image">或<button type="submit">或在某些表单元素具有焦点时按Enter键来提交表单。

请参阅.submit()的jQuery API页面：

jQuery .Submit()

尝试将.submit()附加到您提交的表单中。他们还建议不要提供什么样的投入来提交表格。我不确定你是否可以使用你的锚标签。你当然可以使用：

<button type="submit">Submit</button>

我知道你正在使用一个新的GUI，但有了一些CSS样式，你可以让按钮看起来很漂亮。

希望这有帮助。

Answer 3

这个答案完全解决了发布的原始问题，包括一个有效的演示......

标题：“通过href标记提交”

您的代码存在以下几个问题......

1）您的jQuery ID选择器缺少#符号。

2）您未能使用e和.preventDefault()

将事件变量function(e)传递给e.preventDefault()

3）submit()附加到form本身，而不是input元素。

我在下面更正了您的代码：

<form id="myform">
    <input id='hiddenSaver' type="hidden" name="Command" value="Save" />
</form>

<a id='saveButton' href="#" class="some-style"><i class="some-icon"></i> Save</a>

<!-- SNIP: Extraneous other stuff -->

<script>
var $saveButton = $('#saveButton'),
    $hiddenSaver = $('#hiddenSaver'),
    $myform = $('#myform');

$(document).ready(function() {
    $saveButton.click(function(e) {
        e.preventDefault();
        $myform.submit();
    });
});
</script>

工作演示： http://jsfiddle.net/sBueS/

我在jsFiddle中包含了jQuery Validate插件，仅用于证明表单确实是使用锚标记submit()触发的<a>事件提交的。

表单提交通过一个href标签不起作用

3 个答案: