How to get values of a form using JavaScript

Question

I'm trying to write a script to process form data within a simple offline HTML page. I lifted the first four variables I'm trying to pull through as an example. I can get a simple example to work like the one found here https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements_index but I'm struggling to expand it to multiple variables as below.

Am I approaching the two JavaScript functions wrong for this use?

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

Adam H · Accepted Answer · 2018-09-18 16:02:46Z

There are a few problems with your code that I will do my best to explain. It seems like you are a little confused with the form object and how that works. Firstly, it is forms not form. The reason its plural is because it is an array that contains all of the <form> elements in the document. Secondly, you need to access it by prefixing it with document because the forms live inside the document object. So all your calls to form need to updated to use document.forms

Next is how you are dynamically reaching into the form object. The syntax for that would be document.forms[0][variablename]. Let's break that down piece by piece so you can understand better. document.forms is a reference to all the forms in the document. [0] is taking the first item in that array and because the form itself is another array we use [variableName] to pull out the value we want.

After that, there is just some small confusion over variable names which you should be able to see from the working example I've provided below.

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>

Please feel free to ask more follow up questions if I've missed something or you need more clarification.

Thank you for explaining clearly. I can confirm this does exactly what I intended. I understood that all the form data was stored in an indexed array I didn't realize it could only be called from document.forms
@mintgreenstrat glad I could help, please remember to mark this as the accepted answer if it solved your problem so others in the future can see it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Generic solution for multiple forms

With elements collection one can access all elements in a form. Loop through them and check the type of each element and make your stuff with it.

Example

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>

Collectives™ on Stack Overflow

How to get values of a form using JavaScript

2 Answers 2

2 Comments

Generic solution for multiple forms

Example

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Generic solution for multiple forms

Example

Comments

Your Answer

Sign up or log in

Post as a guest

Related