Question

我有一个脚本可以将用户的输入传递到completed.html页面，但这里有两个问题：

所有用户输入都显示在地址栏上，我想隐藏它但我不想使用POST方法，这会破坏我的JS脚本的目的。即使我必须更改JS脚本，有没有办法可以隐藏这些输入而无需更改方法？
我的JS代码真的是重复的，它重复了4次，我想知道一种更好的方式来编写它而无需复制和粘贴全部？

的index.html

<div id="container">
    <header>
        <h1>Registration Form</h1>
        <hr>
    </header>
    <article>
        <form action="completed.html" method="GET">
            <label for="FirstName"><b>First Name:</b></label>
            <input name="FirstName" type="text" placeholder="John" required>
            <label for="LastName"><b>Last Name:</b></label>
            <input name="LastName" type="text" placeholder="Doe" required>
            <label for="email"><b>Email:</b></label>
            <input name="email" type="text" placeholder="example@mail.com" required>
            <label for="password"><b>Password:</b></label>
            <input name="password" type="password" placeholder="Password here." required>
            <p></p>
            <input type="submit" value="Submit">
        </form>
    </article>
    <footer>
        Copyright @ 2017 Name
    </footer>
</div>

completed.html

<div id="container">
    <header>
        <h1>Registration Completed!</h1>
        <hr>
    </header>
    <article>
        <div id="info" style="float: left;">
            <p>Thank you for registering on our site! An verification email has been seen to your email address! To make sure we got everything right, we would like you to review the infomation you've put in.</p>
            <div id="fn">
                Your First Name is:
            </div>
            <div id="ln">
                Your Last Name is:
            </div>
            <div id="em">
                Your email is:
            </div>
            <div id="pw">
                Your password is:
            </div>
        </div>
    </article>
    <footer>
        Copyright @ 2017 Name
    </footer>
</div>
<script>
    function processForm() {
        var ary = location.search.substring(1).split("&");

        var fnpart = ary[0].split("=");
        frn = unescape(fnpart[1]);
        document.getElementById("fn").innerHTML = "<b>Your First Name is:</b>" + "<br>" + frn;

        var lnpart = ary[1].split("=");
        lsn = unescape(lnpart[1]);
        document.getElementById("ln").innerHTML = "<b>Your Last Name is:</b>" + "<br>" + lsn;

        var empart = ary[2].split("=");
        ema = unescape(empart[1]);
        document.getElementById("em").innerHTML = "<b>Your Email is:</b>" + "<br>" + ema;

        var pwpart = ary[3].split("=");
        psw = unescape(pwpart[1]);
        document.getElementById("pw").innerHTML = "<b>Your First Name is:</b>" + "<br>" + psw;
    }
    processForm();
</script>

Answer 1

您可以尝试使用下面的模式，使用循环索引匹配短名称/长名称中的位置：

但密码不应该像现在一样在该位置可见！

var names = [['fn', 'First Name'], 
             ['ln', 'Last Name'],
             ['em', 'Email'],
             ['pw', 'Password']
            ]

for (ind in ary){
  var part = unescape(ary[ind].split("=")[1]);
  document.getElementById(names[ind][0]).innerHTML = "<b>Your "+ names[ind][1] + " is:</b> <br>" + part;

}

Answer 2

完成目标号。 1，您不需要在action上使用属性form。您还可以使用<input type="button">替换提交按钮并处理点击事件并调用processForm()功能。

为了能够调用该函数，您需要将processForm()声明移动到index.html中。所以你只需要一个文件。您不需要从查询字符串中读取任何数据。只需从DOM元素中读取输入值

在地址栏上干掉JS代码和隐藏输入？

2 个答案: