表单提交前的 Javascript 处理条件

Question

我需要根据条件提交表单。如果 true 通过模式发送表单或直接提交表单。发生的情况是，即使条件为真，表单也会被发送，而无需等待触发模式上的点击。经过我的研究，我了解到有一种方法可以使用 e.preventDefault(); 来阻止提交。我无法得到我想要的结果，因为它只是停止了执行。

    (function($) {
    $(document).ready(function() {

                $( "#save" ).click(function(e) {

                    if (selectedValIndConstitutionCan === 'waiting'){
                          $("#form").on('submit', function(e){

                                 e.preventDefault();

                              });
                        $('#popupConfirmationEnregistrement').modal("show");


                    }   

                    $("#confirmYesButtonModal").click(function() {

                        $("#form").attr(
                                'action',
                                CONTEXTE +
                                '/formsave/save');
                            $("#form").submit();

                            showProgress();
                    });


                    showProgress();
                    $("#form").attr(
                        'action',
                        CONTEXTE +
                        '/formsave/save');
                    $("#form").submit();


                });




        selectDeselectRadioButtons();

    });
})(jQuery);

HTML 和 JSP

<%@ include file="/WEB-INF/pages/include/include.jsp" %>

<script src="${contextpath}/js/inputMask/jquery.mask.min.js"></script>
<script type="text/javascript">
</script>



  <form:form id="form" modelAttribute="formSaving" action="#">
  <fwd:csrfToken />

    <div class="row form-group boutons-margin-top">
        <div class="col-xs-offset-12 col-xs-12 control-label text-left">


            <button class="btn btn-primary" type="button" id="save" data-toggle="modal" data-target="#modalSave">
            <spring:message code="xxx.save"/>
            </button>


        </div>
    </div>


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


<div id="modalSave" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <spring:message code="msg"/>
            </div>
            <div class="modal-footer">
                <button id="confirmNo" class="btn btn-default" data-dismiss="modal"><spring:message code="no"/></button>
                <button id="confirmYesButtonModal" class="btn btn-primary" data-dismiss="modal"><spring:message code="yes"/></button>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您单击“保存”按钮，它无论如何都会在此处提交。

                 showProgress();
                    $("#form").attr(
                        'action',
                        CONTEXTE +
                        '/formsave/save');
                    $("#form").submit();

我不确定为什么，但如果您想要在 selectedValIndConstitutionCan 未“等待”时提交它，请使用 else。

 (function($) {
    $(document).ready(function() {

                $( "#save" ).click(function(e) {

                    if (selectedValIndConstitutionCan === 'waiting'){
                          $("#form").on('submit', function(e){

                                 e.preventDefault();

                              });
                        $('#popupConfirmationEnregistrement').modal("show");


                    }else{
                        showProgress();
                        $("#form").attr(
                            'action',
                            CONTEXTE +
                            '/formsave/save');
                       $("#form").submit();


                     }

                    $("#confirmYesButtonModal").click(function() {

                        $("#form").attr(
                                'action',
                                CONTEXTE +
                                '/formsave/save');
                            $("#form").submit();

                            showProgress();
                    });            
                });




        selectDeselectRadioButtons();

    });
})(jQuery);