JQuery Form Submit Not Calling Controller Method

Question

I am trying to submit a form in a JSP using JQuery/AJAX. It should call a method in a Spring Controller. My JSP looks like this:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <title>CISCO Router Console</title>
    </head>
    <body>
    
        <script type="text/javascript">
        
            $(document).ready(function() {
                $('#verify_success').hide();
                $('#verify_fail').hide();
                $('#command_header').hide();
                $('#command_text').hide();
                $('#command_area').hide();                      
            });
            
            $('#ip_submit').click(function () {
                
                $.ajax({
                    type: "POST",
                    url: "/verifyRouterIP", 
                    data: "routerIP=" + $('#ip_text').val(),
                    success: function(msg) {      
                        alert("here");
                    }
                });
            });
            
        </script>
        
        <form id="formSubmit" method="POST" action="/verifyRouterIP">
            <div id="heading" align="left" style="font-family: Verdana; color: blue; font-size: 20px">Welcome ${name}!! to CISCO Console</div>
            <br>
            <br>
            <br>
            <span id="ip_header" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router IP:  </span>
            <input id="ip_text" type="text" style="text-align: left; background-color:gray; font-family: Verdana; color: black; font-size: 14px" size="40" name="routerIP">
            <br>
            <br>
            <input id="ip_submit" type="button" style="text-align: left; font-family: Verdana; color: black; font-size: 14px" value="Verify IP">
            <br>
            <br>
            <span id="verify_success" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router Verification Unsuccessful!</span>
            <br>
            <span id="verify_fail" style="text-align: left; font-family: Verdana; color: red; font-size: 14px">Router Verification Successful!</span>
            <br>
            <br>
            <span id="command_header" style="text-align: left; font-family: Verdana; color: black; col font-size: 14px">Enter an IOS Command:  </span>
            <br>
            <input id="command_text" type="text" style="text-align: left; font-family: Verdana; color: black; font-size: 12px" size="120" name="routerIP">
            <br>
            <br>
            <textarea id="command_area" cols="150" rows="50"></textarea>
        </form>
    </body>
</html>

My Controller Class is like:

@Controller
public class ConsoleController {

    @RequestMapping(value = "/greeting", method = RequestMethod.GET)
    public String greeting(@RequestParam(name="name", required = false, defaultValue = "World") String name, ModelMap modelMap) {

        modelMap.put("name", name);

        return "welcome";
    }


    @RequestMapping(value = "/verifyRouterIP", method = RequestMethod.POST)
    public String verifyRouterIP(@RequestParam(name="routerIP", required = true) String routerIP, ModelMap modelMap) {

        modelMap.put("routerIP", routerIP);

        return "welcome";
    }
}

But when I click on the submit buttom on the JSP, the verifyRouterIP method is never invoked. I have a debug point here modelMap.put("routerIP", routerIP);. But the control never reaches there.

The greeting method loads the above JSP. The verifyRouterIP method is incomplete at the moment. I was just checking if the form submit reaches the method or not for now.

Can you please let me know what I am doing wrong here. I am sure I messed up the JQuery. But cant figure out what. Any pointers would be helpful.

Rathan Naik · Accepted Answer · 2022-07-06 17:15:56Z

1

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Move the click event listener inside the $(document).ready(function() {/**/});

Here is the solution

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <title>CISCO Router Console</title>
    </head>
    <body>
    
        <script type="text/javascript">
        
            $(document).ready(function() {
                $('#verify_success').hide();
                $('#verify_fail').hide();
                $('#command_header').hide();
                $('#command_text').hide();
                $('#command_area').hide();                      
           
            
                $('#ip_submit').click(function () {
                    
                    $.ajax({
                        type: "POST",
                        url: "/verifyRouterIP", 
                        data: "routerIP=" + $('#ip_text').val(),
                        success: function(msg) {      
                            alert("here");
                        }
                    });
                });

        });
            
        </script>
        
        <form id="formSubmit" method="POST" action="/verifyRouterIP">
            <div id="heading" align="left" style="font-family: Verdana; color: blue; font-size: 20px">Welcome ${name}!! to CISCO Console</div>
            <br>
            <br>
            <br>
            <span id="ip_header" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router IP:  </span>
            <input id="ip_text" type="text" style="text-align: left; background-color:gray; font-family: Verdana; color: black; font-size: 14px" size="40" name="routerIP">
            <br>
            <br>
            <input id="ip_submit" type="button" style="text-align: left; font-family: Verdana; color: black; font-size: 14px" value="Verify IP">
            <br>
            <br>
            <span id="verify_success" style="text-align: left; font-family: Verdana; color: black; font-size: 14px">Router Verification Unsuccessful!</span>
            <br>
            <span id="verify_fail" style="text-align: left; font-family: Verdana; color: red; font-size: 14px">Router Verification Successful!</span>
            <br>
            <br>
            <span id="command_header" style="text-align: left; font-family: Verdana; color: black; col font-size: 14px">Enter an IOS Command:  </span>
            <br>
            <input id="command_text" type="text" style="text-align: left; font-family: Verdana; color: black; font-size: 12px" size="120" name="routerIP">
            <br>
            <br>
            <textarea id="command_area" cols="150" rows="50"></textarea>
        </form>
    </body>
</html>

answered Jul 6, 2022 at 17:15

Rathan Naik

1,01013 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hell_storm2004 Over a year ago

The code only worked partially. The only thing I notice now that the URL is trying to post to http://localhost:8080/verifyRouterIP but the Controller method is configured for http://localhost:8080/verifyRouterIP?routerIP=XXXX. So all in all, the parameter is not getting added at the end of the POST URL. Whatever is set indata of the Ajax call, is pretty much useless.

hell_storm2004 Over a year ago

Just wanted to add, that in WebDeveloper i see a 403 error all the time.

hell_storm2004 Over a year ago

There was a problem with security. Which after a little Googling, i was able to figure out. I had to add var header = $("meta[name='_csrf_header']").attr("content"); var token = $("meta[name='_csrf']").attr("content"); to the Ajax call to make it work. But as far as the original error is concerned the $(document).ready(function() thing fixed it. Thanks.

Collectives™ on Stack Overflow

JQuery Form Submit Not Calling Controller Method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related