Warning: Illegal string offset 'debug' in /nfs/c02/h06/mnt/45997/domains/fiz-ix.com/html/wp-content/plugins/allow-javascript-in-posts-and-pages/allowJS.php on line 17

Warning: Use of undefined constant E_NONE - assumed 'E_NONE' (this will throw an Error in a future version of PHP) in /nfs/c02/h06/mnt/45997/domains/fiz-ix.com/html/wp-content/plugins/allow-javascript-in-posts-and-pages/allowJS.php on line 17

There are several ways to call a javascript function from an HTML form to process user-supplied values and then return the results to the user including onclick, onchange, and onkeyup. Using a simple form that takes an input value and returns the square of this value to the user, I demonstrate these three methods below.

First, let’s look at onclick. This method requires that a button be clicked by the user before the javascript is executed and the results are retuned.

Input Number:
Input Squared:

 

The code the generate this table is as follows. The form includes a button that calls the javascript function when it is clicked.

<script type='text/javascript'>
function processInput() {
var myVars=document.getElementById('myTable');
var myInput=myVars.input.value;
if (isNaN(myInput)) {
myVars.output.value = "Not a valid input";
}
else {
myVars.output.value = Math.pow(myInput,2);
}
return false;
}</script>

<form id="myTable" action="#">
<table border="1" align="center">
<tbody>
<tr>
<td align="right">Input Number:</td>
<td align="left"><input type="text" name="input" size="64" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input onclick="processInput()" 
type="button" value="Calculate" /></td>
</tr>
<tr>
<td align="right">Input Squared:</td>
<td><input type="text" name="output" readonly="readonly" size="64" /></td>
</tr>
</tbody>
</table>
</form>

Next let’s look at onchange. This method calls the javascript function whenever the corresponding field of the form is changed. When the user enters a value then presses return or tab or clicks on another field, the javascript is executed.

Input Number:
Input Squared:

 

The javascript for the above example is exactly the same as the first example but the HTML code is slightly different. There is no button and the function is called from the input text field.

<form id="myTable" action="#">
<table border="1" align="center">
<tbody>
<tr>
<td align="right">Input Number:</td>
<td align="left"><input type="text" name="input" size="64"
onchange="processInput()" /></td>
</tr>
<tr>
<td align="right">Input Squared:</td>
<td><input type="text" name="output" readonly="readonly" size="64" /></td>
</tr>
</tbody>
</table>
</form>

Finally, let’s look at onkeyup. This method calls the javascript anytime the user releases a key on the keyboard. This method will update the output with every change supplied by the user.

Input Number:
Input Squared:

 

Again, the javascript for this form is the same as the first form but the HTML is a little different. The function is again called from the text field but this is done whenever a key is released by the user.

<form id="myTable" action="#">
<table border="1" align="center">
<tbody>
<tr>
<td align="right">Input Number:</td>
<td align="left"><input type="text" name="input" size="64"
onkeyup="processInput()" /></td>
</tr>
<tr>
<td align="right">Input Squared:</td>
<td><input type="text" name="output" readonly="readonly" size="64" /></td>
</tr>
</tbody>
</table>
</form>