<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$( function() {
$( ".datepicker" ).datepicker();
} );
</script>
<!-- <script>
function submitLeave(empid){
console.log("hi iam in submit leave method");
/* alert("herreeee");
var x = document.getElementById("startDate").value;
var y = document.getElementById("endDate").value;
console.log("x= "+x);
alert("x=="+x);
var employeeId = empid;
console.log("empid "+employeeId);
alert("empid=="+employeeId); */
$.ajax({
type : 'POST',
url : 'testLeave',
data: {'startDate': document.getElementById("startDate").value,
'endDate': document.getElementById("endDate").value,
'empid':empid,
'leaveType': document.getElementById("leaveType").value,
'reason': document.getElementById("reason").value,
'casualLeave': ${employee.casualLeave},
},
success: function(response){
alert(response);
},
error: function(){
alert("error");
}
});
}
</script> -->
<script>
$('#leaveApply').validate({
submitHandler: function(){
$.ajax({
type : 'POST',
url : 'testLeave',
data: {'startDate': document.getElementById("startDate").value,
'endDate': document.getElementById("endDate").value,
'empid':empid,
'leaveType': document.getElementById("leaveType").value,
'reason': document.getElementById("reason").value,
},
success: function(response){
alert(response);
},
error: function(){
alert("error");
}
});
}
});
</script>
</head>
<body style="background-color:powderblue" >
Welcome ${pageContext.request.userPrincipal.name}
Hi ${employee.name}, your employee id is ${employee.empid} <br><br><br><br>
<i>inside testwelcome.jsp file</i>
<br><br>
<h1>Apply your leave here</h1>
<form:form method="POST" action="/testLeave" name="leaveApply">
<label for="datepicker"> start date</label>
<input type="text" name="startDate" placeholder="start date" class="datepicker" id="startDate"/> <br>
<label for="datepicker">end date</label>
<input type="text" name="endDate" placeholder="end date" class="datepicker" id="endDate"/> <br>
<label > Reason</label>
<input type="text" name="reason" placeholder="Reason" id="reason" /> <br>
Type of leave
<select name="leaveType" id="leaveType">
<option value="casual">Casual</option>
<option value="sick">Sick</option>
</select>
<input type="button" value="submit" />
</form:form>
<%-- onclick="submitLeave('${employee.empid}')" --%>
<br><br>
<form method="POST" action="/logout">
<input type="submit" value="logout">
<%-- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> --%>
</form>
</body>
</html>
Я вставил приведенный выше html. Я пытаюсь проверить форму перед выполнением вызова ajax на мой контроллер пружины ... но вызов ajax не работает ..
, когда япопробуйте функцию закомментированной части submitLeave (empid), вызов ajax идет, но я хочу проверить форму, поэтому, когда я добавляю метод проверки jQuery, вызов ajax не отправляется на сервер ..
в основном я хочу проверитьМожет ли кто-нибудь сказать мне, как я должен это сделать в форме перед вызовом ajax?