when ussing ajax function reload the page

0

i want to submit a form from jquery ajax.i used below code for perform it.but when i ussing 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';
}
}

}
?>

Link: when ussing ajax function reload the page
Source: Stack Jquery

Share.

About Author

Leave A Reply