form.submit() 将在表单内触发 double

Posted 2023-05-09

【中文标题】form.submit() 将在表单内触发 double

【英文标题】：form.submit() will trigger double inside a form

【发布时间】：2019-11-09 04:03:27

【问题描述】：

早安，

以下是我的jsp代码：

<s:form beanclass="c.c.i.c.app.profile.ui.ChangePasswordAction" method="post" name="form1">
<!-- some others code here -->
     <sx:row cssClass="button_row">
          <sx:input name="updatePassword" image="submit"/>  
     </sx:row>
</s:form>

这是我的jquery：

<script type="text/javascript">
$(':input[name=updatePassword]').click(function() 

        var answerProceed = confirm("Do you wish to proceed with the changes?");

        if( answerProceed )
            var form = $("form[name=form1]");
            form.attr("action", '<s:url beanclass="c.c.i.c.app.profile.ui.ChangePasswordAction" event="update"/>');
            form.submit();
         else 
        return false;
    );
</script>

我们可以看到，在jQuery中，它会触发update事件到ChangePasswordAction。

但是，目前我有一个问题，有时会触发2次，并不总是发生，但发生率约为50％。

以下是我从我的应用程序日志中得到的触发日志：

2019-06-26 18:19:13.658 [WebContainer : 31] TRACE o.s.w.c.s.XmlWebApplicationContext - [bmaker] - Publishing event in Root WebApplicationContext: org.springframework.security.event.authorization.AuthorizedEvent[source=FilterInvocation: URL: /common/change_password.html?update=&__stoken=1a47d3a9-29e8-4904-b204-3cb9fc0129f0]
2019-06-26 18:19:13.660 [WebContainer : 26] TRACE o.s.w.c.s.XmlWebApplicationContext - [bmaker] - Publishing event in Root WebApplicationContext: org.springframework.security.event.authorization.AuthorizedEvent[source=FilterInvocation: URL: /common/change_password.html?update=&__stoken=1a47d3a9-29e8-4904-b204-3cb9fc0129f0]

有人知道代码有什么问题吗？

【问题讨论】：

如果您的表单输入类型为提交，如果您想在提交表单之前检查确认，则必须在您的 javascript 中使用preventDefault()。即：...click(function() e.preventDefault(); var answerProceed... 其中e 是隐含的Event 实现参数，如MouseEvent 在您的情况下。

嗨@Paul，很抱歉回复晚了，您可以更新为答案，我会将其标记为我的正确答案。

好吧，我写了答案。一旦答案被接受，我将删除我的 cmets。

@Paul ，可以，你可以在这里留言，也很有用。

【参考方案1】：

如果<input/> 在表单中属于type="submit"，如果您想在提交表单之前检查确认，则必须使用preventDefault()。 在这种情况下，您可以将 e 作为参数传递给您的侦听器，作为 Event 实现参数，如 MouseEvent（由于 click 事件）。

例如：

$(':input[name=updatePassword]').click(function(e)  // <-- e implements Event
    e.preventDefault(); // <-- prevent the submit of the form
    var answerProceed = confirm("Do you wish to proceed with the changes?");
    if (answerProceed) 
        var form = $("form[name=form1]");
        // var form = e.currentTarget.form; you can do this
        // var form = this.form; or you can do this, "this" is implicit clicked element
        form.attr("action", '<s:url beanclass="c.c.i.c.app.profile.ui.ChangePasswordAction" event="update"/>');
        form.submit();
    
    else 
        return false;
    
);

您可以通过对元素执行.form 来访问元素的形式，请参阅 HTMLSelectElement.form

见

Event.preventDefault()

Event

MouseEvent