提交表单之前的Javascript处理条件答案

【问题标题】：Javascript handle condition before form is submitted提交表单之前的Javascript处理条件
【发布时间】：2020-01-09 03:30:02
【问题描述】：

我需要根据条件提交表单。如果 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>

【问题讨论】：

标签： javascript jquery ajax spring jsp

【解决方案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);

【讨论】：

您好，感谢您的回答。我确实添加了 else ，现在甚至没有触发 onclick 事件。为了回答您的疑问，我需要能够在两种情况下发送表格。在“等待”的情况下，模式只是介于两者之间，但仍需要提交表单。否则不等待而不是直接发送表单而不显示模态..
尝试不使用 e.preventDefault();部分。如果它仍然不起作用，那么使用 else if 而不是 else。

【解决方案2】：

所以最后它起作用了，我确实必须将逻辑放在 else 子句中，以防没有选择等待值并将单选按钮定义变量放在点击事件的保存中

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


                var selectedValIndConstitutionCan = $("[name='infoFiscale.indConstitutionCanada']:checked").val();

                if (selectedValIndConstitutionCan === 'waiting'){

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

                        $('#confirmationEnregistrerOui').on('click', function() {

                            $("#declarationImpot").attr(
                                    'action',
                                    CHEMIN_CONTEXTE +
                                    '/declarationImpot/enregistrer');
                                $("#declarationImpot").submit();

                                affichePopupVeuillezPatienterModaleGenerique();
                        });




                }   else {


                affichePopupVeuillezPatienterModaleGenerique();
                $("#declarationImpot").attr(
                    'action',
                    CHEMIN_CONTEXTE +
                    '/declarationImpot/enregistrer');
                $("#declarationImpot").submit();

                }
            });

【讨论】：