title: Update input field on checkbox selection with Javascript
body: <p>I would like two things to happen.</p>
  
  <p>One </p>
  
  <blockquote>
    <p>when a selection is made the input field updates as the total,</p>
  </blockquote>
  
  <p>Two </p>
  
  <blockquote>
    <p>the check boxes are dynamically generated and may sometimes be up to
    six and sometimes as low as one product.</p>
  </blockquote>
  
  <p>This is what I have made, but I can't get it to work :(</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
      function updateTotal(){
          document.getElementById('total').value = 
              (document.getElementById('date0').checked?
               parseFloat(document.getElementById('date0').price):0) +
               (document.getElementById('date1').checked?
               parseFloat(document.getElementById('date1').price):0) +
               (document.getElementById('date2').checked?
               parseFloat(document.getElementById('date2').price):0);
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>With this as form</p>
  
  <pre><code>&lt;form&gt;
   &lt;td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)"&gt;
     &lt;input id="date0" type="checkbox" name="form[date]" value="blue" price="10" onChange="javascript:updateTotal();"&gt;product 1&lt;br /&gt;
     &lt;input id="date1" type="checkbox" name="form[date]" value="green" price="30" onChange="javascript:updateTotal();"&gt;product 2&lt;br /&gt;
     &lt;input id="date2" type="checkbox" name="form[date]" value="red" price="50" onChange="javascript:updateTotal();"&gt;product 3&lt;br /&gt;
   &lt;/td&gt;
   &lt;td&gt;
    Total cost is:
    &lt;input name="total" id="total" type="text" readonly="readonly" style="border:0px;"&gt;
   &lt;/td&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Any help will be great! </p>