Javascript math form fields

Question

I'm building a form with some javascript math functions and can't seem to get the 3rd field to work as I want

• When you enter 100 in the blue price box field 'How much would you like to be paid for selling this bottle'
• Then 25 is put into the next field which is correct.
• but the SELL PRICE INCLUDING TAX field isn't working, It should take 100 then add the next field so in this case 125 then multiply it by 1.125. To give the answer $140.63

https://www.cloudwine.com.au/list-private-wine

---

FORM FIELDS

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />

---

JAVASCRIPT

function output(){

    var startPriceV2 = jQuery( "#CAT_Custom_15" ).val();

    jQuery( '#CAT_Custom_14' ).val( parseInt(startPriceV2) * (0.25) ).toFixed(2);

    var cloudCom = jQuery( '#CAT_Custom_14' ).val();            

    jQuery( '#CAT_Custom_13' ).val( parseInt(startPriceV2) + parseInt(cloudCom) * (1.125) ).toFixed(2);

}

Answer 1

Your toFixed() is on a jQuery element, not on the number value.

Also, toFixed() returns a String, I used the + operator to convert it to a number.

I've stored the calculations in variables instead of fetching them from your page again. This improves performance by reducing jQuery calls..

Change the JS to this:

function output(){
                 
  var startPriceV2 = +jQuery( "#CAT_Custom_15" ).val();
  var tax = +(startPriceV2 * (0.25)).toFixed(2);
  var cloudCom = +((startPriceV2 + tax) * 1.125).toFixed(2);      

  jQuery( '#CAT_Custom_14' ).val( tax );  
  jQuery( '#CAT_Custom_13' ).val( cloudCom );

}

label {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />

---

You can also do this without jQuery, which is preferred by many developers.

function output(){   

  var priceInput = document.getElementById('CAT_Custom_15');
  var commisionInput = document.getElementById('CAT_Custom_14');
  var totalInput = document.getElementById('CAT_Custom_13');
                 
  var startPriceV2 = +priceInput.value;
  var commision = +(startPriceV2 * (0.25)).toFixed(2);
  var cloudCom = +((startPriceV2 + commision) * 1.125).toFixed(2);   
  
  commisionInput.value = commision;
  totalInput.value = cloudCom;

}

label {
  display:block;
}

<label for="CAT_Custom_15"><b>How much would you like to be paid for selling this bottle?</b></label>
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox price bborder" />

<label for="CAT_Custom_14">Cloudwine Commission 25%</label>
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox price" readonly="readonly" />

<label for="CAT_Custom_13">SELL PRICE INCLUDING TAX</label>
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox price" readonly="readonly" />