Search code examples
javascriptgetelementbyid

Calculate real-time javascript value and pass to input field, not textarea


I have a code very similar to this one, perform calculations and present the values ​​in textarea fields. I would like to know how you could pass these values ​​to a field like:

  <form role="form">
  <div class="form-group col-md-3">
  <label for="thingsId">Numbers of things</label>
  <input type="text" class="form-control" name="thingsName" id="thingsId"  >
  </div>

And not this:

<td><textarea row="1" type="number" id="thingsId" name="thingsName"></textarea></td>

This code uses exactly the same conditions, but I would like a result that wasn't in a textarea

http://jsfiddle.net/1wrnL3jp/5/ Topic of discussion: calculating form field input value from other values with onfocus


Solution

  • Solved changing from document.getElementById ('thingsID'). InnerHTML to document.getElementById ('thingsID').value

    In Example:

    function myCalc() {
    var num1 = document.getElementById('WG_Collected').value;
    var num2 = document.getElementById('Proof').value;
    var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
    document.getElementById('PG_Collected').innerHTML = PG_Collected.toFixed(2);
    }
    
    document.getElementById("WG_Collected").addEventListener("change", myCalc, true);
    document.getElementById("Proof").addEventListener("change", myCalc, true);
    

    Change to:

    function myCalc() {
    var num1 = document.getElementById('WG_Collected').value;
    var num2 = document.getElementById('Proof').value;
    var PG_Collected = parseFloat(num1) * parseFloat(num2)/100;
    document.getElementById('PG_Collected').value= PG_Collected.toFixed(2);//().value//
    }
    
    document.getElementById("WG_Collected").addEventListener("change", myCalc, true);
    document.getElementById("Proof").addEventListener("change", myCalc, true);