函数中的 .submit(） 工作 2 次

.submit() in function works for 2 times

本文关键字：工作 submit 函数      更新时间：2023-09-26

这是我的代码

.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次。我尝试以 2 种方式onclick onclick="return addFNFAction();"并且onclick="addFNFAction();"，结果与 2 种提交相同。

基本上，浏览器正在执行表单提交，然后您的点击处理程序再次提交表单。您应该删除 onclick 处理程序 on 按钮，并将 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();
        }
}

这是因为您正在调用 jQuery 的提交方法，该方法再次调用提交处理程序。这可能会导致对提交处理程序的递归调用

而是尝试调用 dom 的 submit 方法，还需要从处理程序返回 false 以停止按钮单击的默认操作;

function addFNFAction() {
  //console.log("addFNFAction");
  var form = $("#intl-numbers-list-form");
  if (form.valid() == true) {
    $('#ion_loader').show();
    $('#ion_add').attr("disabled", true);
    form[0].submit();
  }
  return false;
}
相关文章：