简体   繁体   中英

login form with ajax and javascript

I tried to use ajax to show error message if username or password are incorrect, and to go to tabeeb.html or secc.php if they are correct. but instead of going to the correct page, the page is presented in the dialog, like this img . what is the wrong?

this is the form

 <form method="post"   class="bounceInDown animated">
 <input type="text" name="u" id="u" placeholder="User Name" class="bbb"><br>
 <input type="password" name="p" id="p" placeholder="Password" class="bbb">     
 <input type="button" onClick="myFunction()"  name="loginbtn" class=" btn 
 btn-primary " value="Log in"> 
 </form>

this is myfunction() function

function myFunction(){

var u = document.getElementById("u").value;
var p = document.getElementById("p").value;
var dataString = 'u1=' + u + '&p1=' + p ;

 if (u == '' || p == '') {
alert("Please Fill All Fieldsssssss");} 


else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "ajaxjss.php",
data: dataString,
cache: false,
success: function(html) {

alert(html);
}
});
}
return false;

and this is ajaxjss.php

<?php
// Fetching Values From URL
$u2 = $_POST['u1'];
$p2 = $_POST['p1'];

$connection = mysql_connect("localhost", "root", "password"); 
//   Establishing Connection with Server..
$db = mysql_select_db("project", $connection); // Selecting Database

if (isset($_POST['u1'])) {


// من تحت هو التجربة
$result = mysql_query("select * from test where student_name = '$u2' ") or 
 die("faild");

$row = mysql_fetch_array($result);


if($row['student_name'] == $u2 && $row['student_password']==$p2)
{ $NoOFLetter = strlen($u2);

$result = substr($u2, $NoOFLetter-3,  $NoOFLetter);
if($result == "doc"){header('Location: tabeeb.html'); exit; }
if($result == "sec"){header('Location: secc.php'); exit;}

 exit; }

else{ 
$error_message = "Error in username or password!";}

// كل اللى فوق هو التجربة

if(!$query){

echo "error";

}else{echo "Form Submitted succesfully";}}
mysql_close($connection); // Connection Closed
?>

Now check it

 function myFunction(){ var u = document.getElementById("u").value; var p = document.getElementById("p").value; var dataString = 'u1=' + u + '&p1=' + p ; if (u == '' || p == '') { alert("Please Fill All Fieldsssssss");} else { // AJAX code to submit form. $.ajax({ type: "POST", url: "ajaxjss.php", data: dataString, cache: false, success: function(html) { if(html=="error"){ alert(html); } else{ window.location.href="secc.php"; } } }); } return false; 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM