JavaScript 表单打开“无限”选项卡答案

【问题标题】：JavaScript form opens "infinite" tabsJavaScript 表单打开“无限”选项卡
【发布时间】：2017-02-15 12:37:15
【问题描述】：

我有一个脚本，它可以获取一个由自己填写的字段的表单，并且我有一个代码可以每隔 x 秒自动提交一次表单。

问题是我在表单中添加了这个属性（target="_blank"），但是表单继续执行代码并无限地创建一个新选项卡。

我希望我的脚本创建一个新选项卡来处理表单，并在我的脚本第二次执行时使用相同的选项卡来刷新处理页面。

我可以在 JavaScript 中做到这一点吗？

<form target="_blank" name="myForm" id="myForm" action="process.asp" method="post">
        field 1:<input type="text" name="field1" id="field1" /><br>
        field 2:<input type="text" name="field2" id="field2" /><br>
    </form>

    <script type="text/javascript"> // code which executes the submit of form operation 
            window.onload=function(){
                var auto = setTimeout(function(){ autoRefresh(); }, 100);

                function submitform(){
                    document.forms["myForm"].submit();
                }

                function autoRefresh(){
                    clearTimeout(auto);
                    auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
                }
            }
    </script>`

【问题讨论】：

标签： javascript jquery html forms tabs

【解决方案1】：

请尝试使用此代码（使用 Ajax）。它将帮助您使用 ajax，它不会打开任何新选项卡并帮助提交带有上次更新日期和时间的表单。

它适用于我的基地。

请用您的代码试一试。

<html>
    <head>

    </head>
    <body>
        <form target="_self" name="myForm" id="myForm" action="process.asp" method="post">
            field 1:<input type="text" name="field1" id="F1" />
            <br>
            field 2:<input type="text" name="field2" id="F2" />
            <br>
            <p id="LastDt"></p>
        </form>

        <script type="text/javascript"> // code which executes the submit of form operation 
            window.onload = function () {
                var auto = setTimeout(function () {
                    autoRefresh();
                }, 100);

                function submitform() {

                    if (window.XMLHttpRequest)
                    {
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp = new XMLHttpRequest();
                    } else {
                        // code for IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                            document.getElementById("LastDt").innerHTML = "Last Update : " + new Date();
                        }
                    };

                    // It send data on process.asp (silently).
                    xmlhttp.open("POST", "process.asp?field1=" + document.getElementById("F1").value + "&field2=" + document.getElementById("F2").value , true);
                    xmlhttp.send();
                }


                function autoRefresh() {
                    clearTimeout(auto);
                    auto = setTimeout(function () {
                        submitform();
                    }, 10000);
                }
            }

        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

您可以在process.asp 中添加相同的表单，并在第一次提交后打开新选项卡...使用postMessage API 将数据传递到其他选项卡并从那里提交。

或者您可以将数据存储在 localStorage 并使用 storage events in process.asp 来监听更新并发布数据

【讨论】：