問題描述

如何獲取 HTML 表單的值傳遞給 JavaScript？

它是否正確？我的腳本從文本框中收到兩個參數，一個來自下拉框。

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>

最佳解決思路

HTML：

<input type="text" name="name" id="uniqueID" value="value" />

JS：

var nameValue = document.getElementById("uniqueID").value;

次佳解決思路

document.forms 將在您的頁面上包含一個表單數組。您可以通過這些表單循環查找您想要的具體形式。

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

每個表單都有一個元素數組，然後您可以循環查找所需的數據。你也可以通過名稱訪問它們

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);

第三種解決思路

以下是 W3Schools 的一個例子：

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

演示可以找到 here 。

第四種思路

如果要檢索表單值 (如使用 HTTP POST 發送的值)，可以使用

JavaScript 的

new FormData(document.querySelector('form'))

form-serialize(https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]);

jQuery 的

$("form").serializeArray()

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。