1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

help with coding

Discussion in 'Web Design & Development' started by charlzguitarz, Sep 5, 2019.

Advertisement
  1. charlzguitarz

    charlzguitarz Thread Starter

    Joined:
    Dec 21, 2018
    Messages:
    29
    Each item in section B has two necks, either 6 & 12 string, 6 string & bass or 12 string & bass & exclude flat/nylon wound [added charge]. The flat/nylon wound [added charge] for 6 OR 12 string = 17.95. The flat/nylon wound [added charge] for bass string = 37.95. At a loss how to show these options in section B
    Code:
    <table>
      <tr>
        <th><input type="text" size="20" maxlength="30" name="unit-price" value="Product - Unit Price" STYLE="color: #000000; font-weight: bold; background-color: #ccffff;"></th>
        <th><input type="text" size="5" maxlength="30" name="order-qty" value="Qty" STYLE="color: #000000; font-weight: bold; background-color: #ccffff;" ></th>
        <th><input type="text" size="15" maxlength="30" name="item-total" value="Purchase total" STYLE="color: #000000; font-weight: bold; background-color: #ccffff;" ></th>
    <!-- ------------------------------------------ B ---------------------------------------------- -->
    <tr>
    <td align="middle"><select name="unitprice1" onchange="calculate(1)">
    <OPTION value=""></OPTION>
    <OPTION value="259.95" style="background-color: pink;">Duoblus Conversion - 259.95</OPTION>
    <OPTION value="299.95" style="background-color: violet;">Melodius Conversion  - 299.95</OPTION>
    <OPTION value="327.95" style="background-color: pink;">MelodiusII Conversion - 327.95</OPTION>
    <OPTION value="573.95" style="background-color: violet;">Hawaiio Conversion  - 573.95</OPTION>
    <OPTION value=""></OPTION>
    <OPTION value="457.95" style="background-color: pink;">New Duoblus - 457.95</OPTION>
    <OPTION value="527.95" style="background-color: violet;">New Melodius - 527.95</OPTION>
    <OPTION value="555.95" style="background-color: pink;">NEW MelodiusII - 555.95</OPTION>
    <OPTION value="757.95" style="background-color: violet;">New Hawaiio - 757.95</OPTION>
    </select></td>
    
        <td align="middle"><select name="qty1" onchange="calculate(1)">
    <OPTION value="" selected>choose</option>
    <OPTION value="1">1</option>
    <OPTION value="2">2</option>
          </select></td>
         <td align="middle">$<input type="text" class="result" name="result1"></td>
      </tr></table><BR>
    <!-- ------------------------------------------------------------------  -->
    <script>
        function calculate(n) {
            var p = document.getElementsByName('unitprice'+n)[0].value,
                q = document.getElementsByName('qty'+n)[0].value;
            document.getElementsByName('result'+n)[0].value = (p * q).toFixed(2);
            total(); }
    
        function total(){ var s1 = document.querySelectorAll('.result'),
                st = form.total.value; st = 0;
            for (var i = 0; i < s1.length; i++)
                { var  a = s1.value,  st = 1*a+1*st; }
            form.total.value = st.toFixed(2);
            form.tax.value = (st * form.taxrate.value).toFixed(2);
            form.total.value = (st*1 + form.tax.value*1).toFixed(2); }
    </script>
     
    Last edited by a moderator: Oct 7, 2019
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    ... and?
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Now I see that the question is 'within' the code as comment ...
    You need an extra select option, so that the potential client can specify one of the 2 neck options.
    You will need 2 sets of the section B items (both hidden for the moment) - 1 set for each neck type.
    These must reflect the prices including the surcharge according to your neck choice.
    Depending upon the neck type chosen, you would display set 1 or set 2.
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Just to quantify what I said in the previous post, here is some code to achieve that method ...
    HTML:
    <table>
        <tr><th colspan=3 align="middle">NECK TYPE</th></tr>
        <tr>
            <td colspan=3 align="middle">
                <select id="options" onchange="toggleOption(this)">
                    <OPTION value=""></OPTION>
                    <OPTION value="set1" style="background-color: pink;">The flat/nylon wound for 6 OR 12 string - $17.95</OPTION>
                    <OPTION value="set2" style="background-color: violet;">The flat/nylon wound for bass string - $37.95</OPTION>
                </select>
            </td>
        </tr>
        <tr>
            <th><input type="text" size="20" maxlength="30" name="unit-price" value="Product - Unit Price" STYLE="color: #000000; font-weight: bold; background-color: #ccffff; text-align:center"></th>
            <th><input type="text" size="5" maxlength="30" name="order-qty" value="Qty" STYLE="color: #000000; font-weight: bold; background-color: #ccffff; text-align:center" ></th>
            <th><input type="text" size="15" maxlength="30" name="item-total" value="Total Cost" STYLE="color: #000000; font-weight: bold; background-color: #ccffff; text-align:center" ></th>
        </tr>
        <tr id="set1" name="set1" style="display:none;">
            <td align="middle">
                <select id="unitprice1" name="unitprice1" onchange="calculate(1)">
                    <OPTION value=""></OPTION>
                    <OPTION value="277.90" style="background-color: pink;">Duoblus Conversion - 259.95</OPTION>
                    <OPTION value="317.90" style="background-color: violet;">Melodius Conversion - 299.95</OPTION>
                    <OPTION value="345.90" style="background-color: pink;">MelodiusII Conversion - 327.95</OPTION>
                    <OPTION value="591.90" style="background-color: violet;">Hawaiio Conversion - 573.95</OPTION>
                    <OPTION value=""></OPTION>
                    <OPTION value="475.90" style="background-color: pink;">New Duoblus - 457.95</OPTION>
                    <OPTION value="545.90" style="background-color: violet;">New Melodius - 527.95</OPTION>
                    <OPTION value="573.90" style="background-color: pink;">NEW MelodiusII - 555.95</OPTION>
                    <OPTION value="775.90" style="background-color: violet;">New Hawaiio - 757.95</OPTION>
                </select>
            </td>
            <td align="middle">
                <select name="qty1" onchange="calculate(1)">
                    <OPTION value="" selected>choose</option>
                    <OPTION value="1">1</option>
                    <OPTION value="2">2</option>
                </select>
            </td>
            <td align="middle">$<input type="text" class="result" name="result1"></td>
        </tr>
        <tr id="set2" name="set2" style="display:none;">
            <td align="middle">
                <select id="unitprice2" name="unitprice2" onchange="calculate(2)">
                    <OPTION value=""></OPTION>
                    <OPTION value="297.90" style="background-color: pink;">Duoblus Conversion - 259.95</OPTION>
                    <OPTION value="337.90" style="background-color: violet;">Melodius Conversion - 299.95</OPTION>
                    <OPTION value="365.90" style="background-color: pink;">MelodiusII Conversion - 327.95</OPTION>
                    <OPTION value="611.90" style="background-color: violet;">Hawaiio Conversion - 573.95</OPTION>
                    <OPTION value=""></OPTION>
                    <OPTION value="495.90" style="background-color: pink;">New Duoblus - 457.95</OPTION>
                    <OPTION value="565.90" style="background-color: violet;">New Melodius - 527.95</OPTION>
                    <OPTION value="593.90" style="background-color: pink;">NEW MelodiusII - 555.95</OPTION>
                    <OPTION value="795.90" style="background-color: violet;">New Hawaiio - 757.95</OPTION>
                </select>
            </td>
            <td align="middle">
                <select name="qty2" onchange="calculate(2)">
                    <OPTION value="" selected>choose</option>
                    <OPTION value="1">1</option>
                    <OPTION value="2">2</option>
                </select>
            </td>
            <td align="middle">$<input type="text" class="result" name="result2"></td>
        </tr>
    </table><BR>
    <!-- ------------------------------------------------------------------ -->
    <script>
    function calculate(n) {
    var p = document.getElementsByName('unitprice'+n)[0].value,
    q = document.getElementsByName('qty'+n)[0].value;
    document.getElementsByName('result'+n)[0].value = (p * q).toFixed(2);
    total(); }
    
    function total(){ var s1 = document.querySelectorAll('.result'),
    st = form.total.value; st = 0;
    for (var i = 0; i < s1.length; i++)
    { var a = s1.value, st = 1*a+1*st; }
    form.total.value = st.toFixed(2);
    form.tax.value = (st * form.taxrate.value).toFixed(2);
    form.total.value = (st*1 + form.tax.value*1).toFixed(2); }
    </script>
    <script>
        function toggleOption(thisselect) {
            var selected = thisselect.options[thisselect.selectedIndex].value;
            toggleRow(selected);
        }
    
        function toggleRow(id) {
         hideRow('set1');
         hideRow('set2');
          var row = document.getElementById(id);
          if (row.style.display == '') {
            row.style.display = 'none';
          }
          else {
             row.style.display = '';
          }
        }
    
        function showRow(id) {
          var row = document.getElementById(id);
          row.style.display = '';
        }
    
        function hideRow(id) {
          var row = document.getElementById(id);
          row.style.display = 'none';
        }
    
    </script>
    You may notice that I have 2 sets of prices, which will activate depending upon which neck type is selected. They have the calculated amounts as values.
    I hope that this is what you were after;)
     
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,357
    First Name:
    Jim
    Hey Charles:)
    We never did find out if you managed to solve your problem?
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1232585

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice