SQL PHP HTML ASP JavaScript articles and free scripts to download
 
 

Copying selected index, copying one list to other, taking selected index. Select index, copy list box

Copying 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.

Ofice Address
Address 1
Address 2
City
State
Residence AddressSame as above Not Same
Address 1
Address 2
City
State
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>
Further readings
Hide and displaying layers through buttons
Hide and displaying layers through radio buttons
OnClick event of period button
Default value by using OnFocus event of a text box
Showing help text by using onfocus and onBlur event triggers
Text box click event removing data
Text box onBlur click event changing case
Selecting all the data of inside textarea by clicking
Counting the characters dynamically inside a textarea and setting a limit
Copying a set of textbox entered data to another area of a form
Copying data along with drop down list box selection inside a form
Managing browser status bar message onMouseOver & onMouseOut events of a link
OnMouseOver image changing over a link
Further readings
Javascript Form Validation
Period button Validation of a form
How to limit number of checkboxes allowed to be clicked inside a form
Checkbox Validation of a form
Displaying checked value of a check box array
Enable or disable of a text box by a checkbox
All Checking & Un checking in a group of checkboxes by single button
Adding options to a drop down list box
Removing options from a drop down list box
Moving options from one drop down list box to other
Dynamic population of second list box based on value of first list box
 
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts
PHP
JavaScript
JavaScript Tutorials
Popular Tutorials
Drop down list
Timer function
JavaScript Tutorials
String
Array
Date & Time
Form Validation
Event Handling
Math Functions
Loops & structure
JavaScript Forum
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.