How to stay on the same instance of jsp page without refreshing the page using jquery

Question

I have the submit button as below:

<form:form commandName="DRCNdetails"  id="frm1" method="POST" action="addNewDelayReason.do" >
</form:form>

    <button class="btnStyle blueBtn" id = "subBtn" onclick="showBox()"> 
                    <span class="left"> 
                        <span class="right">Submit</span> 
                    </span> 

                </button>
                $("#subBtn").click(function()

        {
        //if($("#reasonValue").val(missedReasonValue)!="")

            var missedReasonValue =$("#mrclist").val();
            var delayReasonValue=$("#text1").val();
            var preFixValue=$("#text2").val();
            alert("missedReasonValue :: "+missedReasonValue);
            $("#reasonValue").val(missedReasonValue); 


            document.getElementById("frm1").submit();



        showLtBox('mask', 'confirmationMsg');
                fadeOutLtBox('asgnExistMisdReasonCode');

        });



               function showBox(){

            alert('hi in showlightbox');
             showLtBox('mask', 'confirmationMsg');
             fadeOutLtBox('asgnExistMisdReasonCode');

              }

On click of the submit button, the respective data is saved in the database, but I am unable to show the pop up screen showLtBox('mask', 'confirmationMsg'); . It appears for few seconds and the pop up blocker called div confirmationMsg will never appear on the screen.

Answer 1

It is refreshing because you are not using ajax to submit the form.

$('#frm1').on('submit',function(e){
    e.preventDefault()
    var url = $(this).attr('action')
    var formData = $(this).serialize()

    //Submit the request via Ajax
    $.post( url, data, function( data ) {
        //Show the alert box you want to show
        showLtBox('mask', 'confirmationMsg');    //or th showBox() you defined

    });
})