Monday, March 10, 2008

Cowbells Without Retakes

No More Interruptions By The Record Label Execs!:
Those of you who read "More Cowbell" article about embedding new Google forms in web pages may have noticed the line:

"To keep your web page from redirecting to the google success message and requiring your users to press the 'back' button, simply add:
target="_blank"
to the form tag prior to the action attribute.
"

at the bottom of the article. It has also been noted in the Google Docs user forums that the forms would be more useful for multi-entry data input if they didn't redirect when the user hit the submit button. Even using the _blank suggestion mentioned above, you'll quickly wind up with an annoyingly large number of 'Thank You' tabs or windows depending on you browser. Well, it turns out, there's an answer to this problem!

Immediately before the form tag, insert the following line of html:

 < iframe name="catcher" height="0"></iframe > 

Then, in the form tag, modify the target attribute so that it looks like:

target="catcher"

Voila! The record input confirmation screen is redirect to the 'zero' height iframe. The new horizontal bar you see immediately above the form below is the catcher iframe mentioned here.




Turn up the:
  • Cowbell
  • Bass
  • Lead Guitar

powered by Google Docs
Terms of Service
-Additional Terms


And that's it folks.
No more interruptions from the label between takes!

Of course, with the form in its current state, the data entry person has to have quite a bit of faith that they actually clicked the submit button. Would anyone like to contribute a piece of scriptaculous javascript code that would highlight the form background in light green with a fad after the submit button is pushed? Please? :)

9 comments:

Dumuro said...
This comment has been removed by a blog administrator.
Anonymous said...

I'd assume that starting some timer upon clicking submit could do some magic...?

Anonymous said...

And if setting the height to a few pixels (combined with CSS overflow: hidden), just enough to display your customized thank-you message, the visitor would get some indication about what happened!

Arjan said...

Allright, assuming the "catcher" iframe does not catch any validation errors (so, either do your own input validation before submitting the form to Google, or do not define any validation in your Google forms definition at all), then the following works:

< script type="text/javascript" >
function setCatcherOnload(){
// We cannot set the onload using
// < iframe onload = '' >
// as then it would fire right after the initial load as well...
// So: add at runtime.
document.getElementById('catcher').onload =
function(){
parent.location.href = "thankyou.html";
};
}
< /script >

< body onload = "setCatcherOnload();" >

< iframe name="catcher" id="catcher height="0" >< /iframe >

Instead of using the body onload I in fact prefer using jQuery's ready() function. And of course, there's nothing wrong with giving Google some credits!

Arjan said...

Errr, but not in Internet Explorer (7 on WinXP Professional). To be continued...

Arjan said...

Well, I have not been able to figger out an Internet Explorer compatible version for

document.getElementById('catcher').onload = ...

At http://bytes.com/forum/thread510057.html I found some workarounds (and maybe one should use onreadystatechange or window.frames['catcher'].onload instead), but for the above Google Forms wishes, why not simply add a status variable:

< script type="text/javascript" >

var firstOnload = true;

function catcherOnload(){
// Setting the onload using
// < iframe onload = 'catcherOnload();' >
// makes the onload fire right after the initial empty iframe is loaded as well.
// So, ignore the first invocation:
if(firstOnload){
firstOnload = false;
}
else{
parent.location.href = "thankyou.html";
}
}
< /script >

< iframe name="catcher" id="catcher" onload="catcherOnload();" height="0" >< /iframe >

Again, the above assumes that the Google Docs form does not define any restriction on the input fields, or that any restrictions are enforced in the browser before submitting the form to Google. The latter would, of course, imply one would need to copy the generated Google form into ones own HTML, which is not future proof if Google decides to change something.

When not using parent.location.href to enforce a redirect, see also http://googlesystem.blogspot.com/2008/05/customize-google-docs-forms.html to hide the form after submit.

paul g. mattiuzzi, ph.d. said...

I'd like to ask about getting a response to the form. I have a test, three questions long ... What I would like to be able to do is to have the spreadsheet do some calculations and then post the results.

Something like: "Your score on this test was 66% correct."

Or: "You answered 2 out of three questions correctly."

My test is online here: http://pgm8693.googlepages.com/testforms

Thanks.
paul.

paul g. mattiuzzi, ph.d. said...

Sorry about not making the link live ... here it is again: http://pgm8693.googlepages.com/testforms

Rob said...

thanks. very cool tip.