JavaScript表单打开"无限"标签

时间:2017-02-15 12:37:15

标签: javascript jquery html forms tabs

我有一个脚本,它获取一个包含字段填充的表单,并且我得到了一个代码,每隔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>`

2 个答案:

答案 0 :(得分:0)

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

它适用于My Base。

请使用您的代码尝试。

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

答案 1 :(得分:0)

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

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