automatically post form when leaving page - javascript

This is a plain javascript question.
I have a page C in which sits a textarea T.
T's content gets added to by clicks on various buttons on C (essentially T accumulates the list of times at which the buttons were clicked).
There is also a button to submit the contents of T by a post request to a server (T being surrounded by a form element).
When the user forgets to click the submit button and closes the page's window, I want the posting of T's contents to happen anyway, just as if the user had clicked the submit button before closing the window.
I know I can intercept the page closing and prompt the user to do the submit, but that is NOT what I want.
It seems to be impossible to submit the form containing T from inside a function that is called by onbeforeunload.
Thanks for any tip.

This is simply not possible : this is a security measure designed to ensure a site can't prevent a user instantly leaving a page if he wants to.
The best you can do is posting your form using ajax each time a field is changed.

I've used this code in part of my application - it doesn't capture any text though but you could give it a try.
window.onbeforeunload = confirmExit;
function confirmExit(){
data = $("#data").val();
$.ajax({
url: 'complete.php?data=' + data
});
}

Related

Submit Lotus Notes XPage form from outside with plain JS

I have a simple Lotus Notes XPage with only an editable RichText dialog that is embedded in a bigger form using an iframe.
The bigger form has a submit button, which triggers some javascript and finally a notes agent which saves all non-richtext values that are inside the bigger form.
Of course the user shall not have to use two submit buttons, so I won't have a (visible) submit button for the XPage. Instead, I want to use javascript to tell the iframe to submit the form.
Using iframe.document.forms[0].submit() does not work - the form is indeed submitted to the Notes server, but XPages won't save the changes I made.
Using a simple XPage button with the action "Save Data Sources", saving works like a charm, but I don't want the user to have to click two buttons in the correct order.
I also tried the following javascript code to fill some invisible fields with the values that IBM submits to the server, but this does not help either:
iframe.document.forms[0].elements["view:_id1:inputRichText1_h"].value = iframe.document.forms[0].elements["view:_id1:inputRichText1"].value;
iframe.document.forms[0].elements["view:_id1:inputRichText1_mod"].value = true;
iframe.document.forms[0].elements["$$xspsubmitid"].value="view:_id1:_id4";
iframe.document.forms[0].elements["$$xspsubmitscroll"].value="0|0";
iframe.document.forms[0].submit();
So now I ask you: how to correctly submit that form content, without the user actually clicking the XPages button? Can I programmatically trigger a click on that button, which would be indifferent from a human actually clicking, except for the human?
have an ordinary div with a fixed id and inside this div have a computedtext that will compute the clientsideid of the "save button" and return that inside the div
and use this clientside js code to do the actual click
var id=iframe.document.getElementById("button").innerHTML
var button=iframe.document.getElementById(id)
button.click()

Is Javascript code being processed after clicking on a submit button?

I am working on a ECommerce Project. During the checkout process there is the button to purchase the item at the end of the checkout process. Clicking on that button submits the form on the page using a POST request (Standard, no AJAX). However, if you click on that submit button multiple times really quick, multiple POST Requests are sent to the server and so there are also multiple Orders being created.
My Question: Is it save to prevent these multiple button clicks by javascript, or is the page in a weird state at some point because the new page load kicks in?
Is there a difference about that if I do it with inline script:
onsubmit="if(submitted) return false; submitted = true; return true"
Or in my JS external file?
Another option would be to disable the submit button right after the form submit, but IE adds really Ugly Font Color to the button, which cannot be removed by CSS.
The page continues to process events and run javascript until the form Post returns new content which then replaces the current document, thus loading a new document. It is not in a weird state and works normally until the new content arrives and the current document is closed.
There are various techniques for preventing multiple presses of the button. Your code can keep track of the fact that a post has already been sent (in a global variable) and block any more being sent whenever that variable is set. In the UI, you can disable the button as soon as the first post is initiated so the button can't be pressed again.

Selectively POST to new browser window

