CISC 1400: Dynamic Web Page (with JavaScript)

HTML form: Reading Input and Writing Output

It's possible to include a form in which to but control objects to interact with the users:

• Text box for entering a line of text
• Push button for selecting an action
• Radio buttons for making one selection among a group of options
• Check boxes for selecting or deselecting a single, independent option

You can then define JavaScript function to perform certain action when the push button is clicked, and to read inputs from text box, radio buttons.

Below is an example with a form where there is a text box, two push buttons (OK and Cancel). The JavaScript function onOK basically read the input from the text box, composing it with Hello, and then write the greeting message back into a division in the form.

<form name="demo">
Your name: <input type = "text" name = "name" id = "name" size = "15" maxlength = "15" />
<input type="button" value="OK" onclick="onOK()" />
<input type="button" value="Cancel" onclick="onCancel()" />
<div id = "greeting"></div>
</form>


<script type = "text/javascript">

function onOK() {

var x = document.getElementById("name").value;


var figs = "<font color=orange><b> "+"Hello  " +  x; 
figs = figs + "<br></font></b>";

document.getElementById("greeting").innerHTML = figs; 
}
</script>