Multiplying 2 inputs in HTML Form using Javascript

Question

I have an HTML form. In my template the user inputs the value of the monthly costs which is added and appears in the Total Monthly Expense using the id Total3.

I have included another input with the number of months for the user to include. I am trying to multiply the Total Monthly Expense with the number of months typed in by the user without a submit button or refresh to be added in overhead_total.

I have tried to get the innerelement but it got me an error because initially there is no total yet calculated.

My backend is Django.

Here is the HTML template:

                <h5>2. Working capital calculation</h5>
                <table class="table table-hover text-nowrap table-borderless">
                  <thead>
                    <tr>
                      <th scope="col">Monthly Cost</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <input
                          placeholder="Type in the Monthly Cost"
                          autocomplete="off"
                          type="text"
                          class="form-control"
                          name="item_11"
                          id="item_11"
                          {% if form.is_bound %}value="{{ form.item_11.value }}"{% endif %}/>
                          {% for err in form.item_11.errors %}
                            <small class="text-danger mb-2 ml-2">{{ err }}</small>
                          {% endfor %}
                      </td>
                      <td>
                        <h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
                        <input
                          autocomplete="off"
                          type="number"
                          class="form-control w-25 subtotal-group subtotal-group-3"
                          name="item_11_amount"
                          id="item_11_amount"
                          style="float:left"
                          {% if form.is_bound %}value="{{ form.item_11_amount.value }}"{% endif %}/>
                          {% for err in form.item_11_amount.errors %}
                            <small class="text-danger mb-2 ml-2">{{ err }}</small>
                          {% endfor %}
                      </td>
                    </tr>
                    <thead class="table-light">
                      <tr>
                        <th scope="col">Total Monthly Expense</th>
                        <th scope="col" id="Total3"></th>
                      </tr>
                    </thead>
                    <tr>
                      <td>
                        <h6>How many months do you think you’ll need to cover your overhead?</h6>
                      </td>
                      <td>
                        <input
                          autocomplete="off"
                          type="number"
                          class="form-control w-25"
                          name="no_months"
                          id="no_months"
                          style="float:left"
                          {% if form.is_bound %}value="{{ form.no_months.value }}"{% endif %}/>
                          {% for err in form.no_months.errors %}
                            <small class="text-danger mb-2 ml-2">{{ err }}</small>
                          {% endfor %}
                      </td>
                    </tr>
                    <thead class="table-light">
                      <tr>
                        <th scope="col">Total Overhead required over indicated period</th>
                        <th scope="col" id="overhead_total"></th>
                      </tr>
                    </thead>

Here is the scripts

    <script>
    const q=(e,n=document)=>n.querySelector(e);
    const qa=(e,n=document)=>n.querySelectorAll(e);
    const results={};
    console. log(results)
    qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){

      results[ this.name ]=Number( this.value );

      const resultGroupSet3 = [...qa('.subtotal-group-3')]
                              .map(s => Number(s.value))
                              .reduce((a,v) => a+v);
      q('th#Total3').textContent = resultGroupSet3;

      console.log('results', results);
    }));
    </script>

Marcus Parsons · Accepted Answer · 2021-09-26 04:03:03Z

We meet again, A_K!

Since resultGroupSet3 is a number, you can immediately grab the value from the no_months input, multiply it by that result set and then set the appropriate element from there:

const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console. log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){

  results[ this.name ]=Number( this.value );

  const resultGroupSet3 = [...qa('.subtotal-group-3')]
                          .map(s => Number(s.value))
                          .reduce((a,v) => a+v);
  q('th#Total3').textContent = resultGroupSet3;

  //Push out the result of multiplying the number of months with the result subtotal
  q('th#overhead_total').textContent = Number(q('#no_months').value) * resultGroupSet3;

  console.log('results', results);
}));

If you get some weird funkiness with the multiplication, wrap the multiplication line in a set of parenthesis and call .toFixed() on it to control how many decimals are shown:

q('th#overhead_total').textContent = (Number(q('#no_months').value) * resultGroupSet3).toFixed(2);

Collectives™ on Stack Overflow

Multiplying 2 inputs in HTML Form using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related