3

我想在我的网页的主要部分有一个表单，在这个部分的底部有一个按钮来提交它。

我还希望有一个带有指向其他页面的链接的侧栏，但要做到这一点，以便每当单击链接时，它也可以作为提交表单的按钮。（即在 HTML 中，这些链接的代码将在表单标签之外，但我希望它们仍然充当表单的按钮）

这可能吗？

4

7 回答 7

1

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

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

更新

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

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

尽管您没有提到与服务器端处理有关的任何事情，但我会假设您的表单的重点。在这背后我要说的另一件事是，您应该始终将验证复制回服务器上。JavaScript 很容易被绕过，所以你应该确保到达你的服务器的值是正确的，永远不要假设 JavaScript 已经完成了它的工作。

于 2012-08-08T16:37:46.113 回答
1

您可以在 HTML5 中不使用 JavaScript 轻松解决此问题：

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

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

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

于 2012-08-08T17:25:38.767 回答
0

通过在表单中​​添加 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>
于 2012-08-08T16:37:18.573 回答
0

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

于 2012-08-08T16:37:36.427 回答
0 
<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>
于 2012-08-08T16:38:23.010 回答
0

确保您的表单被您附加的任何函数提交和submit()验证的最简单方法不是调用表单的方法，而是调用其提交按钮的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>

请注意，此链接位于表单标记之外。我们可以简单地附加一个提交函数：

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

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

点击"提交表格"... 哎呀！不执行验证功能！有几种方法可以绕过这个问题，但我最喜欢的是让 JavaScript 模拟对提交按钮的点击。我发现这比硬编码对验证函数的调用更能适应变化。

function submitBarForm() {
    document.querySelector("#bar input[type=submit]").click();
}

现在，当您单击该链接时，表单将被验证，并且如果所有内容都已检查，则它也已提交。但不要相信我的话——前往 jsfiddle.net 并亲自看看。

于 2012-08-08T17:02:42.407 回答
0

我自己在实际表单中使用隐藏的提交按钮，在表单之外 - 页面上的任何其他位置 - 引用提交按钮并触发它的标签。

在表格中：

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

以及其他任何地方：

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

似乎完成了这项工作。

于 2021-07-23T20:40:50.847 回答