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是对文档中所有表格的引用。 [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

多种形式的通用解决方案

使用elements collection，可以访问表单中的所有元素。遍历它们并检查每个元素的类型，并使用它们进行填充。

示例

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 个答案:

多种形式的通用解决方案

示例