My $.post request is not working. I have literally tried everything Any help will be appreciated.
<script src="js/jquery.min.js"></script>
<script>
function sendData() {
var email = document.getElementById("email").value;
var username = document.getElementById("username").value;
var pass = document.getElementById("password").value;
var roll = document.getElementById("roll").value;
var year = document.getElementById("year").value;
var subgrp = document.getElementById("subgrp").value;
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var phone = document.getElementById("phone").value;
var address = document.getElementById("address").value;
$.post("http://rental-back.herokuapp.com/api/signup",
{
"email": email, "username": username, "password": pass, "roll": roll, "year": year,
"subgrp": subgrp, "fname": fname, "lname": lname, "phone": phone, "address": address
},
function (data, status) {
// console.log(data);
if (data.msg == "success") {
alert("Account created successfully");
}
else {
alert("Account not created");
}
});
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>SignUp | CPS</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
</head>
<!-- multistep form -->
<body>
<form id="msform" onsubmit="sendData()" action="SignIn.html" method="post">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" id="email" name="email" placeholder="Email" required="">
<input type="text" id="username" name="username" placeholder="Username" required="">
<input type="password" id="password" name="password" placeholder="Password" required="">
<input type="button" name="next" class="next action-button" value="Next">
</fieldset>
<fieldset>
<h2 class="fs-title">College ID</h2>
<h3 class="fs-subtitle">Your college details</h3>
<input type="text" id="roll" name="roll" placeholder="Roll Number" required="">
<input type="text" id="year" name="year" placeholder="Which Year" required="">
<input type="text" id="subgrp" name="subgrp" placeholder="SubGroup ID (eg: COE-1)" required="">
<input type="button" name="previous" class="previous action-button" value="Previous">
<input type="button" name="next" class="next action-button" value="Next">
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" id="fname" name="fname" placeholder="First Name" required="">
<input type="text" id="lname" name="lname" placeholder="Last Name" required="">
<input type="text" id="phone" name="phone" placeholder="Phone" required="">
<textarea name="address" id="address" placeholder="Address" required=""></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
<script src="js/jquery.js"></script>
<script src="js/form.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="js/main.js"></script>
</html>
i have tried debugging it with console.log() but it shows that $.post() query is not working.
There are no errors in console and the function sendData() is being called.
Post request is working fine in console. It is also working outside send data function
