Jquery randomly stops working
Question
Alright, I've been working on a jQuery script all day, mostly tweaking it to get the errors to show properly, and all of a sudden---the code just stopped working. The form isn't submitting or anything.
Below I've included the code; I'm assuming its something on the jQuery side (namely google or something) because I reverted the code to the last working configuration and still am not getting anything.
Edit: There is no console error, the jQuery is not submitting. That is the problem i am having.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Login Test</title>
<link rel='stylesheet' href='theme/default/style.css' />
</head>
<div id='alert' class='hidden'>
Error
</div>
<body>
<div id='welcome_holder'>
<table cellpadding="0" cellspacing="0" id='welcome'>
<form method='post' action='actionlog.php' id='login'>
<tr>
<th colspan='3'><h3>Citizen Login</h3></th>
</tr>
<tr>
<td class='user'>Username</td><td class="user">:</td><td class="user"><input type='text' name='username' id='username'></td></tr>
<tr>
<td class='pass'>Password</td><td class="pass">:</td><td class="pass"><input type='password' name='password' id='password'></td>
</tr>
<tr><th colspan='3'><input type='submit' /></th></tr>
<tr><th colspan='3'><span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span></th>
</tr>
</form>
</table>
</div>
<script type='text/javascript'>
$('#login').submit(function() {
$.ajax({
url: 'actionlog.php',
type: 'POST',
data: {
username: $('#username').val(),
password: $('#password').val()
},
success: function(data) {
if(data == 'true')
{ location.reload(); }
else
{
$('#alert').addClass('show');
}
}
});
return false;
});
</script>
1 answers
solution1
0 2013-07-20 03:36:52
there were a couple issues with the code, the first thing that is to bind to dom events once the document is ready. Most importantly when submitting a form, you need to prevent the event using event.preventDefault() this stops the browser for performing the action of the form using the method of the form (aka posting to a url) I have update the code to reflect these changes, also fixed the HTML based on comments to your question.
<html>
<head>
<title>Login Test</title>
<link rel='stylesheet' href='theme/default/style.css' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
// use $(document).ready(function(){})
// $(function(){}) is a shortcut for ready function
$(function(){
$('#login').submit(function(e) {
// stop the form from submitting and allow the ajax to run
e.preventDefault();
$.ajax({
url: 'actionlog.php',
type: 'POST',
data: {
username: $('#username').val(),
password: $('#password').val()
},
success: function(data) {
if(data == 'true')
{
location.reload();
}
else
{
$('#alert').addClass('show');
}
}
});
return false;
});
});
</script>
</head>
<body>
<!-- alert div needs to be in body tag -->
<div id='alert' class='hidden'>Error</div>
<div id='welcome_holder'>
<!-- form outside of table -->
<form method='post' action='actionlog.php' id='login'>
<table cellpadding="0" cellspacing="0" id='welcome'>
<tr>
<th colspan='3'><h3>Citizen Login</h3></th>
</tr>
<tr>
<td class='user'>Username</td>
<td class="user">:</td>
<td class="user"><input type='text' name='username' id='username'></td>
</tr>
<tr>
<td class='pass'>Password</td>
<td class="pass">:</td>
<td class="pass"><input type='password' name='password' id='password'></td>
</tr>
<tr>
<td colspan='3'><input type='submit' /></td>
</tr>
<tr>
<td colspan='3'>
<span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
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.