Confirmation PopUp( Yes or No) in Spring MVC Servlet Response Object and Handle Yes and No events

Question

I am working in a spring mvc servlet project. I have a form where there are 2 dropdowns

Suppose a) Month : b) Year :

and one Submit button.

Now when user selects value in both dropdown and click on Submit : The control goes to the onSubmit function of Controller GenerateForm. Here I do a database query and suppose that query gives me a value which I store in variable x. Now

if (x>0){
    give a confirmation popup in UI ASKING user ->
    Do you want to continue ?
    if( userClicks Yes){
    delete database value
    continue with normal flow ;
    }else{
        return null ;
    }
}
else{
    continue with normal flow ;
    save into database
}

Please help me how should I create this confirmation popup ? The control is in the Controller at this point. Please see the code skeleton below.

Code Skeleton :

Model Class :

public class Report {
    private String month;
    private String year;
    //getter setter here
}

Controller Class :

public class GenerateForm extends BaseFormController {

    // declaration of other class objects here

    public void afterPropertiesSet() {
        // assert calls here 
        super.afterPropertiesSet();
    }

    protected Object formBackingObject(HttpServletRequest request) throws Exception {

        Report rp = (Report)createCommand();
        return rp;
    }

    protected ModelAndView onSubmit(HttpServletRequest request, HttpServletResponse response, Object command,   BindException errors)
                throws Exception { 
        Report rp = (Report) command;

        x = Call_to_Manager_Class(rp); // Manager class in turn call DAO class

        if (x>0){
            give a confirmation popup in UI ASKING user ->
            Do you want to continue ?
            if( userClicks Yes){
                continue with normal flow ;
                return new ModelAndView(getSuccessView());
            }else{
                return null ; // stay on same page
            }
        }
        else{
            continue with normal flow ;
            return new ModelAndView(getSuccessView());
        }   

    }

    protected void initBinder(HttpServletRequest request,
            ServletRequestDataBinder binder) throws Exception {

        // binding done here
    }

    protected Map referenceData(HttpServletRequest request, Object command,
            Errors errors) throws Exception {
        //code related to reference data here   
        return data;
    }

}

.xml file

<bean id="generatForm" class="com.web.controller.GenerateForm">
    <property name="commandName" value="generate" />
    <property name="commandClass" value="com.domain.Report" />
    formview,success view and cancel view defined here similarly
</bean>

All beans are defined properly. The control is going to the onSubmit function. Now help me how can I generate that confirmation popup in UI asking user to Press Yes or No and handling it accordingly.

EDIT : I did the following change as suggested But the form is also getting submitted along with the Ajax request although I am getting the ajax response properly and also the confirmation popUp. How to prevent the form from getting submitted and I want it to submit only when user press Ok in the confirmation popup.

$(document).ready(function() {
$('#myForm').submit(function (ev) {
        console.log(1);
        var year = $('#year').val();
        var month = $('#month').val();
        console.log(year);
        console.log(month);
        $.ajax({
            type: "GET",
            url: 'ActionServlet',
            data: "year=" + year + "&month=" + month,
            success: function (data) {
              console.log(data);
              $('#ajaxDiv').text(data);
              var result= parseInt(data, 10);
              if (result > 0) {
                    if(!confirm("you sure about that?")){
                        ev.preventDefault(); 
                    }
              }
            },error : function(e) {
                alert('Error: ' + e); 
            }
        });  
});
});

EDIT 2 Even if I write e.preventDefault() at the start, the AJAX call will still be asynchronous and by the time the ajax response arrives this function flow will end. I tried doing that.

$(document).ready(function() {
    $('#myForm').submit(function (ev) {
            ev.preventDefault();
            console.log(1);
            var year = $('#year').val();
            var month = $('#month').val();
            console.log(year);
            console.log(month);
            $.ajax({
                type: "GET",
                url: 'ActionServlet',
                data: "year=" + year + "&month=" + month,
                success: function (data) {
                  console.log(data);
                  $('#ajaxDiv').text(data);
                  var result= parseInt(data, 10);
                  if (result > 0) {
                        if(confirm("you sure about that?")){
                            //$('form').unbind('submit').submit();
                            $('#myForm').submit();
                            //$(this).unbind('submit').submit();
                            //$('#submit').click();
                            //$(this).trigger(submit); 
                            //$(this).submit();
                        }
                  }
                },error : function(e) {
                    alert('Error: ' + e); 
                }
            }); 
           console.log(2); 
    });
    });

But once the form is prevented from submitting by ev.preventDefault(), I am not able to submit it again on the basis of my Confirm Popup. I have tried many ways. If I remove my Ajax Call

 $(document).ready(function() {
        $('#myForm').submit(function (ev) {
                ev.preventDefault();
                console.log(1);
                var year = $('#year').val();
                var month = $('#month').val();
                console.log(year);
                console.log(month);
                $(this).submit();
                console.log(2); 
        });
        });

It goes into a recursive call. I can stop that recursion using some variable but If I put this inside confirm , It doesn't call submit event again.

<div id="pageButtons">
    <button name="_submit" id="submit" > Generate</button>
</div>

This is my submit button configuration. Please help me fix this last issue.

EDIT 3:

I tried the last code suggestion and It gave me this console :

Uncaught TypeError: form.submit is not a function !! 

Then FOR the submit button I removed the id="submit". After then when I re-run my code, as soon as I hit the Submit button, my form gets submitted and this jQuery event is also fired. The confirmation Popup comes, if I select Ok , the form is again submitted. So Why is the form getting submitted automatically ? Before user clicks OK in confirmation popup ?

Answer 1

You can introduce javascript to do so. I'll use jQuery for demo:

$("#your-form").submit(function(e) {
    if(!confirm("you sure about that?")){
         e.preventDefault();
    }
});  

A popup dialog will popup when submit button is clicked. This will prevent the form from submitting to controller if the user does not want to submit.

Update per OP's comment:

$(document).ready(function() {
$('#myForm').submit(function (ev) {
    ev.preventDefault(); // prevent default action witch is form-submit
    var form = this; // avoid using jQuery's selection. 
    console.log(1);
    var year = $('#year').val();
    var month = $('#month').val();
    console.log(year);
    console.log(month);
    $.ajax({
        type: "GET",
        url: 'ActionServlet',
        data: "year=" + year + "&month=" + month,
        success: function (data) {
          console.log(data);
          $('#ajaxDiv').text(data);
          var result= parseInt(data, 10);
          if (result > 0) {
                if(confirm("you sure about that?")){ //if yes is clicked (negation is removed) 
                    form.submit(); // this won't trigger the jQuery's submission, so it will not cause infinite loop.
                }
          }
        },error : function(e) {
            alert('Error: ' + e); 
        }
    });  
});
});