By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Why is this function not returning false?

Haitashi
P: 96
I have a form that calls a function using the onClick event in the submit button. I would like this function to return false if the username is taken. The the original function, which I've tested, returns the correct info when the "checkUname" button is clicked. However, it always returns false. I want to return false ONLY if the username is taken.
Original:
Expand|Select|Wrap|Line Numbers
  1.         $("#checkUname").click(function(){
  2.         var datastring= $('form#newUserForm').serialize();
  3.         $.ajax({
  4.             type: "POST",
  5.             url: "index.cfm?event=user.checkUname&requestFormat=ajax",
  6.             data: datastring,
  7.             success: function(response){
  8.                 var resp = jQuery.trim(response);
  9.                 if (resp == 'FALSE'){
  10.                     $('.toggleSuccess').show();
  11.                     $('.toggleFailure').hide();
  12.                 }else{
  13.                     $('.toggleFailure').show();
  14.                     $('.toggleSuccess').hide();
  15.                 }
  16.             }
  17.         });// .ajax()
  18.  
  19.         return false;
  20.         }); // .submit()
I would like to run the same code, from the submit button and return true if the value of "resp" is false. This is what I've done:
Field I wish to validate:
Expand|Select|Wrap|Line Numbers
  1. <input class="text required" name="uname" type="text" />
Submit button:
Expand|Select|Wrap|Line Numbers
  1. <input name="submit" type="submit" onclick="checkuname()" />
checkuname function:
Expand|Select|Wrap|Line Numbers
  1.     function checkuname(){
  2.  
  3.         var datastring = document.getElementById('uname');
  4.  
  5.         $.ajax({
  6.             type: "POST",
  7.             url: "index.cfm?event=user.checkUname&requestFormat=ajax",
  8.             data: datastring,
  9.             success: function(response){
  10.                 var resp = jQuery.trim(response);
  11.                 if (resp == 'FALSE'){
  12.                     return true;
  13.                 }else{
  14.                     $('.toggleFailure').show();
  15.                     $('.toggleSuccess').hide();
  16.                     return false;
  17.  
  18.                 }
  19.             }
  20.         });// .ajax()
  21.  
  22.     };
So, if the checkuname function returns false then the form won't submit and it also shows this div that has the class of "toggleFailure". Right now it's only returning false if I leave the field blank. As soon as I put any values in there, the form submits regardless of the checkuname function.

I should note (in case it might be relevant) that before this function in the JS file, I have a call to the JQuery validate plugin which I call like so:
Expand|Select|Wrap|Line Numbers
  1. $('form#newUserForm').validate();
Also, the name and ID of the form are: "newUserForm".
Aug 17 '09 #1
Share this Question
Share on Google+
7 Replies


gits
Expert Mod 5K+
P: 5,390
the problem is that an ajax-call is async. so you should always return false and not submit the form the 'traditional' way (currently your form is submitted while the validation request is running) ...but then use the javascript submit() method in case of validation success ...

kind regards
Aug 17 '09 #2

Haitashi
P: 96
Hi there! Long time, no see. Thank you for the response. I changed from using an AJAX call to using traditional html. So, now I have the following

Expand|Select|Wrap|Line Numbers
  1.         $("form#newUserForm").submit(function(){
  2.         var datastring = $('form#newUserForm').serialize();    
  3.         $.post("index.cfm?event=user.checkUname", datastring, 
  4.                 function(datastring){
  5.                     var resp = jQuery.trim(response);
  6.                     if (resp == 'FALSE'){
  7.                         return true;
  8.                     }else{
  9.                         $('.toggleFailure').show();
  10.                         $('.toggleSuccess').hide();
  11.                         return false;
  12.                     }
  13.                 });
  14.         });
When the form is submitted this code is run. From looking at the request in Firebug I can see that "datastring" name/value pairs are being passed in correctly. However, there isn't a response back from the server. The original version, posted in the first posts, still works a-ok.
Aug 18 '09 #3

gits
Expert Mod 5K+
P: 5,390
in your callback function you should receive response ... currently you do not :)

