i am getting this error in my console whick running ajax method
this is my ajax class'
$(document).ready(
function() {
$("#dndform").submit(function(event)
{
event.preventDefault();
ajaxPost();
});
function ajaxPost() {
var x = document.getElementById("monumber").value;
console.log("url:" + "http://localhost:8080/dnd?monumber=" + x);
$.ajax({
type: "POST",
url: "http://localhost:8080/dnd?monumber=" + x,
success: function(result) {
if (result.status == "success") {
$("#postResultDiv")
.html(
"<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>"
+ "Post Successfully! <br>"
+ "---> Congrats !!"
+ result.object.name
+ "</p>");
} else {
$("#postResultDiv").html(
"<strong>Error</strong>");
}
console.log(result);
},
error: function(e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
}
});
this is my view class
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<link rel="stylesheet" th:href="@{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="/js/dnd.js"></script>
</head>
<body>
<div class="col-sm-3">
<img src="/image/logo.jpg" style="width: 150px; height: 150px;">
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
</a> <a class="navbar-brand" href="#">Robi</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item"><a th:href="@{/home}"
class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Charging </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Calling Details</a></li>
<li><a class="dropdown-item" href="#">Charging Details</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" th:href="@{/freeminutes}">Free
Minutes</a></li>
</ul></li>
<li class="nav-item"><a th:href="@{/userdetails}"
class="nav-link" href="#">User Detail</a></li>
<li class="nav-item"><a th:href="@{/sms}" class="nav-link"
href="#">SMS Send</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/dnd}"
href="#">DND</a></li>
<li class="nav-item"><a th:href="@{/blockunblock}"
class="nav-link" href="#">Block/Unblock</a></li>
<li class="nav-item"><a th:href="@{/activate}"
class="nav-link" href="#">Activate</a></li>
<li class="nav-item"><a th:href="@{/deactivate}"
class="nav-link" href="#">Deactivate</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
MIS </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Date Wise</a></li>
<li><a class="dropdown-item" href="#">Monthly</a></li>
<li><hr class="dropdown-divider"></li>
</ul></li>
<li class="nav-item"><a th:href="@{/logout}" class="nav-link"
href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<form id="dndform" action="" th:action="@{/dnd}" method="get">
<!-- number -->
<div class="mb-3">
<label for="number_field" class="form-label"> Enter ANI </label> <input
name="monumber" type="tel" class="form-control" id="monumber"
aria-describedby="emailHelp" placeholder="Enter Here" />
</div>
<div class="col-sm-7" style="margin: 20px 0px 20px 0px">
<button type="button" onclick="ajaxPost()" class="btn btn-primary">Check</button>
<div id="getResultDiv" style="padding: 20px 10px 20px 50px">
<ul class="list-group">
</ul>
</div>
</div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<script th:src="@{/js/script.js}"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
i am net with ajax i am still learning but when i hit save button i get this error i think my ajax good is good but then why i am getting this error.
Uncaught ReferenceError: ajaxPost is not defined at HTMLButtonElement.onclick (dnd:107)
You are doing on button click and it not submitting the form
on form submit the button type must be submit
$( document ).ready(function() {
function ajaxPostRequest() {
var x = document.getElementById("monumber").value;
console.log("url:" + "http://localhost:8080/dnd?monumber=" + x);
$.ajax({
type: "POST",
url: "http://localhost:8080/dnd?monumber=" + x,
success: function(result) {
if (result.status == "success") {
$("#postResultDiv")
.html(
"<p style='background-color:#7FA7B0; color:white; padding:20px 20px 20px 20px'>"
+ "Post Successfully! <br>"
+ "---> Congrats !!"
+ result.object.name
+ "</p>");
} else {
$("#postResultDiv").html(
"<strong>Error</strong>");
}
console.log(result);
},
error: function(e) {
alert("Error!")
console.log("ERROR: ", e);
}
});
}
$("#dndform").submit(function(event){
event.preventDefault();
ajaxPostRequest();
});
});<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<link rel="stylesheet" th:href="@{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="/js/dnd.js"></script>
</head>
<body>
<div class="col-sm-3">
<img src="/image/logo.jpg" style="width: 150px; height: 150px;">
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
</a> <a class="navbar-brand" href="#">Robi</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item"><a th:href="@{/home}"
class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Charging </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Calling Details</a></li>
<li><a class="dropdown-item" href="#">Charging Details</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" th:href="@{/freeminutes}">Free
Minutes</a></li>
</ul></li>
<li class="nav-item"><a th:href="@{/userdetails}"
class="nav-link" href="#">User Detail</a></li>
<li class="nav-item"><a th:href="@{/sms}" class="nav-link"
href="#">SMS Send</a></li>
<li class="nav-item"><a class="nav-link" th:href="@{/dnd}"
href="#">DND</a></li>
<li class="nav-item"><a th:href="@{/blockunblock}"
class="nav-link" href="#">Block/Unblock</a></li>
<li class="nav-item"><a th:href="@{/activate}"
class="nav-link" href="#">Activate</a></li>
<li class="nav-item"><a th:href="@{/deactivate}"
class="nav-link" href="#">Deactivate</a></li>
<li class="nav-item dropdown"><a
class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
MIS </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Date Wise</a></li>
<li><a class="dropdown-item" href="#">Monthly</a></li>
<li><hr class="dropdown-divider"></li>
</ul></li>
<li class="nav-item"><a th:href="@{/logout}" class="nav-link"
href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<form id="dndform" action="" th:action="@{/dnd}" method="get">
<!-- number -->
<div class="mb-3">
<label for="number_field" class="form-label"> Enter ANI </label> <input
name="monumber" type="tel" class="form-control" id="monumber"
aria-describedby="emailHelp" placeholder="Enter Here" />
</div>
<div class="col-sm-7" style="margin: 20px 0px 20px 0px">
<button type="submit" class="btn btn-primary">Check</button>
<div id="getResultDiv" style="padding: 20px 10px 20px 50px">
<ul class="list-group">
</ul>
</div>
</div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<script th:src="@{/js/script.js}"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>