Passing a set of user entered data to another area of a form

Some time we have to copy the values or data of some entered fields to another group of fields. The same value as entered by the user will be copied to another set of similar fields on click of a radio button. For example we have asked our visitors to submit there residence address and office address. For some visitors both may be same so they can click one period button to copy the address entered as office address to the residence address. This will help them as they need not enter the same address again. We will provide one more period button to clear the residence address if it is clicked accidentally.

Here we will use the onclick event of a radio ( or period ) button to execute a function name data_copy. This function we will keep inside head tag. Inside this function we will copy the value of first group entered data to the second group corresponding fields. The second radio button when clicked it will clear all the data of second group of fields.

We will monitor which radio button is clicked by using a if condition check if document.form1.copy[0].checked is true or not ( first radio button )

demo of copy data

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;
document.form1.state2.value=document.form1.state.value;
}else{
document.form1.add12.value="";
document.form1.add22.value="";
document.form1.city2.value="";
document.form1.state2.value="";

}

}

</script>
</head>


<body bgcolor="#ffffff" >
<table width='500' 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><input type=text name=state></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><input type=text name=state2></td></tr>


<tr><td colspan=2 align=center><input type=submit value=Submit> </form></td></tr>
</table>
</body>
</html>

Number of User Comments : 2


Google+

shankar

03-12-2014

The above radio button example is very helpful to understand the onclick event to copy the field values and

How, if a table contains radio button and column names in a html form on while loop when a radio button and update command button clicked the second html form should reflect the corresponding fields in the form1.
sarojini rout

08-01-2015

Thank you so much.

Post Comment This is for short comments only. Use the forum for more discussions.







OPINION POLL

What is the most important factor of a web site
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2015 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer