如何使用JavaScript獲取表單的值

Question

我正在嘗試編寫一個腳本來處理簡單的脫機HTML頁面中的表單數據。 以示例為例，我提出了前四個變量。 我可以得到一個簡單的示例，就像在這里找到的示例一樣工作：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements_index，但我正在努力將其擴展為如下所示的多個變量。

我使用這兩個JavaScript函數是否錯誤？

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JavaScript within HTML</title>

<script language = "JavaScript">
    function get_dropdown (fieldname) {
      Item = form.fieldname.selectedIndex;
      Result = form.fieldname.options[Item].text;
      return Result;
}

    function getval (form) {
      var Customer_Name = form.customer_name.value;
      var Asset_Name = form.asset_name.value;
      var Asset_Attribute = get_dropdown (asset_dropdown);
      var Sub_Attribute = get_dropdown (sub_dropdown);
      var Answer = Customer_Name + Asset_Name + Asset_Type + Sub_System;

      document.getElementById("output1").innerHTML = Answer;
}

</script>

</head>

<body>
<form name = "agc_ira" method="get" action="" >
<fieldset>
  <legend>Assessment Data</legend>
  <table>
  <tr>
    <td>Customer Name:</td>
    <td><input type="text" name="customer_name"></td>
  </tr>
  <tr>
    <td>Asset Name:</td>
    <td><input type = "text" name="asset_name"></td>
  </tr>
  <tr>
    <td>Asset Attribute:</td>
    <td><select name="asset_dropdown">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
  </tr>
  <tr>
  <td>Sub-Attribute:</td>
  <td><select name="sub_dropdown">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select></td>
  </tr>
  </table>
 </fieldset>

 <br><input type="button" name="runmodel" value="Run" onclick="getval()"> 
 <br>
 <p id="output1"></p>

 </form>
 </body>
 </html>

Answer 1

您的代碼中有一些問題，我將盡力解釋。 似乎您對表單對象及其工作方式有些困惑。 首先，它是形式而不是形式。 之所以采用復數形式，是因為它是一個包含文檔中所有<form>元素的數組。 其次，由於表單位於document對象內部，因此您需要通過在document添加前綴來訪問它。 因此，您對表單的所有調用都需要更新才能使用document.forms

接下來是如何動態地進入form對象。 語法為document.forms[0][variablename] 。 讓我們逐一分解，以便您更好地理解。 document.forms是對document.forms中所有表單的引用。 [0]正在該數組中的第一項，並且因為表單本身是另一個數組，我們使用[variableName]提取所需的值。

之后，您會在下面提供的工作示例中看到關於變量名的一些小混淆。

 function get_dropdown(fieldname) { Item = document.forms[0][fieldname].selectedIndex; Result = document.forms[0][fieldname].options[Item].text; return Result; } function getval(form) { var Customer_Name = document.forms[0].customer_name.value; var Asset_Name = document.forms[0].asset_name.value; var Asset_Attribute = get_dropdown('asset_dropdown'); var Sub_Attribute = get_dropdown('sub_dropdown'); var Answer = Customer_Name + '-' + Asset_Name + '-' + Asset_Attribute + '-' + Sub_Attribute; document.getElementById("output1").innerHTML = Answer; }

 <form name="agc_ira" method="get" action=""> <fieldset> <legend>Assessment Data</legend> <table> <tr> <td>Customer Name:</td> <td><input type="text" name="customer_name"></td> </tr> <tr> <td>Asset Name:</td> <td><input type="text" name="asset_name"></td> </tr> <tr> <td>Asset Attribute:</td> <td><select name="asset_dropdown"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select></td> </tr> <tr> <td>Sub-Attribute:</td> <td><select name="sub_dropdown"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select></td> </tr> </table> </fieldset> <br><input type="button" name="runmodel" value="Run" onclick="getval()"> <br> <p id="output1"></p> </form>

如果我錯過了什么，或者您需要進一步澄清，請隨時提出更多后續問題。

Answer 2

多種形式的通用解決方案

使用元素集合，可以訪問表單中的所有元素 。 遍歷它們並檢查每個元素的類型，然后使用它們進行填充。

例

 function getSelected(formName, fieldName) { var selected = document.forms[formName][fieldName].selectedIndex; var res = document.forms[formName][fieldName].options[selected].text; return res; } function getValuesOfForm(formName, outputId) { var res = ""; var formElements = document.forms[formName].elements; for (var i = 0; i < formElements.length; i += 1) { if (formElements[i].type === "text") { res += formElements[i].value + "-"; } if (formElements[i].type === "select-one") { res += getSelected(formName, formElements[i].name) + "-"; } // Do your own stuff with other types } var output = document.getElementById(outputId); output.innerHTML = res.slice(0, -1); }

 <!-- Form 1 --> <form name="form1" method="get" action=""> <fieldset> <legend>Assessment Data</legend> <table> <tr> <td>Customer Name:</td> <td><input type="text" name="customer_name"></td> </tr> <tr> <td>Asset Name:</td> <td><input type="text" name="asset_name"></td> </tr> <tr> <td>Asset Attribute:</td> <td> <select name="asset_dropdown"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>Sub-Attribute:</td> <td> <select name="sub_dropdown"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> </table> </fieldset> <br><input type="button" name="runmodel" value="Run" onclick="getValuesOfForm('form1', 'output1')"> <br> <p id="output1"></p> </form> <!-- Form 2 --> <form name="form2" method="get" action=""> <fieldset> <legend>Assessment Data</legend> <table> <tr> <td>Customer Name:</td> <td><input type="text" name="customer_name"></td> </tr> <tr> <td>Another Text:</td> <td><input type="text" name="another_text"></td> </tr> <tr> <td>Asset Name:</td> <td><input type="text" name="asset_name"></td> </tr> <tr> <td>Asset Attribute:</td> <td> <select name="asset_dropdown"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </td> </tr> <tr> <td>Sub-Attribute:</td> <td> <select name="sub_dropdown"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <td>Other attributes:</td> <td> <select name="other_attributes"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </td> </tr> </table> </fieldset> <br><input type="button" name="runmodel" value="Run" onclick="getValuesOfForm('form2', 'output2')"> <br> <p id="output2"></p> </form>

如何使用JavaScript獲取表單的值

問題描述

2 個解決方案

解決方案1
1 已采納 2018-09-18 16:02:46

解決方案2
0 2018-09-18 17:38:10

多種形式的通用解決方案

例

如何使用JavaScript獲取表單的值

問題描述

2 個解決方案

解決方案1 1 已采納 2018-09-18 16:02:46

解決方案2 0 2018-09-18 17:38:10

多種形式的通用解決方案

例

解決方案1
1 已采納 2018-09-18 16:02:46

解決方案2
0 2018-09-18 17:38:10