How to do form submit from the jquery fancy box to the spring controller class?

Question

I have a jquery document ready function of containing a fancy box for which I provide an html to render and I need to submit that form from fancy box and take it to the controller class of spring.

Whenever a Checkbox is checked, A fancy box appears, codes below

Here is my jquery fancy box code

$("input:checkbox")
  .click(
  function () {
    if ($(this).is(':checked')) {
      var htmlStr = '<div class="form"><form:form method="POST" action="mapping">' +
          '<label> Map the Selected field to Category ?   </label>'
      +
          '<select name="category" id="category">' +
          '<option>COMPANY NAME</option>' +
          '<option>LINE OF BUSINESS 1</option>' +
          '</select>'
      +
          '<input type="button" name="mapBtn" id="mapBtn" value="MAP" class="ui-button ui-widget ui-corner-all"' +
          '</form:form></div>';
      $.fancybox
        .open(
        htmlStr, {
          'width': 950,
          'height': 1100,
          'autoScale': false,
          'transitionIn': 'none',
          'transitionOut': 'none',
          'hideOnContentClick': false
        });
    }
  });

controller code is below

@PostMapping("mapping")
public String mapCategory()throws Exception{
  try {
    System.out.println("Welcome to mapping funcion");
  } catch (Exception e) {
    throw e;
  }

  return "viewUploadedExcel";
}

Since I am new to both the areas I explore it here. Help is appreciated. Thanks

Answer 1

You can make an Ajax POST Request to your Controller.

$( "#formButton" ).click(function() {
        sendForm();
    });
function sendForm(){
    var data = $("#form").serializeArray();
    $.ajax({
       url: "http://localhost/mapping",
       data: data
    }).done(function(responseData) {
       console.log(responseData)
   });
}