Calling JS Function on Form Submit

Question

I have created a JS function which executes fine when it's included an the 'onclick' action of standard HTML link tag as follows:

<a href="#" onclick="return fb_CheckPermission('publish_stream');">test</a>

However where I really want to use this function is on the 'onsubmit' action of a form but when I include it as follows the function no longer seems to be executing:

<form action="page.pl" id="disable-submit" name="status-form" method="POST" onsubmit="return fb_CheckPermission('publish_stream');">

What the 'fb_CheckPermission()' JS function basically does is use Facebook Connect to check to make sure the user has granted us a specific permission and if not it tells Facebook Connect to prompt the user to grant the permission. Here is the code for the JS function:

1. function fb_checkPermission(permission) {
2.  FB.ensureInit(function() {
3.      FB.Facebook.apiClient.users_hasAppPermission(permission, function (hasPermissions) {
4.          if(!hasPermissions){
5.              FB.Connect.showPermissionDialog(permission,function (status){
6.                  if(!status) {
7.                      if(permission == 'offline_access') {
8.                          // save session
9.                      }                       
10.                 }
11.             });
12.         }
13.     });
14. });
15.}

What this code does is as follows:

Line 2: Make sure Facebook Connect JS library is loaded
Line 3: Checks to see if the current Facebook Connect user has granted a specific permission
Line 5: If the permission hasn't been granted then prompt the user with the permission dialog
Line 7: In the case of the 'offline_access' permission save the session key once granted

The user experience I'm trying to achieve is that when a user submits the form I'll check to see if they have granted a specific permission and if not prompt them for the permission before submitting the form. If the user has already granted the permission the form should just submit. For those users who are prompted the form should submit after they either choose to grant the permission or if the deny the request which I believe the fb_checkPermission() JS function is handling correctly right now. What I'm not sure is if there is some kind of JavaScript issue with how this works on form submission.

As I mentioned, this JS function works perfectly as an onclick action but fails as an onsubmit action so I'm pretty sure that this has something to do with how JavaScript treats onsubmit actions.

I'm stuck so I really appreciate your help in figuring out how to change the JS function to produce my desired user experience. Thanks in advance for your help!

Answer 1

The reason your "click on anchor" works is because it does not change your page (location) while all of the Facebook asynchronous calls finish.

When you attach the same function to the submit handler the function returns before Facebook stuff gets actually executed, and it does without returning "false" causing the form to proceed with submission earlier than you want it to.

What you need to do is return "false" at the end of your onSubmit function to prevent submission and give time to Facebook stuff to finish and then manually submit form at places you want it to be submitted by calling:

document.getElementById('disable-submit').submit();

(The handler will not be called if submittion is triggered from the script.)

Unfortunately I don't have Facebook SDK at hand so I can't write the code that I'm sure works 100%, but it's something along these lines:

function onSubmit () {
    doStuffAsynchronously(function () {
        if (everythingIsOK) {
            // proceed with submission
            document.getElementById('formId').submit();
        }
    });

    return false;
}