0

Please See the following code example.

HTML:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:FileUpload ID="FileUpload1" runat="server" />

<!--  upload button and Save button -->
<asp:Button ID="Upload" runat="server" Text="Upload" />
<asp:Button ID="Save" runat="server" Text="Save" />
<a href="otherpage.aspx">Cancel</a>

JavaScript: //form is not changed by default var form_Change = 0;

window.onbeforeunload = function(e) {
if (form_Change==1){
    // if the form is changed, show a confirm box
    return 'Are you sure you want to navigate away from this page?';
}
}

$('input[type=text]').live('keyup',function(){
form_Change =1;
});

Normally,

A user typed in the textbox without saving it. Then he is trying to redirect to other page or reload the page, the bowser brings him a confirm box.

But,

I firstly type into the textbox, and then click the "Upload Button" which is used to upload files but doesn't save (doesn't affect the change of) the form (and keep the unsaved text in the textbox as it is after postback). The bowser brings me the unwanted confirm box.

I try to fix it and add something like,

var button_inside_form =0;
$('Upload').live('click',function(){
    button_inside_form =1;
});

//and update form change logic in onbeforeunload 

But, after the page post back. It reload JavaScripts, form_Change is reset to 0. so the system doesn't know whether the form is changed.

So how do I check the form is changed after I click "Upload", and don't bring back confirm box when I click "Upload".

4
  • Stop the original page submit. You do this with the (event) param, event.preventDefault(); will stop the form submit. $('#formID').submit(function(e){ e.preventDefault(); }); more specifically. This will allow you to prevent the page from reloading, and more importantly, the javascript from reloading .At this point, button_inside_form would be preserved and you could reference the updated variable and invoke the alert message as intended.
    – Ohgodwhy
    May 1, 2012 at 22:09
  • ok.. if I use e.preventDefault, how can I upload file... @Ohgodwhy
    – Dan An
    May 1, 2012 at 22:32
  • Use an iFrame, send the form to the iframe and upload it through the iframe.
    – Ohgodwhy
    May 1, 2012 at 22:35
  • thx @Ohgodwhy, iframe cause more works, Maybe I will use cookies.
    – Dan An
    May 2, 2012 at 8:59

1 Answer 1

0

Answer myself.

I use a cookies. that is turn var form_change as a cookies in JavaScript.

and then in server code, Not IsPostBack I add this to reset the cookies.

ClientScript.RegisterClientScriptBlock(Me.GetType, "IsPostBack", "var isPostBack = true;", True)

to check

if (typeof isPostBack != 'undefined') {
    resetFormChange();}

use this to prevent the confirm box on submit buttons

$('form').submit(function() {
    window.onbeforeunload = null;
});

More thinking. The cookies is required, if the form submit will remain it in the same page. form.submit will works fine, but need to make sure "UseSubmitBehaviors" need to be set on "Cancel" button. And or if cause the page stay, better to put them in a updatepanel.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.