Jump to content

Executing Code After Submitting A Form


ShadowMage
 Share

Recommended Posts

Just a quick question, when you submit an html form via document.form.submit() can you still execute code after that? Or possibly, submit to a new window? I know there's a target attribute for forms, but it's deprecated so is there another way?Thanks,jkloth

Link to comment
Share on other sites

A form submission clobbers your document, because the window is now waiting for a new document. So, no, code will not run after submission. I assume, since you're using the form.submit() method, that you already know how to intercept a form submission and run code before the form submits.It might help if you explained what you're hoping to accomplish. There might be a solution involving server-side behavior or even just cookies.

Link to comment
Share on other sites

I have a page that opens a new window to enter some data into a form. The form is submitted which writes data to a database. After that I need to refresh the parent window so that the data that was just written to the db can be accounted for.I planned on using opener.location.reload after the form was submitted but I don't think that will work.Does this help?

Edited by jkloth
Link to comment
Share on other sites

Yeah, these are tricky matters, and the roadblocks have been put up for the sake of security. Finding ways around them usually leads to a kludge, and no guarantee it will work next month.If the original page is going to be refreshed anyway, why doesn't it replace itself with the form instead of opening a window for the form? I'm probably missing a step somewhere, but on the surface the new window seems like a wasted step.

Link to comment
Share on other sites

Or perhaps you have an alternative to the real reason I need the parent to refresh. In the PHP I have it pulling information from the database and then it writes some html <div> tags that are used as popup tips when the user hovers over certain items on the form. The only way I could think of to write these <div> tags was to save data to the db then refresh so it pulls out the new data and writes a <div> for it.Is there another way to do this? I could use JavaScript but that would require a VERY long segment of code.

Link to comment
Share on other sites

So right now, the user clicks on something, and the new window opens. What if they clicked on something, and a new section of the original document opened up? The new section would contain the form, and the old information would be visible at the top of the page (or wherever you like). This could be as simple as toggling the form's CSS display property from "none" to "block". You've probably seen this effect on other pages.It's worth noting too that the default mode for opening new windows in a lot of browsers is to open a new tab. This is a user preference. Seems to me that this would defeat your intention, since one tab renders another invisible. Also, a lot of users keep pop-up windows from opening at all, and that too is usually a factory default.

Link to comment
Share on other sites

Or perhaps you have an alternative to the real reason I need the parent to refresh. In the PHP I have it pulling information from the database and then it writes some html <div> tags that are used as popup tips when the user hovers over certain items on the form. The only way I could think of to write these <div> tags was to save data to the db then refresh so it pulls out the new data and writes a <div> for it.Is there another way to do this? I could use JavaScript but that would require a VERY long segment of code.
So you're posting data to the server ONLY so that PHP can process it and spit it back? I can see that if it's also pulling info from the database that would change depending on the user's input. But if it's only to process it and draw a new page, that sounds inefficient. A long piece of javascript might be preferable.And who knows. Maybe it doesn't have to be as long as you think. Adding and deleting divs, or simply restyling divs, can be pretty easy. Like, these popup divs could be part of the original document, and then you just change the text content (easy) and change some CSS that makes them appear during a :hover (also easy). Or if the tips are connected to javascript, then maybe you just change a flag variable that indicates they should now be functional (also easy).
Link to comment
Share on other sites

I just thought of something, what if I wrote the form in a <div> tag similar to the popups I'm using and toggled visibility when the user clicks on the link. Only problem with this is how can I get it so that the user can drag it around to get it out of the way of the other information?As for the browser blocking popups, that's not an issue since this system is on a company intranet and all of our browsers are configured to allow popups from there. The new tab thing, possibly but I have my browsers configured to open windows in tabs and the new window still opens.

Link to comment
Share on other sites

Drag and drop techniques exist, and some library code exists that you could download. You might Google it.Would that really be more convenient than scrolling?Maybe. I'm still not getting a good sense of how all this works. Not your fault; it's just a complicated interface.Maybe an option is window.showModalDialog(), which is designed to return information to the opening document, and then the original page could post the form (which might even be made entirely of hidden elements). The method is supported by Firefox (since version 3) and IE, and by now some other browsers also. Since you seem to know your users, maybe you can know in advance if this method is universally available to them. The Mozilla link contains a link to the corresponding IE page.https://developer.mozilla.org/en/DOM/window.showModalDialog

Edited by Deirdre's Dad
Link to comment
Share on other sites

Thank you DD for your efforts and reference to the showModalDialog() function. That could possibly be an option.I didn't notice this post before, you probably posted as I was switching back and forth:

