Question

我有一个html表单，我只想从位于表单外部的按钮提交。我正在使用javascript执行一些验证，除非我的javascript函数成功，否则不希望表单提交。我发现，如果我在表单中有按钮，它将始终提交，无论javascript如何，但如果我在表单之外的用户按下输入时它只是提交表单。如何强制输入执行按钮javascript而不是提交？

<form name="form1" action=<?$_SERVER["PHP_SELF"].'?'.$_SERVER["QUERY_STRING"]?> method="post">

<input type="text" maxlength="5" size="5" name="frmZip" value="">

<input type="hidden" name="frmLat" value="200">
<input type="hidden" name="frmLng" value="200">

<input type="submit" disabled="disabled" style="display:none" />
</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>

编辑：找到了解决方案。我改变了

</form>
<button type="button" id="GetCoordinates" onclick="doClick();">Find Stores</button>

到

<input type="button" name="frmSubmit" onclick="doClick();" value="Submit">
</form>

这阻止了按钮提交表单，所以我通过javascript在doClick（）中提交了它。

编辑2：虽然这似乎有效，但它已停止捕捉输入击键。我将我的按钮更新为：

<input type="submit" name="frmSubmit" onclick="return doClick();" value="Find Stores">

并且总是在doClick（）中返回false。一旦所有内容都执行完毕，这允许我通过javascript提交表单。

Answer 1

虽然这不能回答您的直接问题，但您实际上可以保留按钮，只需在表单提交上使用您的验证：

<form onsubmit="return validateForm()">

然后，在您的validateForm方法中，返回true或false，指示验证是否已通过。

然而，要回答您的直接问题，您还可以在提交按钮上使用相同的方法，这将阻止提交表单。

<强>更新

正如评论中指出的那样，通常需要一种不引人注意的解决方案，所以这就是：

document.getElementById('theForm').onsubmit = function() { return validateForm(); };

Answer 2

如果添加preventDefault ...

，表单中的按钮将不会在输入时提交表单

$("form").submit(function(e) {e.preventDefault();});

使用输入按钮提交表单

2 个答案: