javascript - 函数中的 .submit() 工作了 2 次

Question

这是我的代码

HTML

<form class="vfr-validate"
                          id="intl-numbers-list-form" action="${formAction}" method="post">                        


                    <div id="ion_error_non_eligible_chooser">          
                       <c:if test="${errorNonEligibleChooser == 'true'}">                            

                                              <p>
                                               <fmt:message key='com.vodafone.wlportal.portlet.ion.non.eligible.postpaid.crmt' bundle='${current_bundle}'/>
                                              </p>   
                                              <br>
                                              <a href="" class="btn btn-primary mr20">Vezi Oferte</a>                                                                                         

                       </c:if>
                    </div>

                          <div class="col-md-3">
                             <input id="input_phone_no" class="required width100 pull-left mb10 mobile_international" 
                                   type="text" maxlength="10"
                                   value="" name="phone_no">
                          </div>
                          <div class="col-md-3">
                             <c:choose>
                                <c:when test="${fn:length(requestScope.listFnF) >= listFnFMax || errorNonEligibleChooser == 'true'}">
                                   <button disabled="disabled" class="btn btn-primary disabled" id="ion_add"
                                   data-wa="true" 
                                   data-wa-type="portlet"
                                   data-wa-portlet-name='<fmt:message key="com.vodafone.wlportal.portlet.ion.wa.data.wa.portlet.name" bundle="${global_properties_bundle }"/>'
                                   data-wa-portlet-facet='<fmt:message key="com.vodafone.wlportal.portlet.ion.wa.data.wa.portlet.facet.web" bundle="${global_properties_bundle }"/>'
                                   data-wa-portlet-action='<fmt:message key="com.vodafone.wlportal.portlet.ion.wa.data.wa.portlet.action.add" bundle="${global_properties_bundle }"/>'
                                   >
                                      <fmt:message key="com.vodafone.wlportal.portlet.ion.add.fnf" bundle="${current_bundle}" />
                                   </button>
                                </c:when>
                                <c:otherwise>
                                   <button class="btn btn-primary browserion" id="ion_add" 
                                               onclick="return addFNFAction();"
                                   data-wa="true" 
                                   data-wa-type="portlet"
                                   data-wa-portlet-name='<fmt:message key="com.vodafone.wlportal.portlet.ion.wa.data.wa.portlet.name" bundle="${global_properties_bundle }"/>'
                                   data-wa-portlet-facet='<fmt:message key="com.vodafone.wlportal.portlet.ion.wa.data.wa.portlet.facet.web" bundle="${global_properties_bundle }"/>'
                                   data-wa-portlet-action='<fmt:message key="com.vodafone.wlportal.portlet.ion.wa.data.wa.portlet.action.add" bundle="${global_properties_bundle }"/>'
                                   >
                                      <fmt:message key="com.vodafone.wlportal.portlet.ion.add.fnf" bundle="${current_bundle}" />
                                   </button>

                                </c:otherwise>
                             </c:choose>
                          </div>



                    </div>                            

                 </form>

JS函数

function addFNFAction() {

    //console.log("addFNFAction");

    var form = $("#intl-numbers-list-form");
    if (form.valid() == true) {
        $('#ion_loader').show();
        $('#ion_add').attr("disabled", true);
        form.submit();
    }
}

问题是在 IE 11 上，表单进行了 2 次提交。 我尝试以两种方式创建 onclick onclick="return addFNFAction();" 以及 onclick="addFNFAction();" ，结果与 2 次提交的结果相同。

Answer 1

基本上，浏览器正在执行表单提交，然后您的单击处理程序将再次提交表单。 您应该删除按钮上的 onclick 处理程序并将 onsubmit 处理程序添加到表单标记中。

尝试将此作为您的开始表单标记:-

<form class="vfr-validate" id="intl-numbers-list-form" onSubmit=addFNFAction method="post">

您需要将 JS 函数更改为:-

function addFNFAction(event) {

        //console.log("addFNFAction");
        event.preventDefault();
        var form = $("#intl-numbers-list-form");
        if (form.valid() == true) {
            $('#ion_loader').show();
            $('#ion_add').attr("disabled", true);
            form.submit();
        }

}