从 javascript 中的表单字段创建 URL

Question

所以，我对 HTML 和 javascript 非常陌生，我想从表单中获取值并使用脚本处理它们。我有几个字段，包括用户名、密码和 HTML 中的两个确认密码字段。使用 javascript 我想收集用户名，并检查密码字段是否已填写。如果是，我想让 var ispass 等于“yespass”或“nopass”。当我提交表单时，我想去 url http://www.example.com?un=username&pass=yespass（或 nopass）。

Javascript：

<script language="javascript" type="text/javascript">
    function processFormData(){
        var user = document.getElementById('username').value;
        var pass = document.getElementById('password').value;
        var ispass;
          if (pass.length > 0){
          ispass = "yespass";
          }else{
          ispass = "nopass";
          }
        return "http://www.example.com?un=" + user + "&pw=" + ispass;
</script>

HTML：

<form onsubmit="window.location.href=processFormData();">
Please enter your current e-mail address and password below.<br><br>
<input type="text" id="username" placeholder="E-mail Address"><br><br>
<input type="password" id="oldpassword" placeholder="Old Password"><br><br><br>
Please type your new password below:<br><br>
<input type="password" id="newpassword1" placeholder="New Password"><br><br>
<input type="password" id="newpassword2" placeholder="Confirm New Password"><br><br>
<input type="submit" id="gobutton" value="Reset Password"/>
</form>

我无法找到正确的方法来执行此操作，因为这似乎根本不起作用。有什么建议或建议吗？

Answer 1

您可以使用隐藏的表单字段和 onchange 事件来实现这一点：

<input type="hidden" id="ispass" value="no" onchange="checkPass(this);" />

此输入将进入您的表单。然后在您的密码字段中，添加一个onchange 处理程序：

function checkPass(input) {
    document.getElementById("ispass").value =  "yes"
};

另外，如果您在表单上设置method，提交表单可以根据表单输入生成 url：

<form method='get' action='...' />

Here's a jsfiddle that demonstrates the result。

另外，如果您是 javascript 新手，您可能需要查看像 jQuery 这样的库来简化您与页面的一些交互。它真的很容易学习，并且有一个很棒的社区可以帮助您解决可能遇到的任何问题。

HTH, 亚伦