The ideal way is to only show the popup alert when the user actually
has modified something on the form. So if the user visit the page,
does nothing, hits refresh, the alert should not pop up. If it does
it'll annoy the user. Add it only when the form info is changed, and
the user is not submitting the form.
A good way is like something like this:
// global variable
// false means do not alert
// default to not show alert
var showAlert = false;
// function form onbeforeunload event
function warnUser() {
if (showAlert) return 'Are you sure you want to leave?';
else return; // this should not pop up an alert if you return
null or nothing
}
// bind event
window.onbeforeunload = warnUser;
// add event check for form changes
// change depending on how your form is laid out
$("input").change(function() {
// set showAlert to true so message will pop up
showAlert = true;
});
// turn off alert when submitting
// #myForm is your form ID
$("#myForm").submit(function) {
// turn off the alert
showAlert = false;
// do any necessary validation here
if (form_is_valid) {
// do something, or nothing to let the form submit
}
else {
// no go, turn alert back on again
showAlert = true;
return false; // so form doesn't submit
}
});
On Jul 17, 5:19 am, Terry <tgshan...@excite.com> wrote:
> Thanks for the ideas. The onbeforeunload event sounds like what I
> need.
>
> I did try the hidden field already. As you guessed it does not work;
> you need to get the data to know how many fields to create dynamically
> and then it is too late to have the dynamic fields filled in I'm
> guessing.
>
> Now I have a coding question about using the onbeforeunload with
> jquery.
> The onbeforeunload event is working to stop a refresh like I want, but
> it also is prompting during a submit which I do not want.
> I can't seem to figure out how to turn off the event handler.
>
> First, is this proper way to use the event with jquery?
> Is the onbeforeunload firing before the onclick? Is this something to
> do with jquery
>
> I added the event handler to the jquery ready handler
> $(document).ready(function() {
> window.onbeforeunload = closeIt;
> $("OBBtn_Save").onbeforeunload = null; //tried this as an
> alternative to onclick with no luck
> $("#divBoxes input:last").bind("change", appendBoxField);
> $("#divBags input:last").bind("change", appendBagField);
> //alert(document.forms.length);
>
> });
>
> I created a handler
> function closeIt() {
> return "You will lose any data if you close or refresh the window
> at this point!";
>
> }
>
> and I want to remove the event handler when they submit the form
> <div id="buttons">
> <input type="submit" value="save" name="OBBtn_Save"
> onclick="onclick();" />
> <input type="submit" value="cancel" name="OBBtn_Cancel" />
> </div>
> function onclick() {
> window.onbeforeunload = null;
> return true;
>
> }
>
> Thanks,
>
> Terry
>
> On Jul 16, 7:42 pm, James <james.gp....@gmail.com> wrote:
>
> > The data is still there since the browser does a cache of the form
> > info, but dynamically created elements do not get cached in the same
> > way, unfortunately.
>
> > I haven't tried this before, but one thing you can try is to have a
> > hidden input in your form, and the purpose of this is to store the
> > number of fields you have dynamically generated. Every time you add/
> > remove fields, you update this number. Then on page load, you populate
> > the form with this many extra fields. However, since I haven't tried
> > this before, I'm guessing that the new fields will not be pre-
> > populated like the other static fields....
> > I don't think there really is any good workaround for that except to
> > constantly save the form data to a cookie or to a database (via AJAX).
>
> > Another is to use the onbeforeunload event handler which is triggered
> > right before a page is left/re-loaded, and a prompt will be given,
> > which can be canceled and the refresh will not occur. (Google Groups
> > uses this when you type a message and try to leave/refresh the page.)
> > Just do a Google search on this and you'll find out lots about it.
>
> > On Jul 16, 12:46 pm, Terry <tgshan...@excite.com> wrote:
>
> > > Hi, I have a moderate level of experience with javascript, and a good
> > > oo background. So, when I tried jquery I'm really liking it.
>
> > > I have a requirement to add input fields dynamically to the form since
> > > I don't know ahead of time how many entries the user may request. I
> > > was able to implement this with jquery very quickly with a small
> > > amount of code.
>
> > > When the form is submitted it is sent to the server with all of the
> > > data correctly passed. However, if I do a refresh, the dynamic fields
> > > go away, but the static fields still have data in them so I assuming
> > > that the dynamic data is still there.
>
> > > How can I verify this? When I show source, it only shows the original
> > > code; same even before the form is submitted. Is there a way to stop a
> > > refresh? This application may have 10 added fields or 300 added
> > > fields, and if the user does a refresh for some reason he'll want to
> > > see every thing that has been input so far.
>
> > > my code:
> > > $(document).ready(function() {
> > > $("#divBoxes input:last").bind("change", appendBoxField);
> > > $("#divBags input:last").bind("change", appendBagField);});
>
> > > function appendBoxField() {
> > > var len = $("#divBoxes input").length + 1;
> > > //alert(len);
> > > $("#divBoxes").append('<input type="text"
> > > name="_UPS_Shipping_Label_' + len + '" />')
> > > $(this).unbind("change", appendBoxField);
> > > $("#divBoxes input:last").bind("change", appendBoxField).focus();}
>
> > > function appendBagField() {
> > > var len = $("#divBags input").length + 1;
> > > //alert(len);
> > > $("#divBags").append('<input type="text" name="_photo_bag_ID_' +
> > > len + '" />')
> > > $(this).unbind("change", appendBagField);
> > > $("#divBags input:last").bind("change", appendBagField).focus();
>
> > > }
>
> > > Thanks,
>
> > > Terry- Hide quoted text -
>
> > - Show quoted text -
>
>
