Calling JS Function on Form Submit
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;
}
Russell C.
Updated on July 09, 2022Comments
-
Russell C. almost 2 years
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!
-
Russell C. about 14 years@Pattersonc - I'm not quite sure what you mean. Do you mean adding it as an onclick action for the form submit button? I'd prefer to do it onsubmit in case the user hits return from one of the form fields to submit the form which I believe wouldn't trigger an onclick action - correct?
-
pattersonc about 14 years@RusselC - Yes. In my tests, if the user hits return from one of the fields the javascript should still fire.
-
pattersonc about 14 yearsAfter reading Marco's answer, I agree that your problem is not the whether the javascript is being called but the fact that you don't immediately know the result.
-
Russell C. about 14 years@Marko - What you're saying makes sense but it doesn't seem to work. I updated the onsubmit action in the <form> tag to include 'return false;' after the call to the JS function and then updated my JS function to submit false pretty much everywhere just to see if I could stop the form submission. Unfortunately no matter what I do the form seems to submit. Is there a way to change the JS function so it waits for each async call before continuing? I think that might help solve my problem. Not sure what else to try.
-
Marko Dumic about 14 yearsOne thing comes to mind: It is possible that there is an error somewhere in your code. That would also terminate the script and allow the submission to proceed. If you're using Firefox/Firebug, put "console.log('...')" just before "return false" to see if it actually runs through to return statement.
-
Russell C. about 14 yearsgood minds think alike. I basically decided to build the function from scratch again with alert statements after each new element to figure out the order things were firing and where issues where occurring. I thought I had the issue solved but then it seems to be failing on a couple of our forms. Your suggestion definitely sent me in the right direction so thanks so much for the help!
-
Russell C. about 14 yearsI just figured out the solution. It looks like I named the submit button on some of my forms 'submit' which made the JS unable to process the submit() action. I finally found the solution here beutelevision.com/blog2/2009/09/15/…