So you're posting data to the server ONLY so that PHP can process it and spit it back? I can see that if it's also pulling info from the database that would change depending on the user's input. But if it's only to process it and draw a new page, that sounds inefficient. A long piece of javascript might be preferable.And who knows. Maybe it doesn't have to be as long as you think. Adding and deleting divs, or simply restyling divs, can be pretty easy. Like, these popup divs could be part of the original document, and then you just change the text content (easy) and change some CSS that makes them appear during a :hover (also easy). Or if the tips are connected to javascript, then maybe you just change a flag variable that indicates they should now be functional (also easy).
The PHP creates a new <div> with the information that was just entered. We are a skylight manufacturing company, so the information stored in the databases is specs on skylights. Now obviously a customer can order more than one style of skylight so I create a <div> for each type of skylight already on the order. When a new skylight is added the PHP refreshes and writes a <div> for that skylight. Does this make sense?
Link to comment
Share on other sites

Instead of a refresh, AJAX might be the better way to interact with your server. There's a learning curve there, but the improved user experience makes it worthwhile, if not for this project, then certainly for the future.

Link to comment
Share on other sites

AJAX is a world I know nothing about. I have never even heard of it until I started browsing around for help on JavaScript issues, so I assume they're at least related. Are there libraries or anything that would need to be installed on the server or clients to use it?

Link to comment
Share on other sites

AJAX is a world I know nothing about. I have never even heard of it until I started browsing around for help on JavaScript issues, so I assume they're at least related. Are there libraries or anything that would need to be installed on the server or clients to use it?
Asynchronous Javascript And XMLI'm not sure about libraries, but it essentially lets you make server-side requests to update page content without having to refresh the browser window.
Link to comment
Share on other sites

AJAX requires no plugins or anything of that ilk. This is part of its growing popularity. Any relatively recent browser has automatic access to it.The only thing you MIGHT have to watch out for is if your users have old versions of IE (6 and under, I think, or maybe 5.5 and under?), because they use an activeX object for AJAX, and some offices like to disable that. But if your office does not disable activeX, you should be good. You're good anyway if your IT people keep your software updated, because newer versions of IE use the now-standard httpRequest object for AJAX, and as far as I know, this cannot be disabled.When I first learned AJAX, I thought I'd found the gold under the rainbow. It's old hat to me now, but when you get it right for the first time, it's a pretty awesome experience.

Link to comment
Share on other sites

So where's a good resource for me to learn AJAX? I didn't see anything on W3Schools but maybe I overlooked it. I think I might want to give this thing a try.*Edit*Upon taking a second look, I did find it on W3Schools, but any other resources are welcome.

Edited by jkloth
Link to comment
Share on other sites

The Schools tutorial is enough to get you started. Just remember that your PHP response should NOT be a complete HTML document. Return only the data you'll be using. A simple echo statement will suffice. The data could be as simple as a success/failure byte, a word or two, some JSON objects, some innerHTML, etc.

Link to comment
Share on other sites

Is there any reason it shouldn't be a lengthy string of HTML? Is it just performance reasons, or are there other reasons.Aside from that, thank you very much for your help. I think I'm gonna give this AJAX a try. See what I can do with it.Thanks again,jkloth

Link to comment
Share on other sites

Performancewise, think of it this way. How many seconds does it take to download a 2K image? Not too long, right? So if you're transmitting less than 2K of data, it'll arrive pretty fast. And if this all takes place on your company intranet? Blazing fast. I routinely send 20K and it's an eyeblink, really.You can totally send a bunch of HTML and insert it when it arrives. Just make sure (obviously) that it's the kind of HTML that inserts. Table rows and select options require special insertion methods. But if it's like a <div> with some paragraphs and text and maybe some form elements, then a simple assignment should work. E.g.SERVER SIDE:$str = '<div class="special"><h3>Deluxe Faucet</h3><p>This totally awesome faucet mixes hot water with cold . . .</p></div>';echo $str;exit;CLIENT SIDEvar my_element = document.getElementById("container");my_element.innerHTML += httpRequestObj.responseText;I used += in case you wanted to append the new <div> to existing content.

Link to comment
Share on other sites

Awesome, thanks again DD for all the help you've given me. This has definitely given me some very valuable information and insight into how I should pull this project together. AJAX for sure sounds like the way to go for me. There have been a number of things that I've been trying to do without reposting all the information from my forms, but this sounds like it might be the answer to my problems. :)Thank you once again DD for your help

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...