【问题标题】:HTML button to submit a form elsewhere on the page用于在页面其他位置提交表单的 HTML 按钮
【发布时间】:2012-08-05 19:58:31
【问题描述】:

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

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

这可能吗?

【问题讨论】:

  • 大部分答案的解决方案是使用JS提交表单。请注意,如果您调用form.submit(),则不会调用提交处理程序。因此,如果您确实有一个 onsubmit 处理程序来验证表单,您必须自己调用验证例程

标签: javascript html forms button


【解决方案1】:

您可以在 HTML5 中不使用 JavaScript 轻松解决这个问题:

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

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

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

【讨论】:

【解决方案2】:

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

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

更新

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

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

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

【讨论】:

  • 这会触发提交事件吗?也就是说,如果我有一个 onsubmit 需要做一些验证,从 JS 调用提交不会绕过那个处理程序吗?
  • @Juan,这是一个很好的观点,不,我不相信它会。正如其他答案中已经提到的那样,最简单的方法是“单击”表单中的提交按钮 - 我将更新我的答案以提供示例
【解决方案3】:

确保您的表单被提交由您附加的任何函数验证的最简单方法不是调用表单的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 并亲自看看。

【讨论】:

    【解决方案4】:

    通过在表单中​​添加 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>
    

    【讨论】:

      【解决方案5】:

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

      【讨论】:

        【解决方案6】:
        <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>
        

        【讨论】:

          【解决方案7】:

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

          形式:

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

          以及其他任何地方:

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

          似乎完成了这项工作。

          【讨论】:

            猜你喜欢
            • 2014-04-09
            • 1970-01-01
            • 2013-02-27
            • 2017-09-09
            • 1970-01-01
            • 2014-10-09
            • 1970-01-01
            • 2021-06-12
            • 2019-09-03
            相关资源
            最近更新 更多