Danith Kumarasinghe
Reputation: 201
when ussing ajax function reload the page
I want to submit a form from jquery ajax. I used below code for perform it. When I am using ajax function reload the page and redirect to 'registerphp.php' page. Echo messages are show that 'registerphp.php' page. But I want to show success message in a div.
code
<form action="registerphp.php" method="post"><br>
<div id="errordiv" class="form-group" style="display:none;background-color: #FFBABA;color: #9F6000;border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center">
<span id="error_message" class="text-danger"></span>
</div>
<div id="successdiv" class="form-group" style="display:none;background-color: #00dd00;color: #9F6000;border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center">
<span id="success_message" class="text-success"></span>
</div>
<div class="form-group">
<label for="pwd">Title</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label >User Name</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<div class="form-group">
<label for="pwds">Passowrd</label>
<input type="password" class="form-control" id="pwds" name="pwds">
</div>
<div class="form-group">
<label>Confirm Password:</label>
<input type="password" class="form-control" id="pwds2" name="pwds2" >
</div>
<div class="form-group">
<label >Email</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" id="phone" name="phone">
</div>
<div class="form-group">
<label>Birth date</label>
<input type="date" class="form-control" id="bdate" name="bdate" >
</div>
<div class="form-group">
<label for="pwd">University</label>
<input type="text" class="form-control" id="uni" name="uni">
</div>
<div class="form-group">
<label>GPA</label>
<input type="number" class="form-control" id="gpa" name="gpa" step=".01">
</div>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" id="add" name="add">
</div>
<input type="submit" class="btn btn-info btn-block btn-md" value="Submit" name="buttonregister" id="buttonregister"></input>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#buttonregister').click(function () {
var title=$('#title').val();
var name=$('#name').val();
var phone=$('#phone').val();
var uname=$('#uname').val();
var pwds=$('#pwds').val();
var pwds2=$('#pwds2').val();
var email=$('#email').val();
var phone=$('#phone').val();
var bdate=$('#bdate').val();
var uni=$('#uni').val();
var gpa=$('#gpa').val();
var add=$('#add').val();
if(title=="")
{
//$('#dis').slideDown().html("<span>Please type Title</span>");
$('#error_message').slideDown().html("Id is required");
$('#errordiv').css('display','block');
return false;
}
if(name=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Name is required");
$('#errordiv').css('display','block');
alert('no2');
return false;
}
if(!$.isNumeric(phone))
{
$('#error_message').html("<span>Please type Number</span>");
$('#errordiv').css('display','block');
alert('no3');
return false;
}
if(uname=="")
{
//$('#dis').slideDown().html("<span>Please type User Name</span>");
$('#error_message').html("User Name is required");
alert('no4');
return false;
}
if(pwds=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Id is required");
alert('no5');
return false;
}
if(pwds.length<5)
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no6');
return false;
}
else if(email=="")
{
$('#dis').slideDown().html("<span>Please type Email</span>");e
alert('no7');
return false;
}
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!filter.test(email))
{
$('#dis').slideDown().html('<span id="error">Please type correct email</span>');
alert('no8');
return false;
}
if(pwds!=pwds2)
{
$('#dis').slideDown().html("<span>Please type Same password</span>");
alert('no9');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no10');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no11');
return false;
}
else if(uni=="")
{
$('#error_message').slideDown().html("<span>Please type uni Name</span>");
alert('no12');
return false;
}
if(gpa=="")
{
$('#dis').slideDown().html("<span>Please type GPA</span>");
alert('no13');
return false;
}
else{
$.ajax({
method:"POST",
url:"registerphp.php",
data:{name:name,uname:uname,pwds:pwds,pwds2:pwds2,bdate:bdate,email:email,phone:phone,uni:uni,gpa:gpa,add:add,title:title},
success:function (data) {
$("form").trigger("reset");
$('#success_message').html(data);
$('#successdiv').css('display','block');
alert(data);
}
});
}
});
});
</script>
registerphp.php
<?php
$conn=mysqli_connect("localhost","root","","internship");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if (isset($_POST['buttonregister'])) {
$name = $_POST['name'];
$uname = $_POST['uname'];
$pwds = $_POST['pwds'];
$pwds2 = $_POST['pwds2'];
$bdate = $_POST['bdate'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$uni = $_POST['uni'];
$gpa = $_POST['gpa'];
$add = $_POST['add'];
$title = $_POST['title'];
$sql2 = "select username from student where username='$uname'";
if (mysqli_query($conn,$sql2)->num_rows>0) {
echo 'this user name already exist';
}
else {
$sql = "insert into student(fname,username,password,bdate,email,mobile,university,gpa,address,title) values('$name','$uname','$pwds','$bdate','$email',$phone,'$uni',$gpa,'$add','$title')";
if ($conn->query($sql) === TRUE) {
echo 'Successfully registerd';
} else {
echo 'Registerd unsccessfull';
}
}
}
?>
Upvotes: 2
Views: 79
Answers (2)
Junius L
Reputation: 16132
Use prevent default in your $('#buttonregister') on click, this will prevent the default behaviour. preventDefault
<script type="text/javascript">
$(document).ready(function () {
$('#buttonregister').click(function (e) { //add this parameter
e.preventDefault(); // add this line
var title=$('#title').val();
var name=$('#name').val();
var phone=$('#phone').val();
var uname=$('#uname').val();
var pwds=$('#pwds').val();
var pwds2=$('#pwds2').val();
var email=$('#email').val();
var phone=$('#phone').val();
var bdate=$('#bdate').val();
var uni=$('#uni').val();
var gpa=$('#gpa').val();
var add=$('#add').val();
if(title=="")
{
//$('#dis').slideDown().html("<span>Please type Title</span>");
$('#error_message').slideDown().html("Id is required");
$('#errordiv').css('display','block');
return false;
}
if(name=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Name is required");
$('#errordiv').css('display','block');
alert('no2');
return false;
}
if(!$.isNumeric(phone))
{
$('#error_message').html("<span>Please type Number</span>");
$('#errordiv').css('display','block');
alert('no3');
return false;
}
if(uname=="")
{
//$('#dis').slideDown().html("<span>Please type User Name</span>");
$('#error_message').html("User Name is required");
alert('no4');
return false;
}
if(pwds=="")
{
//$('#dis').slideDown().html("<span>Please type Name</span>");
$('#error_message').html("Id is required");
alert('no5');
return false;
}
if(pwds.length<5)
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no6');
return false;
}
else if(email=="")
{
$('#dis').slideDown().html("<span>Please type Email</span>");e
alert('no7');
return false;
}
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!filter.test(email))
{
$('#dis').slideDown().html('<span id="error">Please type correct email</span>');
alert('no8');
return false;
}
if(pwds!=pwds2)
{
$('#dis').slideDown().html("<span>Please type Same password</span>");
alert('no9');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no10');
return false;
}
if(bdate=="")
{
$('#dis').slideDown().html("<span>Please type Name</span>");
alert('no11');
return false;
}
else if(uni=="")
{
$('#error_message').slideDown().html("<span>Please type uni Name</span>");
alert('no12');
return false;
}
if(gpa=="")
{
$('#dis').slideDown().html("<span>Please type GPA</span>");
alert('no13');
return false;
}
else{
$.ajax({
method:"POST",
url:"registerphp.php",
data:{name:name,uname:uname,pwds:pwds,pwds2:pwds2,bdate:bdate,email:email,phone:phone,uni:uni,gpa:gpa,add:add,title:title},
success:function (data) {
$("form").trigger("reset");
$('#success_message').html(data);
$('#successdiv').css('display','block');
alert(data);
}
});
}
});
});
</script>
fix PHP not detective submit button
form submitted using AJAX don't submit the submit button. check this post
<?php
$conn=mysqli_connect("localhost","root","000000","ng_app");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//if (isset($_POST['buttonregister'])) { // ajax will not submit this button
$name = $_POST['name'];
$uname = $_POST['uname'];
$pwds = $_POST['pwds'];
$pwds2 = $_POST['pwds2'];
$bdate = $_POST['bdate'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$uni = $_POST['uni'];
$gpa = $_POST['gpa'];
$add = $_POST['add'];
$title = $_POST['title'];
$sql2 = "select username from student where username='$uname'";
if (mysqli_query($conn, $sql2)->num_rows > 0) {
echo 'this user name already exist';
} else {
$sql = "insert into student(fname,username,password,bdate,email,mobile,university,gpa,address,title) values('$name','$uname','$pwds','$bdate','$email',$phone,'$uni',$gpa,'$add','$title')";
if ($conn->query($sql) === TRUE) {
echo 'Successfully registerd';
} else {
echo 'Registerd unsccessfull';
}
}
//}
Upvotes: 2
ConorReidd
Reputation: 276
Add return false to your script. You remembered to add this to your validation (When something goes wrong) But when there isn't an error you haven't got a return false therefore the form is submitting to the .php script rather than remaining on the same page.
$.ajax({
...
});
return false;
Upvotes: 0
Related Questions
- Reload the page after ajax success
- Page refresh after click on register in jquery ajax php
- Refresh page after Ajax call
- PHP & AJAX - No Refresh on another Page when data is Fetch
- Ajax / Javascript - Refresh one time only
- Refreshing page after ajax request and PHP function
- reloading page with new function AJAX
- how to retrieve data from database without refreshing page using ajax
- Page refresh instead of Ajax Load without
- reloading page after fetching data from ajax