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

Show alert when leaving form except for submit button

本文关键字：提交按钮离开表单显示更新时间：2023-09-26

我使用以下代码来执行检查，当试图离开表单时，表单是否已被更改，并在必要时显示警报。不幸的是，我还没有弄清楚如何在点击提交按钮时避免警报。

    <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>

提前感谢您的帮助!亲切的问候

有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>

有帮助吗?

使用一个变量来告诉你是否要提交表单。

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;
};