onclick not suppressing the submit

[ginerjm]

OK - I've done this before, but I'm having a problem now. 

 

I have a form with a submit button declared as

<input type="submit" name="btn" value="Log In" onclick="return handleLogin('LogIn')">

 

The onclick routine - after much debugging - is working and at the end of its processing I have this:

allText = myreq.responseText;
rtnval = handleResponse(allText);
if (rtnval)
{
     alert("returniing to button with true");
     return true;
}
else
{
    alert("returniing to button with false");
    return false;
}				

 

The alerts are displaying that the return value is "false", yet my original button performs the submit, which I know because the script in the form's action is being called - when it shouldn't be.

 

I hope I've provided enough info - does anyone see what I'm not?

[lemmin]

I found the error. You have an extra 'i' in "returning!" Just kidding.

 

Try attaching that function to the onsubmit event of your form instead of the submit button:

 

<form onsubmit="return handleLogin('LogIn')">
[code]

[ginerjm]

Nice idea, but I need to know which 'submit' button was clicked.

[Adam]

Are the return statements within a callback? Can you show the whole code please.

[ginerjm]

This is the js that is called from the submit buttons.

   function handleLogin(btn)
   {
      var uid = document.getElementById('uid').value;
      if (uid=='')
      {
         alert("You must enter a name");
         return false;
      }
      var pswd = document.getElementById('pswd').value;
      if (pswd=='')
      {
         alert("You must provide a password");
         return false;
      }
      /*  Now do an xmlhttprequest to validate the credentials
         Returned value will be similar to above returned values */
      url="http://jimginer.net/bowling_login.php?uid="+uid+"&pswd="+pswd+"&btn="+btn;
      alert("in js_login_test.php calling bowling_login via xml");
      /* create a var to do the process */
      var myreq = new XMLHttpRequest();
      myreq.open("GET", url, true);
      myreq.send(null);
      myreq.onreadystatechange =
         function()
         {
            if (myreq.readyState == 4)
            {
               if (myreq.status == 200)
               {
               /*  handle the data returned from the above GET request */
                  allText = myreq.responseText;
                  rtnval = handleResponse(allText);
                  if (rtnval)
                  {
                     alert("returniing to button with true");
                     return true;
                  }
                  else
                  {
                     alert("returniing to button with false");
                     return false;
                  }
               }
               else
               {
                  alert("Error processing login attempt - message follows: "+myreq.statusText);
                  return false
               }
            }
            else
            {   }
         }

   }

 

The buttons that call this function look like:

<input type="submit" name="btn" value="Log In" onclick="return handleLogin('LogIn')">
<input type="submit" name="btn" value="Register" onclick="return handleLogin('Register')">

As you can see my alerts say one thing, but my results are different.

[ginerjm]

ok - it is solved.

 

My return was created from a look at a string result.  I did not properly receive the string value of "true" or "false".  I changed it to properly convert it to Boolean and now I get a proper return.

[ginerjm]

I take it back!!

 

One test and I thought I had it, but alas... NOT!

 

So - any ideas from the code I last submitted?

[Adam]

You're only returning from the anonymous function assigned to the state change event, not the actual handleLogin() function. You need to always return false from handleLogin(), regardless of what happens with the request. Remember that the callback you assign to the XHR object isn't called for a relatively long time; handleLogin() has long since returned by that point.

[ginerjm]

I never realized that was how this worked.  It's code I lifted and have implemented 2-3 times successfully.  Apparently I should re-visit those places as well.

 

So - add a return false after the anonymouse function's place?  And so how does the result of the anonymous function call then get 'handled'?

[ginerjm]

Ok - Here's what I added:

.
.
.
      var myreq = new XMLHttpRequest();
      myreq.open("GET", url, true);
      myreq.send(null);
      rtnval=false;
      myreq.onreadystatechange =
         function()
         {
            if (myreq.readyState == 4)
            {
               if (myreq.status == 200)
               {
               /*  handle the data returned from the above GET request */
                  allText = myreq.responseText;
                  rtnval = handleResponse(allText);
                  if (rtnval)
                     alert("Got a response - returning "+rtnval);
                  return rtnval;
               }
               else
               {
                  alert("Error processing login attempt - message follows: "+myreq.statusText);
                  return false;
               }
            }
         }
         return false;  /* always return false from this function */

 

where I added the vary last line, which is now the last of my handleLogin function.

 

So my alert shows that the user has entered valid credentials and that the anon func is about to return a true value, but my submit never happens now - so I guess the return false is working well.    Are you sure that's how to end that function?

[Adam]

The result of the AJAX request should not determine whether the handleLogin() function returns true or false. The return statement is simply to stop propagation. Even if the request fails, we don't want the form to then go on and submit.

 

Are you sure that's how to end that function?

 

Yeah, although nothing will be waiting for the return values of the anonymous function, so you may as well remove them.

[ginerjm]

The whole concept here is to let the onclick function call (handleLogin) determine whether my html form is submitted. 

[Adam]

Bit odd, but okay. In the anonymous function then you will need to manually trigger the form submit (if needed):

 

document.formName.submit();

[ginerjm]

Yes - so I figured.  A whole new view of the httprequest usage.

 

Thanks for the help!