Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Strange Bug with onclick method

    I wrote a prompt that fires when you have unsaved changes and you try to navigate away, which listens to the window.onbeforeunload event. The problem I ran into is that not ALL links should show the message. For example, the 'submit' and 'cancel' buttons, I don't want showing the prompt. I wrote a work-around

    if (document.getElementById('waiver-submit-btn' ) != null) {
    document.getElementById('waiver-submit-btn').onclick = bypassMessage;
    }

    where it sets the boolean changesMade to false IF the navigating away is being done b/c of an accepted link.

    This works fine. I have about 10 pages I've done this for, and all of the links work except for one. I know that I have the right id for the link, and I know that the link is not null. Other than that, I have no idea how to solve this problem. Any ideas? Am I missing anything obvious?

    Thanks very much in advance for any help.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You'll need to post code to really get any help on this.

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's all the relevant code -- It works fine for both submit buttons and the waiver-cancel-link, but not the test-cancel-link...

    Link --

    <a id="test-cancel-link" href="link">Cancel</a>

    Javascript

    var changesMade = false;

    window.onbeforeunload = confirmExit;

    function confirmExit() {
    if(changesMade)
    return "You have unsaved changes on the page.";
    }

    function formChange(){
    changesMade = true;
    }

    function bypassMessage(){
    changesMade = false;
    }

    if (document.getElementById('test-submit-btn' ) != null) {
    document.getElementById('test-submit-btn').onclick = bypassMessage;
    }

    if (document.getElementById('test-cancel-link' ) != null) {
    document.getElementById('test-cancel-link').onlick = bypassMessage;
    }

    if (document.getElementById('waiver-submit-btn' ) != null) {
    document.getElementById('waiver-submit-btn').onclick = bypassMessage;
    }

    if (document.getElementById('waiver-cancel-link' ) != null) {
    document.getElementById('waiver-cancel-link').onclick = bypassMessage;
    }

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    try just putting an "onclick" event handler on your submit button.
    Code:
    <input type="submit" onclick="bypassMessage()" />

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That won't work. I'm including tags from a much larger project, which I'm not allowed to change (which automatically make the cancel and submit buttons) so instead I have to use the listen to the onclick methods.

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Try using this in the body's on load handler it should grab all of your input elements and check to see if they are a submit or reset button, and if they are assign a on click event to them:
    Code:
    function prepareByPass(){
         var input_items = document.getElementsByTagName('input');
         for(i=0; i<input_items.length; i++)
              el = input_items[i].getAttribute('type');
              if(el == 'submit' || el == 'reset'){
                   input_items[i].onclick = bypassMessage();
              }
          }
    }
    Is that something like what you're looking for?

    Also on your confirmExit function you may want to do something more like this:
    Code:
    function confirmExit(){
         if(changesMade){
              confirm("You have unsaved changes on the page. Hit cancel to return and save your changes");
         }
    }
    That way users will be able to cancel their navigation away from the page.
    Last edited by ninnypants; 07-31-2008 at 11:59 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •