title: Javascript to pick up values in a form text box
body: <p>I want to:
  Use Javascript to pick up the values of form fields (text inputs in form), and add them all together, spitting them out into another label or div, all when I press a button.</p>
  
  <p>Should be easy right? </p>
  
  <p>edit:
  i have tried a couple things, however, I didn't think about posting them.  Thought someone would reply with a little logic tips instead of some un-insightful waste of space.</p>
  
  <pre><code>&lt;SCRIPT&gt;
  function add()
  {
  var a = document.getElementById("fscf_field4_8").value;
  var b = document.getElementById("fscf_field4_10").value;
  var c = document.getElementById("fscf_field4_12").value;
  var d = document.getElementById("fscf_field4_14").value;
  var e = document.getElementById("fscf_field4_16").value;
  document.getElementById("fscf_field4_19").value =a+b+c+d+e;
  }
  &lt;/script&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div id="FSContact4" style="width:375px;"&gt;
  &lt;form action="/payment/#FSContact4" id="fscf_form4" method="post"&gt;
  &lt;input type="hidden" name="fscf_submitted" value="0"&gt;
  &lt;input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867"&gt;
  &lt;input type="hidden" name="si_contact_action" value="send"&gt;
  &lt;input type="hidden" name="form_id" value="4"&gt;
  
  &lt;div id="fscf_required4"&gt;
    &lt;span style="text-align:left;"&gt;*&lt;/span&gt; &lt;span style="text-align:left;"&gt;indicates required field&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;input type="hidden" name="mailto_id" value="1"&gt;
  
  &lt;div id="fscf_div_clear4_4" style="clear:both;"&gt;
    &lt;div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;"&gt;
      &lt;div id="fscf_label4_4" style="text-align:left; padding-top:5px;"&gt;
        &lt;label style="text-align:left;" for="fscf_field4_4"&gt;Company Name&lt;span style="text-align:left;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div style="text-align:left;"&gt;
        &lt;input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="fscf_div_clear4_5" style="clear:both;"&gt;
    &lt;div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;"&gt;
      &lt;div id="fscf_label4_5" style="text-align:left; padding-top:5px;"&gt;
        &lt;label style="text-align:left;" for="fscf_field4_5"&gt;Person Doing the Transaction&lt;span style="text-align:left;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div style="text-align:left;"&gt;
        &lt;input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="fscf_div_clear4_6" style="clear:both;"&gt;
    &lt;div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;"&gt;
      &lt;div id="fscf_label4_6" style="text-align:left; padding-top:5px;"&gt;
        &lt;label style="text-align:left;" for="fscf_field4_6"&gt;email&lt;span style="text-align:left;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div style="text-align:left;"&gt;
        &lt;input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3"&gt;
          &lt;tr&gt;
                  &lt;td&gt;Invoice Number&lt;/td&gt;
                  &lt;td&gt;Amount (USD)&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_7 name="Invoice Number 1"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_8 name="Amount 1"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_9 name="Invoice Number 2"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_10 name="Amount 2"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_11 name="Invoice Number 3"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_12 name="Amount 3"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_13 name="Invoice Number 4"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_14 name="Amount 4"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_15 name="Invoice Number 5"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_16 name="Amount 5"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
                  &lt;td&gt;&lt;input type="button" value="Click to Calculate" onclick="add()"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="fscf_field4_19"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="fscf_submit_div4" style="text-align:left; padding-top:2px;"&gt;
                  &lt;input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/tr&gt;
  &lt;/td&gt;
  &lt;/table&gt;
  </code></pre>