This is my login form code. But the form submit and JSON response retrieval isn’t happening at all. Where am I going wrong?
<html>
<body>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
</script>
<div id="login-box">
<form id="login" method="post" class="login" action="http://localhost:3000/login/">
<fieldset class="textbox">
<label class="username"> <span>Username or email</span>
<input id="username" name="username" value=""
type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password"> <span>Password</span>
<input id="password" name="password" value="" type="password"
placeholder="Password">
</label>
<button class="submit button" type="button">Sign in</button>
<p>
<a class="forgot" href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
<button id='theButton'>What?</button>
<script>
jQuery(document).ready(function () {
jQuery('.login').submit(function () {
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function (response) {
alert(response);
}
});
return false;
});
});
</script>
</body>
</html>
Change the button type from “button” to “submit”