Here is my index.html page code:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</meta>
<title>School</title>
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div style="margin:auto; width:1000px;">
<div class="flt topblock"> <a href="" class="flt1 tp_txtplay">Play School</a>
<br/><br/>
<div>
<form id='myform' method='post' action='welcome.php' >
<span class="flt1 lp_txtlog">Email ID</span>
<input name="username" type="text" id="username" class="flt lp_textbox" />
<br />
<span class="flt1 lp_txtlog2">Password</span>
<input name="password" type="password" id="password" class="flt lp_textbox2" />
button id="submit" class='flt lp_button'>Login</button>
</form>
<div id="ack"></div>
</div>
</div>
</div>
</body>
</html>
Here is my_script.js code :-
$("button#submit").click(function() {
if ($("#username").val() == "" || $("#password").val() == "")
$("div#ack").html("Please enter both username and password");
else
$.post($("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
$("#myForm").submit(function() {
return false;
});
});
and below is my welcome.php code :-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<?php
$con = mysql_connect('localhost', 'root', 'Wahegurug@9');
mysql_select_db('test', $con);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
$sql = "SELECT * FROM user ";
$res = mysql_query($sql);
if ($row = mysql_fetch_array($res)) {
if ($row['Username'] == $_POST['username']) {
if ($row['Password'] == $_POST['password']) {
echo'login successful';
} else {
echo'login failed';
}
}
}
?>
</body>
</html>
Details are :- I have made this project in Netbeans 7.3 and using xampp server. I have created a simple login page and am trying to use javascript to prevent the page submitting if the wrong credentials are entered.
In my_script.js I'm using a div with id ack to show the user a success or error message.
My problem is that the user is still being redirected to welcome.php (my form's target) even if the wrong credentials are entered. How can I prevent this from happening?
