在javascript中使用表單字段創建URL

所以，我對HTML和JavaScript非常陌生，我想從表單中獲取值並使用腳本處理它們。我有幾個字段，包括用戶名，密碼和HTML中的兩個確認密碼字段。用JavaScript我想收集用戶名，並檢查密碼字段是否填寫完畢。如果是這樣，我想讓var ispass等於'yespass'或'nopass'。當我提交表格時，我想要轉到url http://www.example.com?un=username&pass=yespass（或nopass）。在javascript中使用表單字段創建URL

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

我想不出一個適當的方式做到這一點，因爲這似乎並沒有在所有的工作。任何建議或建議？

來源

2014-12-03 jltrinka

你可以用一個隱藏的表單字段和onchange事件退出這個功能：

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

此輸入會去你的形式。然後在您的密碼字段，添加一個onchange處理程序：

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

另外，如果你在表單上設置的method，提交表單可以根據表單輸入生成的網址：

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

Here's a jsfiddle that demonstrates the result 。

此外，如果您是JavaScript新手，您可能需要查看圖書館，如jQuery以簡化您與頁面的某些交互。學習起來非常簡單，周圍有一個非常棒的社區可以解決您遇到的任何問題。

HTH， Aaron

來源

2014-12-03 00:29:15 aaronfay

謝謝你這個全面的答案。另外，我不知道jsfiddle是否存在，並且我早些時候正在尋找這個確切的東西。謝謝！！任何人，如果我使用GET方法，它會不會生成包含所有表單值（包括密碼和「新密碼」）的URL？ – jltrinka 2014-12-03 02:20:07

它也會發送'password'，是的。如果您不想提交表單並僅創建一個ajax請求，則可以使用原始示例中想要的表單中的值構建url。 – aaronfay 2014-12-03 16:13:02

在javascript中使用表單字段創建URL

回答

相關問題