在onchange表单字段事件之后，表单提交不起作用

我在生产财务系统中遇到了一个问题，当用户更改数字输入字段的值(因此onchange函数启动)并立即单击表单提交按钮时，什么都不会发生-提交按钮仍然处于活动状态(按下)，但表单不会提交。

在实际系统中，我认为是AJAX导致了这种情况，但当我创建这个简化版本时，这种情况仍然存在(我已经包含了按钮样式，所以你可以在Firefox中看到卡住的按钮)。IE中也发生了，但按钮没有卡在里面。

即

如果您点击字段，然后点击提交，它就工作了(表单提交)。
如果您单击字段，更改字段的值，单击其他位置(这样onchange就会触发)，然后单击提交即可工作。

但是。。

如果您单击字段，更改字段的值，然后立即单击提交(无需单击其他任何位置)，则不会工作(表单不提交，但onchange函数启动)

我做错了什么？我以为这是一个焦点问题或函数返回真-假的问题，但现在我无法理解。。。

在提交前更改值后，无法要求财务用户单击其他位置。。。

使用FF46和IE11

编辑：实际上，我注意到从onchange函数中删除警报可以修复它，但在实际系统中，该函数包含AJAX调用，如：

新的Ajax更新程序('amount_1'，'/path/page-Ajax'，｛异步：false，方法：'post'，参数：'bridge_name=amount_1&row=1&local_currency='+55+'&payment_id='+552+'&currency_code_id='+$F('current_code_id')+'&currency_aunt='+$F；

当onchange函数中存在AJAX时，问题再次出现。

<html lang="en">
<head>
<script type="text/javascript">
function convertAmount(Obj)
{
alert('convertAmount');
}
</script>
<style>
input[type="button"], input[type="reset"], input[type="submit"] {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
border: 1px outset #eee;
border-radius: 4px;
color: #536c80;
cursor: pointer;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px;
overflow: visible;
padding: 4px 15px;
}
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 50%, rgba(226, 226, 170, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 33%, rgba(226, 226, 170, 1) 37%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
border: 1px inset #fff;
}
</style>
</head>
<body onsubmit="alert('submit');">
<form action="testbug2" method="post">
<input id="amount" type="text" maxlength="20" size="15" onchange="convertAmount(this);" value="2,612" name="amount">
<input type="submit" value="Save" name="formbutton:save">
</form>
</body>
</html>

是convertAmount中的alert调用导致了问题。例如，如果将alert('convertAmount')更改为console.log('convertAmount')，则其行为与您预期的一样。

请参阅http://jsbin.com/qoqifikehi/edit?html，控制台，输出

根据我的评论，问题似乎是输入的ACTIVE状态(IE在焦点上，内容发生了变化，而不仅仅是在焦点上)。激活时，单击Save submit会触发onchange事件，提交操作完成。

因此，您希望在提交操作之前更改活动状态并触发警报。

一种解决方案可能是通过在提交按钮上使用鼠标悬停来更改提交操作之前的活动状态，尽管这也可以内置到onclick触发的提交函数中。

使用您的示例，以下是鼠标悬停解决方案：

<html lang="en">
<head>
<script type="text/javascript">
function convertAmount(Obj)
{
alert('convertAmount');
}
function loseFocus() {
var focusedElement = document.activeElement;
{focusedElement.blur();}
}
</script>
<style>
input[type="button"], input[type="reset"], input[type="submit"] {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
border: 1px outset #eee;
border-radius: 4px;
color: #536c80;
cursor: pointer;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px;
overflow: visible;
padding: 4px 15px;
}
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 50%, rgba(226, 226, 170, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 33%, rgba(226, 226, 170, 1) 37%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
border: 1px inset #fff;
}

</style>
</head>
<body onsubmit="alert('submit');" >
<form action="testbug2" method="post">
<input id="amount" type="text" maxlength="20" size="15" onchange="convertAmount(this);" value="2,612" name="amount">
<input id="thingy" type="submit" value="Save" onmouseover="loseFocus()" name="formbutton:save">
</form>
</body>
</html>

我本来打算再次发表评论，因为我是一个JS新手，但由于大小的原因，使用它更容易。

相关内容

最新更新

热门标签：