When I click the submit button on my form my registration page refreshes without the form data being posted to my database.
My HTML markup looks like this -
<form id="reg">
<div class="form-group">
<label style="color: white; text-align:center" for="username">Username</label>
<input style="color: #C0C0C0;" type="text" name = "username" class="form-control" id="username" placeholder="Enter Username">
</div>
<div class="form-group">
<label style="color: white; text-align:center" for="password">Password</label>
<input style="color: #C0C0C0;" type="password" name = "password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label style="color: white; text-align:center" for="email">Email</label>
<input style="color: #C0C0C0;" type="text" name = "email" class="form-control" id="email" placeholder="Enter Email">
</div>
<button type="submit" name = "submit" class="btn btn-primary">Submit</button>
And my jquery code -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#reg').on('submit', function(e) {
e.preventDefault
$.ajax({
url:'script/register.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
});
</script>
I am not sure where I am going wrong. The page refreshes and I see the forms variables and values in the url bar. Any help with the above is greatly appreciated. Thanks
Check your syntax: preventDefault is a function.
$('#reg').on('submit', function(e) {
e.preventDefault() <---- Here fails
$.ajax({
url:'script/register.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
});
Replace your ajax code with the following
<script>
$('#reg').on('submit', function(e) {
$.ajax({
url:'script/register.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
return false;
});
You should return false to prevent page refresh.