php - How to login to website without a page refresh -
i using twitter bootstrap modal window registration form. when click on "register" after filling form, sends data mysql , session begins.
how ensure 1 remains @ same webpage has clicked "register" link.
<!doctype html> <html> <head> <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $("#ajax-contact-form").submit(function(){ var str = $(this).serialize(); $.ajax( { type: "post", url:"register_process.php", data: str, success:function(result) { $("#div1").html(result); } }); return false; }); }); </script> </head> <body> <a data-toggle="modal" href="#mymodal" class="btn btn-primary btn-lg">sign up</a> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body"> <div id="contact_form"> <form id="ajax-contact-form" name="contact" action=""> <fieldset> <div class="field_container">first name:</label> <input type="text" name="cust_firstname" id="firstname" maxlength="50" style="width: 250px; height: 30px"; /> <div class="field_container">last name:</label> <input type="text" name="cust_lastname" id="lastname" maxlength="50" style="width: 250px; height: 30px"; /> <div class="sex_check" > <input type="radio" name="cust_sex" type="radio" value="m" /> male <input type="radio" name="cust_sex" type="radio" value="f" /> female <hr class="line_break"> <div class="field_container">email:</label> <input type="text" name="cust_email" id="email" maxlength="100" style="width: 250px; height: 30px"; /> <div class="field_container">password:</label> <input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px"; /> <div class="field_container">confirm password:</label> <input type='password' name='cust_password2' id='confirmpassword' maxlength="12" style="width: 250px; height: 30px"; /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <input class="btn btn-primary" type="submit" name="submit" value="register" > </fieldset> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <div id="div1"> </div> </body> </html> register_process.php follows
<?php ob_start(); session_start(); require_once("config.php"); require_once("all_functions.php"); $cust_firstname = stripslashes($_post['cust_firstname']); $cust_lastname = stripslashes($_post['cust_lastname']); $cust_sex = stripslashes($_post['cust_sex']); $cust_email = stripslashes($_post['cust_email']); $cust_password = stripslashes($_post['cust_password']); $cust_password2 = stripslashes($_post['cust_password2']); $res = mysql_query("select * register cust_email = '$cust_email'"); if (mysql_num_rows($res)>0) { echo 'that email registered'; exit; } mysql_query("insert register (`cust_firstname`,`cust_lastname`, `cust_sex`, `cust_email`, `cust_password`) values ('$cust_firstname', '$cust_lastname', '$cust_sex', '$cust_email', '$cust_password')"); $_session['valid_user'] = $cust_email; header("location: http://tripneat.com/"); exit; ?>
you have change input type button , submit form using javascript .here edited code.
<!doctype html> <html> <head> <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> <script> function submit() // changesmade { var str = $("#ajax-contact-form").serialize(); $.ajax( { type: "post", url:"register_process.php", data: str, success:function(result) { $("#div1").html(result); } }); } </script> </head> <body> <a data-toggle="modal" href="#mymodal" class="btn btn-primary btn-lg">sign up</a> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body"> <div id="contact_form"> <form id="ajax-contact-form" name="contact" action=""> <fieldset> <div class="field_container">first name:</label> <input type="text" name="cust_firstname" id="firstname" maxlength="50" style="width: 250px; height: 30px"; /> <div class="field_container">last name:</label> <input type="text" name="cust_lastname" id="lastname" maxlength="50" style="width: 250px; height: 30px"; /> <div class="sex_check" > <input type="radio" name="cust_sex" type="radio" value="m" /> male <input type="radio" name="cust_sex" type="radio" value="f" /> female <hr class="line_break"> <div class="field_container">email:</label> <input type="text" name="cust_email" id="email" maxlength="100" style="width: 250px; height: 30px"; /> <div class="field_container">password:</label> <input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px"; /> <div class="field_container">confirm password:</label> <input type='password' name='cust_password2' id='confirmpassword' maxlength="12" style="width: 250px; height: 30px"; /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <input class="btn btn-primary" type="button" name="submit" value="register" onclick="submit()"/> // changes made </fieldset> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> <div id="div1"> </div> </body> </html>
Comments
Post a Comment