Expand|Select|Wrap|Line Numbers
  1. function(datastring) {
should be:

Expand|Select|Wrap|Line Numbers
  1. function(response) {
otherwise resp in your function is always undefined.

kind regards
Aug 18 '09 #4

Haitashi
P: 96
Oops! Fixed that but still no-go.

This works:
Expand|Select|Wrap|Line Numbers
  1. $("#checkUname").click(function(){
  2.         var datastring = $('form#myForm').serialize();    
  3.         $.ajax({
  4.             type: "POST",
  5.             url: "index.cfm?event=checkusername",
  6.             data: datastring,
  7.             success: function(response){
  8.                 var resp = jQuery.trim(response);
  9.                 if (resp == 'FALSE'){
  10.                     $('.toggleSuccess').show();
  11.                     $('.toggleFailure').hide();
  12.                 }else{
  13.                     $('.toggleFailure').show();
  14.                     $('.toggleSuccess').hide();
  15.  
  16.                 }
  17.             }
  18.         });// .ajax()
  19.  
  20.         return false;
  21.         });
When I click the button the divs hide/show as they should. This doesn't work:

Expand|Select|Wrap|Line Numbers
  1. <input name="submit" type="submit" onclick="validateUser();" />
  2.  
  3.     //form submit validation
  4.     function validateUser(){
  5.     var datastring = $('form#myForm').serialize();
  6.     $.ajax({
  7.         type: "POST",
  8.         url: "index.cfm?event=checkusername",
  9.         data: datastring,
  10.         success: function(response){
  11.             var resp = jQuery.trim(response);
  12.             if (resp == 'FALSE'){
  13.                 $('#myForm').submit();
  14.             }else{
  15.                 $('.toggleFailure').show();
  16.                 $('.toggleSuccess').hide();
  17.  
  18.             }
  19.         }
  20.     });// .ajax()
  21.     return false;
  22.     };//.post EOF
  23.  
How can I get the form to submit if resp == false?
Aug 18 '09 #5

gits
Expert Mod 5K+
P: 5,390
try:

Expand|Select|Wrap|Line Numbers
  1. onclick="return validateUser();"
the code itself looks good to me, but i guess the form was submitted onclick in any case? so the above hint should work? ... or just use a input-type "button" instead of submit ....

kind regards

btw: what didn't work with the fixed solution above? ... the form is submitted (posted) in any case and then the callback should be executed ... and just returned true or some toggling and false in that case? it couldn't have the submit avoided, but the serverside could have taken care of the validation and send something back that could be processed by the callback ...?
Aug 18 '09 #6

Haitashi
P: 96
Oke. Made some modifications. It works! Only 1 small issue. When the user enters a valid username, he has to click on the submit button twice. Odd.

Expand|Select|Wrap|Line Numbers
  1. $(function(){
  2.     var validusername = false;
  3.  
  4.     $("#myForm").submit(function(){
  5.         return validusername;
  6.     });
  7.  
  8.     $('#username').blur(function(){
  9.         var datastring = $('#myForm').serialize();
  10.         $.post(
  11.             "index.cfm?event=checkusername",
  12.             datastring,
  13.             function(response){
  14.                 var resp = jQuery.trim(response);
  15.                 if (resp == 'TRUE'){
  16.                     validusername = true;
  17.                 }
  18.                 else{
  19.                     $('.failure').show();
  20.                 }
  21.             }
  22.         );
  23.     });
  24. });
Aug 18 '09 #7

gits
Expert Mod 5K+
P: 5,390
nope ... i think that the first time the variable is false and the second time the validation was ok and therefor it works the second time click. basicly i just could repeat my suggestion to submit the form on validation success ... i think something like:

Expand|Select|Wrap|Line Numbers
  1. <input name="submit" type="button" onclick="validateUser();" />
  2.  
  3. //form submit validation
  4. function validateUser(){
  5.     var datastring = $('form#myForm').serialize();
  6.  
  7.     $.ajax({
  8.         type: "POST",
  9.         url: "index.cfm?event=checkusername",
  10.         data: datastring,
  11.         success: function(response){
  12.             var resp = jQuery.trim(response);
  13.  
  14.             if (resp == 'TRUE'){
  15.                 $('#myForm').submit();
  16.             } else {
  17.                 $('.toggleFailure').show();
  18.                 $('.toggleSuccess').hide();
  19.             }
  20.         }
  21.     });
  22. };
  23.  
should work ... i changed the button type and the submit-condition. when using ajax you don't really need a 'real' submit button.

kind regards
Aug 18 '09 #8

Post your reply

Sign in to post your reply or Sign up for a free account.