www.webdeveloper.com
Results 1 to 5 of 5

Thread: stop user from leaving form before complete

  1. #1
    Join Date
    Nov 2002
    Posts
    1

    Exclamation stop user from leaving form before complete

    I am having trouble with a page that has a form on it. What I need to be able to do is to pop up a message on the page (alert or confirm function) that will tell the user that leaving this page is unwise as their information will not be sent. Here is the tricky part:

    1. This page has a lot of links on it that can take the user to any number of different pages. I am not able to put any javascript additions to the html of the links.

    2. I don't want the message to pop up when the user clicks the Finish button ( a submit or button form input, whichever works best ).

    I have added and onunload() javascript to the body of my page so that when any link is pressed (including the finish button) it runs a script to verify the pressing of the finish button. It SHOULD be checking to see if Finish was pressed and if it was continue, if not issue the confirm or alert to warn the user that they should not leave before finishing.

    I have already been through the javascript O'reilly guide and can't figure it out. In PHP (which is my primary language) I could say something like:

    if (!isset($finishbutton)) { do what I want };

    However, PHP won't work for this. I need to be able to have JS do something like this:

    if ({formelement finishbutton} has NOT been clicked) { do what I want }

    Anyone have any ideas???

  2. #2
    Join Date
    Nov 2002
    Posts
    421
    the only thing that comes to mind is:

    <script . . .
    var testIt = 0
    function fini****() { testIt = 1 . . .
    f****ion unLoad () if (testIt != 1) . . .
    </script>

    not slick but easy.

  3. #3
    Join Date
    Nov 2002
    Location
    London UK
    Posts
    154
    This would be much easier if you would let us add events to the links, but try this anyway, it works by altering the submitted variable value when the form has been submitted successfully.

    So, the first function checkform() is just a simple validation script, obviously I haven't included stacks of form controls, this is just to show that it works. If the form isn't completed when submit is clicked then the form won't submit. If the form is completed the form does submit, and the submitted variable is increased by 1, so it would now hold one.

    The checkit() function is fired by the onunload event handler when the person tries to leave the page. The function first checks the submitted variable to see if it is equal to zero, if not then the script ends here and the person will navigate to the page they wanted to go to. If the variable is eqaul to zero then we know the user hasn't submitted the form. In this case a confirm dialog box appears which warns them that they should complete the form. If they click 'Cancel' then the confirm dialog box returns false, so the decided variable will hold false. In this case neither of the inner statements will evaluate to true so they will navigate to the page they choose as normal. You may not want that, but I believe the user should always be allowed to go if they want to. Now, If they clicked 'OK' then the decided variable would hold true, in which case we only need to decide how to proceed.

    Now browsers handle the onunload event differently. When a link is clicked in IE, the current page stays the same until the script associated with the event runs, then the page will change. However under browsers like NN and Opera when the link is clicked the new page loads before the script runs. In either case we have to keep the user on the same page, so the script navigates the user accordingly.

    Note I have tested this in IE, NN, and Opera but not in any other browser. There is probably a better way of doing this but my Javascript is a bit rusty. Oh, and one last thing, this script won't help you if they close their browser completely.


    <html>
    <head>
    <script language="javascript">
    var submitted = 0;
    var decided;
    var thebrowser = navigator.appName

    function checkform()
    {
    if (document.myform.yourname.value == "")
    {
    alert("Please complete the form")
    return false;
    }
    else
    {
    submitted++
    return true;
    }
    }

    function checkit()
    {
    if (submitted == 0)
    {
    decided = confirm("It is advisable that you complete and submit the form before leaving. Click OK to complete the form.")

    if (decided == true && thebrowser == "Microsoft Internet Explorer")
    {
    location.href = location.href
    }
    else if (decided == true)
    {
    history.back()
    }

    }
    }

    </script>
    <noscript>
    <p>This page uses javascript, please update your browser blah blah blah...</p>
    </noscript>
    </head>
    <a href="alink.html">a link</a><br>
    <a href="anotherlink.html">another link</a>
    <body onunload="checkit()">
    <form name="myform" onsubmit="return checkform()" method="post" enctype="text/plain" action="mailto:michaelosullivan@connectfree.co.uk">
    Your Name: <input type="text" name="yourname" size="30"><br>
    <input type="Submit" value="Send Form" name="Submit">
    </form>
    </body>
    </html>
    Last edited by MikeOS; 11-27-2002 at 07:27 PM.

  4. #4
    Join Date
    Sep 2006
    Posts
    1
    This javascript code works good, but I can't get the proper behavior in ASP.Net. When I set the location.href=location.href, any/all information that was filled in disappears. Any ideas?

    Thanks,
    Ken

  5. #5
    Join Date
    Jul 2010
    Posts
    1
    I know this thread is old but since I was having the same issue and kept finding this thread I thought I'd post what I found.

    Here is some code that instead of using 'onunload' it uses 'onbeforeunload' which seems to solve the issue of the data disappearing.

    http://www.boutell.com/newfaq/creati...ableclose.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles