JQuery Form Submit Not Calling Controller Method-CodePudding

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.

CodePudding user response：

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>