|
|
indentical forms
capability in working with forms is of paramount importance as a web developer. They’re used to gather important information from the user, such as credit card information. This obviously has to be correct, so you must learn these techniques.
In the below example script, the fields of the first form are duplicated in the field of the second. You would usually use this in a more complicated form to reduce the typing time the user uses. It is common place to need to display the same information in different portions of the form so the user knows and understands what is required of them. Data entry is expensive.
The duplicate text entered in a form doesn’t have to be displayed. Rather, it has to be stored in a variable or array item and made available to the rest of the document. The text is inputted through the use of input fields. Once typed, it is stored. This stored data can then be pushed in to input fields that are of the hidden type. The hidden input data is then sent to the server to be processed when the user clicks the submit button, all without actually displaying the duplicated text.
<html>
<head>
<script type="text/javascript">
function sameInfo() {
for (i=0; i<document.myForm1.option.length; i++) {
document.myForm2.option[i].value=document.myForm1.option[i].value;
}
}
</script>
</head>
<body>
<form name="form1">
First name: <input type="text" name="option"><br>
Last name: <input type="text" name="option"><br>
Address: <input type="text" name="option"><br>
E-mail: <input type="text" name="option"><br>
<br>
<input type="button" onclick="sameInfo()" value="Same information below"><br>
</form>
<form name="form2">
First name: <input type="text" name="option"><br>
Last name: <input type="text" name="option"><br>
Address: <input type="text" name="option"><br>
E-mail: <input type="text" name="option"><br>
</form>
</body>
</html>
|
|
