When I press the submit button for my form, it calls JQuery to stop the page from refreshing, but it says that the function is not found (load).
I get multiple errors in the console, here is a screenshot: https://gyazo.com/ed25b9f8c1c8b0a6ecafedbad4d4e9ef
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>TheTawk | Sign up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function (event){
event.preventDefault();
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
var email = $("#email").val();
var username = $("#username").val();
var password = $("#password").val();
var signUp = $("#signUp").val();
$(".form-message").load("classes/register",{
firstName: firstName,
lastName: lastName,
email: email,
username: username,
password: password,
signUp: signUp
});
});
});
</script>
</head>
<body>
<?php include 'includes/header.php'; ?> <br><br>
<div class="container">
<div class='row justify-content-md-center'>
<div class='col-md-auto'>
<form autocomplete="off" action="" ="classes/register" method="post">
<input type="text" class="form-control" name="firstName" id="firstName" autofocus="on" placeholder="First name"><br>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last name"><br>
<input type="text" class="form-control" name="email" id="email" placeholder="Email"><br>
<input type="text" class="form-control" name="username" id="username" placeholder="Username"><br>
<input type="password" class="form-control" name="password" id="password" placeholder="Password"><br>
<button type="submit" class="btn btn-primary" name="signUp" name="signUp" style="width: 100%;">Sign up</button>
<p class="form-message"></p>
</form>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Thanks, Ethan!