HTML按钮，其他地方提交表单的页面

Question

我想在我的网页沿着这部分的底部按钮主要部分的形式提交它。

我也想有链接到其他页面的侧边栏，但让这个只要点击一个链接它作为一个按钮提交表单了。 （在HTML即这些链接的代码将表单标签之外，但我想他们仍然充当表单按钮）

这可能吗？

Answer 1

，以确保您的形式最简单的方法被提交和由您附加任何功能验证是不是调用窗体的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并亲自看看。

Answer 2

通过添加一个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 3

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

Answer 4

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

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

Upda TE

作为@Juan（和其他人，特别是@JoeTaylor）已经提到的，以上将不会触发与表单关联的任何客户端验证代码。据我所知，使其做到这一点最简单的方法是在表单中触发click事件提交按钮。例如，这可能您的链接上使用...

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

虽然你不提任何与服务器端处理，我会假设你表单的地步。我要说的另一件事是，你应该总是复制验证回到服务器上。 JavaScript很容易绕过，所以你应该确保到达服务器的值是正确的，并且从不假设JavaScript已经完成了它的工作。

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

您可以在HTML5解决这个问题很容易没有JavaScript：

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

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

而且你可以风格的按钮，只要你喜欢。就像在这个例子中，这个按钮可以放在dom中的任何位置 - 不需要把它放到窗体中。