title: New to Jquery and JS: Trying to have the corresponding prices show up with the total
body: <p>So I'm very new to JQuery and JS and coding in general unfortunately, and I need help with getting the prices to show up in the adjacent text boxes. Additionally I need help getting the total at the end as well.</p>
  
  <p>The part here that is really confusing to me is that I need to have the third box (SV and prog) dropdown be dependent on the Lens Mat dropdown. If I didn't have that component, doing the prices would be easier with the code that I'm using.</p>
  
  <p>Any help or guidance would be greatly appreciated. I skimmed through W3 coding for JS and jquery, but I'm having trouble finding material related to what I need. Any reference material is also really appreciated, as I would like to learn more since I'm trying to teach myself how to code.</p>
  
  <p>
  </p>
  
  <p>
    
    
    
    
    
  
  </p>
  
  <pre><code>&lt;body&gt;
  &lt;script&gt;
  function calculate(){
  
  
  
  &lt;/script&gt;
  
  
  &lt;script&gt;
  $(document).ready(function () {
      dropdowns = {
          web: [
              {desc: "SV", price: 89},
              {desc: "Prog F", price: 190},
              {desc: "Prog O", price: 375},
              {desc: "Prog N", price: 710},
              {desc: "Prog J", price: 58},
              {desc: "Prog K", price: 56},
          ],
          art: [{desc: 'SV', price: 7.00},
                {desc: 'Prog F', price: 32.00},
                {desc: 'Prog O', price: 8.00},
                {desc: 'Prog N', price: 37.00},
                {desc: 'Prog J', price: 9.00},
                {desc: 'Prog K', price: 40.00},
                ],
          blog: [{desc: 'SV', price: 10},
                 {desc: 'Prog F', price: 12},
                 {desc: 'Prog O', price: 14},
                 {desc: 'Prog N', price: 47},
                 {desc: 'Prog J', price: 55},
                 {desc: 'Prog K', price: 63}
                ],
          press: [{desc: 'SV', price: 27},
                  {desc: 'Prog F', price: 37},
                  {desc: 'Prog O', price: 47},
                  {desc: 'Prog J', price:57},
                  {desc: 'Prog K', price:67}
                 ]
      }
  
  
  
      populateSelect();
  
      $(function () {
          $('#cat').change(populateSelect);
      });
  
      function populateSelect() {
          var cat = $('#cat').val();
          $('#item').empty();
  
          dropdowns[cat].forEach(function(item) {
              $('#item').append($('&lt;option/&gt;', {
                  value: item.price,
                  text: item.desc+' = $'+item.price
              }));
          });
      }
  
  });
  &lt;/script&gt;
  
  &lt;form name="test" method="post" action="check.php"&gt;
      &lt;p style="text-align: center;"&gt;&lt;span style="color: #800000;"&gt;&lt;strong&gt;&lt;span style="font-size: x-large; font-family: arial, helvetica, sans-serif;"&gt;Order Form&lt;/span&gt;
          &lt;/strong&gt;
          &lt;/span&gt;
      &lt;/p&gt;&amp;nbsp;
      &lt;table style="text-align: left; width: 100%; webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" border="0" cellspacing="3" cellpadding="2"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td style="font-weight: bold; font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2"&gt;Personal Information:
                      &lt;hr /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;Name :&lt;/td&gt;
                  &lt;td style="vertical-align: top; width: 500px;"&gt;
                      &lt;input style="height: 28px; width: 220px;" type="text" name="name" /&gt; &lt;span style="color: #ff0000;"&gt;*&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;Email :&lt;/td&gt;
                  &lt;td style="vertical-align: top; width: 500px;"&gt;
                      &lt;input style="height: 28px; width: 220px;" type="text" name="email" /&gt;&lt;span style="color: #ff0000;"&gt; *&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="font-weight: bold; font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2"&gt;Receipt:
                      &lt;hr /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
  
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;Exam:&lt;/td&gt;
              &lt;td&gt;&lt;select id="Exam" onchange="calculate()"&gt;
  &lt;option selected="selected" disabled="disabled" hidden="" value=""&gt;Choose Exam Co-pay&lt;/option&gt;
  &lt;option value="0"&gt;Copay 0&lt;/option&gt;
  &lt;option value="5"&gt;Copay 5&lt;/option&gt;
  &lt;option value="10"&gt;Copay 10&lt;/option&gt;
  &lt;option value="15"&gt;Copay 15&lt;/option&gt;
  &lt;option value="20"&gt;Copay 20&lt;/option&gt;
  &lt;option value="25"&gt;Copay 25&lt;/option&gt;
  &lt;option value="129"&gt;Exam full price&lt;/option&gt;
  &lt;/select&gt;
  &lt;td&gt;&lt;input id=exam_price size="8" value="0" type="text"&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
  
                  &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;Lens Mat :&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="cat" id="cat"&gt;
                          &lt;option value="web"&gt;CR-39 &lt;/option&gt;
                          &lt;option value="art"&gt;Polycarbonate&lt;/option&gt;
                          &lt;option value="blog"&gt;1.60&lt;/option&gt;
                          &lt;option value="press"&gt;1.67&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
  &lt;td&gt; &lt;input id="item.price" size="8" value="0" type="text"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
                  &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;SV or Progressive :&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="item" id="item"&gt;&lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt; &lt;input id="item.price" size="8" value="0" type="text"&gt;
  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;AR:&lt;/td&gt;
              &lt;td&gt;&lt;select id="AR" onchange="calculate()"&gt;
  &lt;option selected="selected" disabled="disabled" hidden="" value=""&gt;Choose AR&lt;/option&gt;
  &lt;option value="0"&gt;No AR&lt;/option&gt;
  &lt;option value="37"&gt; A&lt;/option&gt;
  &lt;option value="61"&gt;B&lt;/option&gt;
  &lt;option value="71"&gt;C&lt;/option&gt;
  &lt;option value="85"&gt;D&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
   &lt;td&gt; &lt;input id="item.price" size="8" value="0" type="text"&gt;
  &lt;/td&gt;
  
  &lt;tr&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;"&gt;Total:&lt;/td&gt;
  &lt;td&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;input id="total_price" size="8" value="0" type="text"&gt; &lt;br&gt;
  &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;/form&gt;
  
  &lt;/html&gt;
  </code></pre>