Javascript onchange表单字段事件后表单提交不起作用_Javascript_Html_Forms

Javascript onchange表单字段事件后表单提交不起作用

javascript html forms

Javascript onchange表单字段事件后表单提交不起作用,javascript,html,forms,Javascript,Html,Forms,我在生产财务系统中遇到了一个问题，当用户更改数字输入字段的值（因此一旦更改函数启动）并立即单击表单提交按钮时，什么都不会发生-提交按钮只是保持活动状态（按下），但表单不会提交在真实的系统中，我认为是AJAX导致了这种情况，但当我创建这个简化版本时，这种情况仍然存在（我已经包括了按钮样式，所以您可以在Firefox中看到卡住的按钮）。在IE中也会发生，但按钮不会一直被卡住 i、 e 若您单击“进入”字段，然后单击“提交”，则它将起作用（表单提交）如果您单击“进入字段”，请更改字段的值，单击其他

我在生产财务系统中遇到了一个问题，当用户更改数字输入字段的值（因此一旦更改函数启动）并立即单击表单提交按钮时，什么都不会发生-提交按钮只是保持活动状态（按下），但表单不会提交

在真实的系统中，我认为是AJAX导致了这种情况，但当我创建这个简化版本时，这种情况仍然存在（我已经包括了按钮样式，所以您可以在Firefox中看到卡住的按钮）。在IE中也会发生，但按钮不会一直被卡住

i、 e

若您单击“进入”字段，然后单击“提交”，则它将起作用（表单提交）

如果您单击“进入字段”，请更改字段的值，单击其他位置（因此一旦更改就会触发），然后单击“提交”，它就可以工作了

但是

如果单击“进入字段”，请更改字段的值，然后立即单击“提交”（不单击其他任何位置），则该操作不起作用（表单不提交，但一旦更改函数启动）

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

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

使用FF46和IE11

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

新的Ajax.Updater（'amount_1'，'/path/page Ajax'，{asynchronous:false，method:'post'，parameters:'widget_name=amount_1&row=1&local_currency='+55+'&payment_id='+552+'¤cy_code_id='+'+F（'currency_code_-id'）+'¤cy_-amount='+'F（'amount'+F（'amount++'）&update_-amount p=0'）

当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>


功能转换金额（Obj）
{
警报（“兑换金额”）；
}
输入[type=“button”]、输入[type=“reset”]、输入[type=“submit”]{
背景：rgba（0，0，0，0）线性梯度（到底部，rgba（246248249，1）0%，rgba（229235，238，1）50%，rgba（215222227，1）51%，rgba（245247249，1）100%）重复滚动0；
边界：1px起点#eee；
边界半径：4px；
颜色：#536c80；
光标：指针；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
字体大小：正常；
保证金：2倍；
溢出：可见；
填充：4px15px；
}
输入[type=“button”]：悬停，输入[type=“reset”]：悬停，输入[type=“submit”]：悬停{
背景：rgba（0，0，0，0）线性梯度（到底部，rgba（246248249，1）0%，rgba（237237192，1）50%，rgba（226226170，1）51%，rgba（245247249，1）100%）重复滚动0；
}
输入[type=“button”]：激活，输入[type=“reset”]：激活，输入[type=“submit”]：激活{
背景：rgba（0，0，0，0）线性梯度（到底部，rgba（246248249，1）0%，rgba（237237192，1）33%，rgba（226226170，1）37%，rgba（245247249，1）100%）重复滚动0；
边框：1px插图#fff；
}
是警报
调用兑换金额
导致问题。例如，如果将alert（'convertAmount'）
更改为console.log（'convertAmount'）
，则它的行为与您预期的一样
请参见
根据我的评论，问题似乎是输入的活动状态（即焦点和内容已更改-而不仅仅是焦点）。激活时，单击保存提交将触发onchange事件，并完成提交操作
因此，您希望在提交操作之前更改活动状态并触发警报
一种解决方法可能是在submit按钮上使用mouseover来更改submit操作之前的活动状态，不过这也可以内置到submit的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>


功能转换金额（Obj）
{
警报（“兑换金额”）；
}
函数focus（）{
var focusedElement=document.activeElement；
{focusedElement.blur（）；}
}
输入[type=“button”]、输入[type=“reset”]、输入[type=“submit”]{
背景：rgba（0，0，0，0）线性梯度（到底部，rgba（246248249，1）0%，rgba（229235，238，1）50%，rgba（215222227，1）51%，rgba（245247249，1）100%）重复滚动0；
边界：1px起点#eee；
边界半径：4px；
颜色：#536c80；
光标：指针；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
字体大小：正常；
保证金：2倍；
溢出：可见；
填充：4px15px；
}
输入[type=“button”]：悬停，输入[type=“reset”]：悬停，输入[type=“submit”]：悬停{
背景：rgba（0，0，0，0）线性梯度（到底部，rgba（246248249，1）0%，rgba（237237192，1）50%，rgba（226226170，1）51%，rgba（245247249，1）100%）重复滚动0；
}
输入[type=“button”]：激活，输入[type=“reset”]：激活，输入[type=“submit”]：激活{
背景：rgba（0，0，0，0）线性梯度（到底部，rgba（246248249，1）0%，rgba（237237192，1）33%，rgba（226226170，1）37%，rgba（245247249，1）100%）重复滚动0；
边框：1px插图#fff；
}

我打算再次发表评论，因为我是一名JS新手，但出于大小原因，使用它更容易。
是的，几分钟前我自己发现了这个问题，我编辑了这个问题-当onchange函数中有AJAX调用时，在实际系统中仍然会出现问题，因此无论警报调用做什么，AJAX调用似乎也是如此。@geogan它可能是在文档外部发生更改时发出的-警报是浏览器，AJAX是服务器？是否为“”保存一个onclick事件函数“输入更好-它可以做任何事情然后提交？@TBB AJAX调用必须在输入字段上。他们修改表单上的其他字段以及用户需要的许多其他服务器端数据库内容。无法将它们移动到提交按钮。@geogan我完全是js新手，不应该在这里。但在我看来，您的问题可以归结为导致活动输入的“焦点丢失”。无法创建由save onclick触发的函数