|
|
Copying selected index, copying data from one to other placeCopying user entered data from one area to the other is required to help the user as they need not enter the same data again. For example if we are asking the user to enter home and office address and for a user if both are same then the user can click a button or period button saying Same As Above . They need not enter the data again. This we have discussed in the tutorial on how to copy form field data from on place to other. Now we will try the same example with a drop down list box included. To our pervious tutorial we will add some changes and we will make the state list a drop down with some few ( example ) data inside it. From this state list what ever is selected as state by the user in the first group will be copied along with the other text field data to the second group and the same state in the state list in second group will be selected.
Once the period button is clicked (or this can be associated with any other event) then first we have to find out which item is selected from the list box one (that is state list) by looping through all the elements of the list box and checking them. For this we will use the length property of the list box and assign its value to the for loop. The loop will pass through each element of the first list box. We will use one if condition inside the for loop to check which of the option is selected. Once we found the option selected we will make the corresponding option of the second groups list box selected. We will be using the index value for the options so both the list box should maintain the same order for the options. Here is the code for this part.
for(i=document.form1.state.options.length-1;i>=0;i--)
{
if(document.form1.state.options[i].selected)
document.form1.state2.options[i].selected=true;
}
Here is the demo of the above code.
Here is the full code
<html>
<head>
<title></title>
<script type="text/javascript">
function data_copy()
{
if(document.form1.copy[0].checked){
document.form1.add12.value=document.form1.add1.value;
document.form1.add22.value=document.form1.add2.value;
document.form1.city2.value=document.form1.city.value;
for(i=document.form1.state.options.length-1;i>=0;i--)
{
if(document.form1.state.options[i].selected)
document.form1.state2.options[i].selected=true;
}
}else{
document.form1.add12.value="";
document.form1.add22.value="";
document.form1.city2.value="";
document.form1.state2.options[0].selected=true;
}
}
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<table width='400' border='0' cellspacing='1' cellpadding='0'>
<form name=form1 method=post action='http://www.plus2net.com'>
<tr><td colspan=2><b>Ofice Address</b></td></tr>
<tr><td >Address 1</td><td><input type=text name=add1></td></tr>
<tr><td >Address 2</td><td><input type=text name=add2></td></tr>
<tr><td >City</td><td><input type=text name=city></td></tr>
<tr><td >State</td><td><SELECT NAME="state" >
<Option value="One">One</option>
<Option value="Two">Two</option>
<Option value="Three">Three</option>
<Option value="Four">Four</option>
</SELECT>
</td></tr>
<tr><td >
<b>Residence Address</b></td><td><input type=radio name=copy value='yes' onclick="data_copy()";>Same as above
<input type=radio name=copy value='no' onclick="data_copy()";>Not Same
</td></tr>
<tr><td >Address 1</td><td><input type=text name=add12></td></tr>
<tr><td >Address 2</td><td><input type=text name=add22></td></tr>
<tr><td >City</td><td><input type=text name=city2></td></tr>
<tr><td >State</td><td><SELECT NAME="state2" >
<Option value="One">One</option>
<Option value="Two">Two</option>
<Option value="Three">Three</option>
<Option value="Four">Four</option>
</SELECT>
</td></tr>
<tr><td colspan=2 align=center><input type=submit value=Submit> </form></td></tr>
</table>
</body>
</html>
| |
| | |
|
|
|
|
|
