在Spring MVC中单击表单提交和调用提交按钮的JavaScript函数？

Question

On the submit button click event, I am calling a js function for getting the user's input and send to the server side for processing. At the same time, I need to submit the form with all the filled data along. I put <button type="button"> instead <button type="submit"> as when I put 'type' as submit it gets error. There, the js is functioning finely, but the field values are not fetched by controller method.

How can I do this with only one button ? Here is my handler method in controller:

@RequestMapping(value = "/add_package")
    public
    @ResponseBody
    ModelAndView addPackage(@ModelAttribute("newPackage") Package newPackage,
                            HttpServletRequest request) {

        LOGGER.error("package objct {}",newPackage);// here I am getting objects with null values !!

        String s = request.getParameter("test");
        LOGGER.trace("test val = {}", s);

        ObjectMapper objectMapper = new ObjectMapper();
        List<Package> cats = null;
        String pkgName = newPackage.getPackName();
        try {

           ...
        } catch (Exception e) {
            ..
            LOGGER.error("error in package add {}", e.getMessage());
        }

        return new ModelAndView(new RedirectView("add"));
    }

Here is the jsp code for button:

<form:button type="button" class="btn btn-success" id="btnAddNewPkg" onclick="contentPackge()"><span class="glyphicon glyphicon-plus"></span>

Add

Answer 1

I dont think you need to pass the url as https://localhost:8443/admin/packages/add_package instead only /add_package will be enough.

Beside you may also need to provide the url-pattern

Secondly for ajax response I am not sure why you again need ModelAndView . You can explore redirect property

If you are using button="submit" , then you need to use event.preventDefault() to stop the default behavior. I guess using button="button" will work fine

Answer 2

See you should submit form after the ajax has been successfuly called that is in the success function of ajax you should manually submit the form using jquery.submit() function .other wise it won't work.because it may disrupt the function of ajax .or you could have time delay function after clicking the submit button .

this is a nasty way of doing it .i prefer you call the submit function in ajax success and keep button type as button

    $( "#target" ).submit(function( event ) {
    alert( "Handler for .submit() called." );
    event.preventDefault();showloadingif();
    setTimeout(function(){ $("#formId").submit(); }, 3000);         
});