I've got a form that has three submit buttons for posting back data for different scenarios.
Each one POSTs to different actions on a controller, however for one of them I need to POST back to a new browser window.
Is this possible? I know I can add a target="_blank" to the form, but that will open a new window for all of the submit buttons...
UPDATE:
Currently, I've tried several methods to get this working and I've completely failed, my current non-working code looks like this:
$("input[type=submit]").click(function (e) {
var form = $("form.filter-execution-form");
if ($(this).hasClass("run-report"))
$("form.filter-execution-form").attr("target", "_blank");
else
$("form.filter-execution-form").removeAttr("target");
});
Does anyone have any ideas to get this working?
Thanks,
Kieron
See this post - use the same method to dynamically add the attribute for the submit button you want it for (ie add it to the onclick event of your submit button you want to add this support to)
How do I add target="_blank" to a link within a specified div?
There are probably a number of different ways to do this. The easiest I can imagine is when the submit button is pressed in the first window, you open a new window with a URL (on the same domain) that has the desired form in it (may have to watch out for pop-up blockers). Then, transfer the data that has been entered from your existing form to the form in the new window. Call a javascript function in the new page that tells it to submit the form.
In the form set target="postWindow" or any other name that is the same throughout, and it will always post to that popup (if it was not closed).
The best way I can think of doing this (and it might not be the best way of doing it) would be using JavaScript.
When you click the button, prevent it doing anything but run some javascript instead, open a new window on a blank page, with a hidden form in it, use javascript to transfer values from your form to the new pop-up form, submit the pop-up form & do something with original page to show an action was taken.

Confirm dialog box on unload/exit UNLESS the back button is pressed?

I have some simple code to display a confirm dialog box when the user tries to leave my form:
window.onbeforeunload = askConfirm;
function askConfirm(){
return "Your answers will be lost.";
}
But this is a multi-page form and they frequently press back to change some values on a previous page.
But when they do this dialog box still comes up.
Is there a way around this?
The answer I would suggest unfortunately doesn't actually answer your question but is a solution of a kind. The only possible solution here, imv, is to make sure that a user clicking the back button doesn't actually create an issue by storing the form answers from all pages. In the case of PHP I would store them in a session ($_SESSION). You have to recognise that users use the back button more than any other UI element within a browser. If your form truly has to be across a number of pages then you need to make sure the data they have entered is persistent across all these pages. I would actually provide a navigation for this within your own interface. Provide a clear sequential process visually and allow instant navigation through this process where possible.
I don't see a way to specifically detect whether the user pressed "back" or any other browser button. This is outside the site's scope.
Only one solution comes to mind: Show the confirmation dialog only when a global flag has been set to "true".
if (ask_when_exiting == true)
return "Your answers will be lost.";
You would have to set the variable to true? in the onclick event of every link that you want the confirmation to pop up for. You should be able to mass apply this event to every link on your page using JQuery or another JS framework (Seomthing like $$('a').each()....).
However, this will disable the confirmation for reloading the page, or any other event that is not triggered using a control on the page like typing in another URL or closing the browser, as well.

How to get form input inside ModalBox with jQuery

I am developing my website using jQuery. For the Private Messaging feature, what I had right now is showing a ModalBox (dialog box). So, whenever user wanna check message, they will be displayed with a dialog box with the inbox shown. Now, inside that ModalBox, I have a "Compose" section where users can send message. My question is, when user submits the form, how we could retrieve those inputs without having to actually submit it? Because, I have tried it..., that when I do the submit(), it closed the ModalBox.
Any help would be appreciated.
Since you're using jQuery, see here
In case you're not familiar with AJAX, basically it allows you to send a request to the server (in this case, your submitted data), process the data on the server, and then receive any return back from your request, all without reloading the entire page.
This should alleviate the issue of the modal box closing (the page reloading upon submit, really.)
[edit]
See this article from here at StackOverflow on using the live event handler. This should take care of the issue of not getting the value from newly created DOM elements.
[/edit]

Categories

Resources