Question

我正在使用以下代码执行检查表单是否在尝试离开表单时已被更改，并在必要时显示警报。不幸的是，我还没有想出如何在单击提交按钮时避开警报。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
    $('#formrf').data('serialize',$('#formrf').serialize());
      // On load save form current state

$(window).bind('beforeunload', function(e){
        $('#formrf').bind('submit', function () {
        $(window).unbind('beforeunload');
    });
    if($('#formrf').serialize()!=$('#formrf').data('serialize'))return true;
    else e=null;
    // i.e; if form state change show box not.
});

window.onbeforeunload = function (e) {
if (!change)
    {
    return;
    }


    var message = "Die eingegebenen Formulardaten werden aus Sicherheitsgründen nicht gespeichert und gehen beim Verlassen des Formulars verloren! Sind Sie sicher, dass Sie die Formularseite verlassen möchten?";

    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = message;
    }

    // For Safari
    return message;
};
</script>

Thx提前为您提供帮助！亲切的问候

有html

<!DOCTYPE html>
<!--

[if lt IE 8]>      <html class="no-js lt-ie10 lt-i…

-->
<!--

[if IE 8]>         <html class="no-js lt-ie10 lt-i…

-->
<!--

[if IE 9]>         <html class="no-js lt-ie10" lan…

-->
<!--

[if gt IE 9]><!

-->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation pos… webworkers applicationcache svg inlinesvg smil svgclippaths" lang="de" style="" slick-uniqueid="3">
    <!--

    <![endif]

    -->
    <head></head>
    <body id="top" class="win firefox gecko fx31 vision-sidebar-right">
        <div></div>
        <div id="nav-bg-sub"></div>
        <div id="nav-bg"></div>
        <header></header>
        <!--

        [if lte IE 8]>
                <div class="warning-div" style="w…

        -->
        <section id="image-main"></section>
        <div id="wrapper">
            <section id="content" role="main">
                <div id="rechtsfrage-stellen" class="mod_article first last block">
                    <div class="ce_text first block"></div>
                    <!--

                     indexer::stop 

                    -->
                    <div class="ce_form tableless block">
                        <form id="formrf" class="multipage form_page_1" enctype="multipart/form-data" method="post" action="rechtsfrage-stellen.html">
                            <div class="formbody">
                                <input type="hidden" value="auto_form_3" name="FORM_SUBMIT"></input>
                                <input type="hidden" value="404f60896c17b4540d203becf8193ca0" name="REQUEST_TOKEN"></input>
                                <input type="hidden" value="12582912" name="MAX_FILE_SIZE"></input>
                                <input type="hidden" value="1" name="FORM_PAGE"></input>
                                <input type="hidden" value="" name="Rechtsfrage_form"></input>
                                <input type="hidden" value="" name="Kundennummer"></input>
                                <input type="hidden" value="" name="Mandatsnummer"></input>
                                <input type="hidden" value="" name="AGB-Version"></input>
                                <div class="steps_wrap"></div>
                                <div class="steps_wrap"></div>
                                <div class="steps_wrap"></div>
                                <div class="headline"></div>
                                <div class="explanation"></div>
                                <div id="leftie">
                                    <p></p>
                                    <p></p>
                                    <p></p>
                                    <p></p>
                                    <p></p>
                                    <p></p>
                                    <p></p>
                                    <p></p>
                                    <div class="explanation" style="display: inline-block; width: 76%; margin-bottom: 0px;"></div>
                                    <p></p>
                                </div>
                                <!--

                                 indexer::stop 

                                -->
                                <div class="submit_container form_page"></div>
                                <!--

                                 indexer::continue 

                                -->
                                <script></script>
                                <script></script>
                            </div>
                        </form>
                    </div>
                    <!--

                     indexer::continue 

                    -->
                </div>
                <a class="top" href="rechtsfrage-stellen.html#top" title="Top"></a>
            </section>
            <aside id="sidebar-secondary" class="sidebar"></aside>
        </div>
        <footer></footer>
        <script src="files/vision/js/script.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script></script>
        <script src="assets/swipe/2.0/js/swipe.min.js"></script>
        <script></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script></script>
        <script src="assets/jquery/colorbox/1.4.31/js/colorbox.min.js"></script>
        <script></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script></script>
        <script src="assets/js/placeholders.min.js"></script>
        <script></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script></script>
        <script></script>
        <div id="cboxOverlay" style="display: none;"></div>
        <div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;"></div>
    </body>
</html>

有帮助吗？

Answer 1

使用变量来判断您是否提交表单。

var submitting = false;

$("#formrf").submit(function() {
    submitting = true;
});


window.onbeforeunload = function (e) {
    if (!change || submitting)
    {
        return;
    }


    var message = "Die eingegebenen Formulardaten werden aus Sicherheitsgründen nicht gespeichert und gehen beim Verlassen des Formulars verloren! Sind Sie sicher, dass Sie die Formularseite verlassen möchten?";

    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = message;
    }

    // For Safari
    return message;
};

离开表单时显示警报，提交按钮除外

1 个答案: