The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> modify html code to add two fields
tkalinoski
post Mar 7 2017, 08:48 PM
Post #1





Group: Members
Posts: 1
Joined: 7-March 17
Member No.: 26,336



I need help modifying the below code to add fields for millage_rate and debt_mills = 3. These are both constants in the code. Each time I try to modify the code, the page stops auto calculating and giving me results. Ideally, Id like to add these fields at the beginning of the form. Thanks for your help!

CODE
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vb script:;" data-toggle='collapse' data-target='#irs-tax-rate-info' class="glyphicon glyphicon-question-sign text-muted"></a>
                    </td>
                    <td><input type="text" class="form-control an an-perc calc-input" id="irs-tax-rate"></td>
                </tr>
                <tr>
                    <td colspan="2" class="info-row"><div id="irs-tax-rate-info" class="collapse info-td">
                        Enter "0" if you do not itemize. Otherwise, enter your Federal Income Tax rate. See this article for more information: <a href="https://www.irs.com/articles/2016-federal-tax-rates-personal-exemptions-and-standard-deductions" target="_blank">https://www.irs.com/articles/2016-federal-tax-rates-personal-exemptions-and-standard-deductions</a>
                    </div></td>
                </tr>

                <tr>
                    <td class="lbl">
                        Sales Tax Deduction
                        <a href="java script:;" data-toggle='collapse' data-target='#sales-tax-base-info' class="glyphicon glyphicon-question-sign text-muted"></a>
                    </td>
                    <td><input type="text" class="form-control an an-money calc-input" id="sales-tax-base"></td>
                </tr>
                <tr>
                    <td colspan="2" class="info-row"><div id="sales-tax-base-info" class="collapse info-td">
                        To calculate Sales Tax Deduction for additional 1% Sales Tax, find your allowable sales tax deduction based on the following IRS sales tax deductions calculator:
                        <a href="https://apps.irs.gov/app/stdc/" target="_blank">https://apps.irs.gov/app/stdc/</a>
                    </div></td>
                </tr>

          </table>

          <h3>Monthly Expenses for Expanded Sales Tax <a href="java script:;" data-toggle='collapse' data-target='#expanded-sales-tax-info' class="glyphicon glyphicon-question-sign text-muted"></a></h3>

          <table class="table">

                <tr>
                    <td colspan="2" class="info-row"><div id="expanded-sales-tax-info" class="collapse info-td">
                        <p>Items/Services included in expanded sales tax:</p>
                        <ul>
                            <li>Personal hygeine</li>
                            <li>Diapers</li>
                            <li>Hair cuts & salon services</li>
                            <li>Non-perscription medication</li>
                            <li>Amusement parks, zoos, museums</li>
                            <li>Sports, theater, dance events</li>
                            <li>Day care</li>
                            <li>Cable (basic & premium)</li>
                            <li>Magazines, periodicals</li>
                            <li>Textbooks</li>
                            <li>Waste management</li>
                        </ul>
                        <p>For a complete list, see <a href="http://www.senatorargall.com/new-taxable-items/" target="_blank">http://www.senatorargall.com/new-taxable-items/</a></p>
                    </div></td>
                </tr>

                <tr>
                    <td class="lbl">Food</td>
                    <td><input type="text" class="form-control an an-money calc-input" id="exp-food"></td>
                </tr>
                <tr>
                    <td class="lbl">Clothing</td>
                    <td><input type="text" class="form-control an an-money calc-input" id="exp-clothing"></td>
                </tr>
                <tr>
                    <td class="lbl">Services</td>
                    <td><input type="text" class="form-control an an-money calc-input" id="exp-services"></td>
                </tr>
                <tr>
                    <td class="lbl">Other</td>
                    <td><input type="text" class="form-control an an-money calc-input" id="exp-other"></td>
                </tr>
                <tr>
                    <td class="lbl">Total Yearly Expanded Expenses</td>
                    <td><input type="text" class="form-control an an-money total" readonly id="exp-total"></td>
                </tr>
          </table>
        </div>

    <div class="col-xs-12 col-sm-6 col-lg-5">

      <h3>Results</h3>

      <h3>Tax Decreases</h3>
      <table class="table">
        <tr>
          <td class="lbl">R.E. Tax Reduction</td>
          <td><input type="text" class="form-control an an-money" readonly id="decrease-re"></td>
        </tr>

        <tr>
          <td class="lbl">Federal Tax Reduction</td>
          <td><input type="text" class="form-control an an-money" readonly id="decrease-fed"></td>
        </tr>

        <tr>
          <td class="lbl">Total Reduction in Taxes</td>
          <td><input type="text" class="form-control an an-money total" readonly id="decrease-total"></td>
        </tr>
      </table>

      <h3 class="lbl">Tax Increases</h3>
      <table class="table">
        <tr>
          <td class="lbl">PIT Increase</td>
          <td><input type="text" class="form-control an an-money" readonly id="increase-pit"></td>
        </tr>

        <tr>
          <td class="lbl">Additional Sales Tax Increase</td>
          <td><input type="text" class="form-control an an-money" readonly id="increase-sales_tax"></td>
        </tr>

        <tr>
          <td class="lbl">Expanded Sales Tax</td>
          <td><input type="text" class="form-control an an-money" readonly id="increase-expanded-sales"></td>
        </tr>

        <tr>
          <td class="lbl">Federal Tax Increase</td>
          <td><input type="text" class="form-control an an-money" readonly id="increase-fed"></td>
        </tr>

        <tr>
          <td class="lbl">Total Additional Taxes</td>
          <td><input type="text" class="form-control an an-money total" readonly id="increase-total"></td>
        </tr>
      </table>

      <h3>Net change in taxes under SB 76: <input type="text" class="form-control grand-total an an-money" id="net"></h3>
      <p>(A positive/red amount indicates you will pay more, a negative/green amount indicates savings)</p>

        </div>

        <!-- Javascript fun -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.9.46/autoNumeric.js" integrity="sha256-ucU/C0lezZmclEKLkWIrR5KyNGznnJs6YxenkjMhILU=" crossorigin="anonymous"></script>
        <script>
      // These numbers are for the Schuylkill Haven Area School District. Change them for your district! Get the numbers from your district business manager.
      const millage_rate = 14.06;
      const debt_mills = 3;
      var debt_reduction = millage_rate - debt_mills;

      // These numbers are changed by SB 67
      const PIT = 0.0188;
      const new_sales_tax = 0.07;
      const sales_tax_increase = 0.01;


      // Set all of the fields to 0
      function clear_all() {
        $(".an").each(function(){
          $(this).autoNumeric("set", 0);
        });
      }

      // Get the value out of an autoNumeric input field, return a float
      function get(id) {
          var val = $(id).autoNumeric('get');
          if (val == '') {
              val = 0.0;
          }
          return parseFloat(val);
      }

      // Initialize autoNumeric on all of the input elements
      // autoNumeric documentation: http://www.decorplanit.com/plugin/
      $(".an-money").each(function() {
        //display negatives with parentheses instead of a dash
        //$(this).autoNumeric('init', {aSign:'$', nBracket: '(,)', vMin:'-999999999.99'});
        $(this).autoNumeric('init', {aSign:'$', vMin:'-999999999.99'});
      });

      $(".an-perc").each(function() {
        $(this).autoNumeric('init', {aSign:'%', pSign:'s',vMin:'-999999999.99'});
      });

      // Update the calculations when any of the inputs are changed
      $(".calc-input").each( function() {
        $(this).change(function() {
          // Get values from input fields
          var property_value = get('#property-value');
          var earnings = get('#earnings');
          var irs_tax_rate = get("#irs-tax-rate")/100.0;
          var sales_tax_base = get("#sales-tax-base");

          // Calculate total expenses
          var expenses = (get("#exp-food") + get("#exp-clothing") + get("#exp-services") + get("#exp-other"))*12;
          $("#exp-total").autoNumeric('set', expenses);

          /*
             Calculate tax changes
          */

          // Real estate tax amount
          var real_estate = property_value * (millage_rate/1000.0);
          $("#real-estate-tax").autoNumeric('set', real_estate);

          // PIT Increase
          var increase_pit = earnings * PIT;
          $("#increase-pit").autoNumeric('set', increase_pit);

          // R.E. tax reduction
          var decrease_re = property_value * (debt_reduction/1000.0);
          $("#decrease-re").autoNumeric('set', decrease_re);

          // Federal tax reduction
          var decrease_fed = irs_tax_rate * increase_pit;
          $("#decrease-fed").autoNumeric('set', decrease_fed);

          // Total reduction
          var decrease_total = decrease_re + decrease_fed;
          $("#decrease-total").autoNumeric('set', decrease_total);

          // Sales tax increase
          var increase_sales_tax = sales_tax_increase * (sales_tax_base/.06);
          $("#increase-sales_tax").autoNumeric('set', increase_sales_tax);

          // Expanded sales tax
          var increase_expanded_sales = expenses * new_sales_tax;
          $("#increase-expanded-sales").autoNumeric('set', increase_expanded_sales);

          // Federal tax increase
          var increase_fed = decrease_re * irs_tax_rate;
          $("#increase-fed").autoNumeric('set', increase_fed);

          // Total increases
          var increase_total = increase_pit + increase_sales_tax + increase_expanded_sales + increase_fed;
          $("#increase-total").autoNumeric('set', increase_total);

          // Net change
          var net_change = increase_total - decrease_total;
          if (net_change > 0) {
              $("#net").css("color", "#C33");
          } else {
              $("#net").css("color", "#3C3");
          }
          $("#net").autoNumeric('set', net_change);

        });

        // make it so fields that are 0 will be cleared out when you click/tab to them
        $(this).focus( function() {
          if($(this).autoNumeric('get') == 0) {
            $(this).val('');
          }
        });
      });
    </script>
  </body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 7 2017, 08:59 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It doesn't calculate now. Is what you posted with the changes you made?

Also, I don't understand if you want to change the JS variables or add form fields...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 8 2017, 07:14 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(tkalinoski @ Mar 8 2017, 02:48 AM) *

I need help modifying the below code to add fields for millage_rate and debt_mills = 3. These are both constants in the code.

Constants can't be changed by definition: https://developer.mozilla.org/en/docs/Web/J...tatements/const

You might remove the contants from the script, and instead use their values in text fields (are the form users supposed to be able to change those values? If not, maybe it's better to use hidden form fields). Then you get those values the same way as the other text fields in the script (the order might matter, though).

QUOTE
CODE
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vb script:;" data-toggle='collapse' data-target='#irs-tax-rate-info' class="glyphicon glyphicon-question-sign text-muted"></a>
                    </td>

As a sidenote, the above is invalid HTML: the HEAD section is not closed, and the A and TD elements are not open.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:20 PM