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.
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>