Change Value Of A Field On Submit Using Javascript

Question

I would like to add some JavaScript to do the following.

I would have 3 fields like this.

<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />

say if I entered 100 in the first field and 19 in the second field.

it would divide 100 by 19 and round it up to no decimal places, and then replace the value of the third hidden field by the answer, so in the case it would be (100/19) 5.26... rounded up to 6

however I am not sure how to actually implement this.

Answer 1

Say your form looks like this;

<form id="myForm" method="POST">
  <input type="text" name="a" />
  <input type="text" name="b" />
  <input type="hidden" name="c" />
</form>

You can access the form like this;

function doAction(action)
{
  var frm = document.forms.myForm;
  frm.c.value = frm.a.value/frm.b.value;
}

You can trigger the action by adding a button that can be clicked, or setting the form's submit action.

Edit: Doesn't round up, not sure how to do that :(

Answer 2

A dumbed-down way, which assumes your form is document.forms[0]:

<input type="text" name="a" onchange="myFunction" />
<input type="text" name="b" onchange="myFunction" />
<input type="hidden" name="c" />

function myFunction() {
  var inpA = document.forms[0].a;
  var inpB = document.forms[0].b;
  var aVal = parseFloat(inpA.value);
  var bVal = parseFloat(inpB.value);
  if (!isNaN(aVal) && !isNaN(bVal) && bVal !== 0) {
    document.forms[0].c.value = Math.ceil(aVal/ bVal);
  }
}

EDIT: Math.round => Math.ceil

Answer 3

You do this by binding an eventlistner to the from element. You either create your own (Javascript native event handlers) or use your favorit javascript framework. My example is for using the jQuery jQuery bind method javascript framework.

/* first set and id to your input hidden and form element so you can reach it in fast way */
<form id="myForm"><input type="hidden" id="total" name="c" /></form>
/* Javascript code using jquery */

$('#form').bind('submit', function () {
    $('#total').val(function () {
        var num = parseFloat($('#form input[name=a]').val()) / parseFloat($('#form input[name=b]').val());
        return Math.floor(num) === num ? num : Math.floor(num) + 1;
    });
});

Answer 4

After the form elements:

<script type="text/javascript">
    (function() {
        var a= document.getElementsByName('a')[0];
        var b= document.getElementsByName('b')[0];
        var c= document.getElementsByName('c')[0];

        a.onchange=b.onchange=a.onkeyup=b.onkeyup= function() {
            c.value= Math.ceil(a.value/b.value);
        };
    })();
</script>

This recalculates on each key press, remove the keyup binding if you don't want that.

Add a unique id to each input and use document.getElementById to avoid any ambiguity with name. If this form is never going to be submitted you can omit name entirely.

Math.ceil() will return NaN if either value cannot be read as a number, or Infinity if you divide by zero. You may wish to check for these conditions and write a different value.

Answer 5

A nice easy method is to pass the form to a function, and allow that function to do the calculation.

The form should look like:

<form>
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
<input type="button" value="Click" onClick="doCalculate(this.form)" />
</form>

and the javascript:

function doCalculate(theForm){
    var aVal = parseFloat(theForm.a.value);
    var bVal = parseFloat(theForm.b.value);
    var cVal = 0;
    if(!isNaN(aVal) && !isNaN(bVal)){
       cVal = Math.ceil(aVal/bVal);  
    }
    theForm.c.value = cVal;
}

Working example here --> http://jsfiddle.net/azajs/

Edit: This can also be done when the form is submitting by having a similar call in the onsubmit of the form:

<form onsubmit="doCalculate(this);" >
...
</form>