Question

I would like to make a form in HTML where a user enters some data, and via JS that data is used to calculate results that are output to result fields in real time. By that I mean that say I enter Age (24) and Height (1.82m), a field will automatically display the result of 24 * 1.82 after the 1.82 is typed.

Also I would like to know how to output a web page as PDF.

Answer 1

First question :

function calc() {
   var a = parseFloat(document.getElementById('field1').value);
   var b = parseFloat(document.getElementById('field2').value);
   document.getElementById('total').value = a * b;
}

This gets the values from 2 fields (field1 and field2), multiplies them together and then updates the value of the total input. Example HTML used with the above would be :

<input id="field1" onblur="calc()" value="24" />
<input id="field2" onblur="calc()" value="1.82" />
<input id="total" value="" />

the onblur attribute calls the specified function (calc()) when the input looses focus. Note that this is a very simple example and contains no error checking (ie there is a number present etc)

Second question :

For creating PDFs from HTML wkhtmltopdf is the best I have used – its simple to use and has lots of wrappers for different languages (server side – not client side). It runs as a standalone application too (on a server). Oh and its free !