[jQuery] on form submission, how to decide "on submit: return true / false"
Hi there, I just stepped in the jQuery world, and my first homework is
try to make a simple form validation example like following.
The problem is I haven't figure out how to automatically decide, on
form submission, how to figure out return turn or false.
I want the submit & receiving happened in same page, for e.g.
<register.php> by using <form TARGET="<?php echo "$PHP_SELF"; ?>"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>register</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#usernameLoading').hide();
$("#sdComt").submit(function(){
$('#usernameLoading').show();
//check.php is used for input check
$.post("check.php", {
username: $('#username').val(),password: $('#password').val()
}, function(response){
$('#usernameResult').fadeOut();
setTimeout("finishAjax('usernameResult', '"+escape(response)
+"')", 400);
$(".sdComt").append('<input type="hidden" name="ts"
value="'+response+'" />');
});
//I have problem on here:
if ( !$(".sdComt").response ) { return false; } else { return
true; }
});
});
function finishAjax(id, response) {
$('#usernameLoading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<body>
<h1>Register</h1>
<fieldset><legend>Registration Form</legend>
<form TARGET="<?php echo "$PHP_SELF"; ?>" method="POST" id="sdComt"
class="sdComt" ">
<label for="username">Username:</label> <input type="text"
name="username" id="username" />
<span id="usernameLoading"><img src="indicator.gif" alt="Ajax
Indicator" /></span>
<span id="usernameResult"></span>
<label for="password">Password:</label> <input type="password"
name="password" id="password" />
<span id="passwordResult"></span>
<INPUT TYPE=HIDDEN NAME="stage" VALUE="go">
<input type="submit" name="submit" id="send" value="Sign Up!" /></
p>
</form>
</fieldset>
<?php
if ($_POST['stage']=='go' && $_POST['ts']=='sucess')
{
//do registration here, insert data into db
}
?>
</body>
</html>
Looks like I made this too complex, looking forward for your kind
suggestions.