Question

我希望在我的网页的主要部分有一个表单，并在此部分底部提供按钮以提交表单。

我还希望有一个侧栏，其中包含指向其他页面的链接，但要使其无论何时单击链接，它都会作为提交表单的按钮。（即在HTML中，这些链接的代码将在表单标记之外，但我希望它们仍然可以作为表单的按钮）

这可能吗？

Answer 1

在您的链接中使用以下onclick处理程序，将formId替换为您要提交的表单的ID ...

onclick="document.getElementById('formId').submit();return false;"

<强>更新

正如@Juan（和其他人，尤其是@JoeTaylor）所提到的，上面不会触发与表单相关的任何客户端验证代码。我知道这样做的最简单方法是在表单中触发提交按钮的click事件。例如，这可以在你的链接上使用......

onclick="document.getElementById('formSubmitButton').click();return false;"

虽然您没有提及与服务器端处理有关的任何事情，但我会假设这是表单的重点。我要说的另一件事是你应该总是在服务器上复制验证。 JavaScript非常容易绕过，因此您应该确保到达服务器的值是正确的，并且从不假设JavaScript已经完成了它的工作。

Answer 2

你可以在HTML5中轻松解决这个问题：

<input type="submit" form="id_of_the_form" value="Submit">

<form id="id_of_the_form" action method></form>

您可以根据需要设置这些按钮的样式。如示例所示，按钮可以放在dom中的任何位置 - 无需将其放入表单中。

Answer 3

通过在表单中添加onclick javascript函数。

document.forms["myform"].submit();

其中“myform”是表单的ID。这是一个很好的演练：http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

例如，按钮可能是：

<button onclick="document.forms['myform'].submit();">Hi</button>

Answer 4

是按钮的点击事件添加document.getElementById('formId').submit();

Answer 5

<form name="myform" action="action.php">

    // Your form

</form>

<a href="javascript: document.myform.submit();">Submit form</a>

或者您可以使用jQuery：

<form name="myform" action="action.php">

    // Your form

</form>

<a href="#" onclick="$("#myform").submit();">Your text</a>

Answer 6

确保您的表单通过您附加的任何函数提交验证和的最简单方法不是调用表单的submit()方法，而是调用其提交按钮{{1而不是方法。

考虑以下形式：

click()

现在，点击提交没有做任何特别的事情。但是，如果您想在将任何内容发送到服务器之前确保文本输入具有值，该怎么办？您可以按如下方式完成：

<form id="bar" method="post" action="/echo/html/">
    <input type="text" id="foo" name="foo">
    <input type="submit" value="Submit">
</form>

现在，如果您单击提交，则不会使用空白文本输入提交表单。但是如果以编程方式提交表单怎么办？我们先添加一个链接......

function validateBarForm() {
    var txt = this.querySelector("input[type=text]");
    if (txt.value == "") {
        txt.style.outline = "solid red 2px";
        return false;
    }
}

document.getElementById("bar").onsubmit = validateBarForm;

请注意，此链接位于表单标记的外部。我们可以简单地附上提交功能：

<a href="#" id="submit-bar">submit form</a>

点击“提交表格”，哎呀！验证功能未执行！有几种方法可以解决这个问题，但我最喜欢的是简单地让JavaScript模拟点击提交按钮。我发现这比改变验证函数的硬编码要好得多。

function submitBarForm() {
    document.getElementById("bar").submit();
}

document.getElementById("submit-bar").onclick = submitBarForm;

现在，当您单击该链接时，表单将得到验证，如果所有内容都已检出，则表示已提交。但是不要相信我的话 - 转到jsfiddle.net并亲自看看。

Answer 7

我自己在实际表单中使用隐藏的提交按钮来完成此操作，并且在表单外部 - 页面上的任何其他地方 - 引用提交按钮并触发它的标签。

形式：

<input type='submit' id='hiddenSubmit'>

以及其他任何地方：

<label for='hiddenSubmit'>click me!</label>

似乎可以胜任。

用于在页面上的其他位置提交表单的HTML按钮

7 个答案: