[jQuery] on form submission, how to decide "on submit: return true / false"

Thu, 14 Feb 2008 10:23:22 -0800 

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" ">
        <p><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></p>
        <p><label for="password">Password:</label> <input type="password"
name="password" id="password" />
        <span id="passwordResult"></span></p>
  <INPUT TYPE=HIDDEN NAME="stage" VALUE="go">

<p><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.

Reply via email to