Forms & Popups

[Connie_Goss]

I have a page with a form. I send the inputs to the next page, where I run some PHP to add the input text to a jpeg image file. Then I display the created image in a popup window using javascript.

It's all working fine, except that when the user clicks the Preview button in the first page, they next see a blank browser page, then the popup. I can't figure out how to avoid the blank page.

[johanafm]

If you have a max image width and height that you allow, and scale/crop larger images to fit, then you could do something like this

<!-- these are the "form elements", except no form is needed, since nothing is sent from here -->
<input ... />
<input ... />

<input type="button" onclick="popup_and_submit();" />

The code executed on button click will create a popup with dimensions matching the largest allowable image, create a form element add all necessary form elements to this form, using the values supplied from the page above. The popup then submits data to your php image annotator script, which returns html containing an image element for the new image file.

But if you do not have a max image width and height, you will not know how large an image is needed, or if you prefer to always create a popup being as small as possible to fit the image, then have the php annotator image script also output the same form as the user initially filled out, but this time repopuplate the form controls with the previously filled in values (except for file selection which you can't set)

[Connie_Goss]

Thank you for your reply. I have read it several times but I'm still pretty confused. I'm fairly novice at this so please bear with me. First, I need to understand the order things happen. If I have a <FORM> tag with action=somephp and onsubmit = somejavascript, does the onsubmit always execute first? The problem seems to be that I need the some.php to execute first, so it can receive the form inputs & create the image file, and THEN do the javascript popup part to display the resulting image. Is this possible? Thanks for your help.

[johanafm]

Yes, onsubmit comes before the target page of the action attribute, and can even be used to prevent form submit by returning false.

<!-- never submit -->
<form ... onsubmit="dostuff(); return false;"> ... </form>

<!-- only submit if certain condition met -->
<form ... onsubmit="return validateForm();"> ... </form>

You could of course just submit the page in the usual fashion, then have <script type="text/javascript">dostuff();</script> on the resulting page.

Or, you use javascript to process the "form" (doesn't need to be a form at all, just the input elements etc), by collecting values from the input elements, then open a popup window, then send the data using XmlHttpRequest (ajax) and handle the results in hte popup window.

And some other ways to do it as well.