Question posted in
You can find the official documentation here.

Jquery ajax – Javascript handle condition before form is submitted

I need to submit a form based on a condition. If true send the form via a modal or simply submit the form directly. What happens is that even when the condition is true the form is sent anyways without waiting that the click on the modal is triggered. After my research I understood that there was a way to prevent the submit with e.preventDefault();. I haven’t been able to get the result I want since it just did stop the execution. 

    (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 and 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So finally it is working I had indeed to put the logic in the else clause in case no waiting value is selected AND put the radiobuttons definition variable inside the save on click event 

                $( "#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();

                }
            });

  2. 0

    If you click ‘save’ button, its will submit it anyway in here.

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

    I’m not sure why, but if what you want submit it when selectedValIndConstitutionCan is not ‘waiting’, use 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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search