Home Tutorial Javascript Display values in textbox on selecting checkbox

 
 

Share on Google+Share on Google+
Display values in textbox on selecting checkbox
Posted on: August 12, 2010 at 12:00 AM
Advertisement
In this section, you will learn how to perform action on selecting the checkbox and display the first five text box values into next five.

Display values in textbox on selecting checkbox

Here we are going to perform action on selecting the checkbox and display the first five text box values into next five. We have ten text boxes and a checkbox. As the user enters value in first five textboxes and select the checkbox, script take the values and copy them into another five textboxes.

Here is the code:

<script>
function
convertField(){
if (document.form.check.checked){
var d1=document.form.text1.value;
document.form.text6.value=d1;
var d2=document.form.text2.value;
document.form.text7.value=d2;
var d3=document.form.text3.value;
document.form.text8.value=d3;
var d4=document.form.text4.value;
document.form.text9.value=d4;
var d5=document.form.text5.value;
document.form.text10.value=d5;
}
else{
document.form.text6.value="";
document.form.text7.value="";
document.form.text8.value="";
document.form.text9.value="";
document.form.text10.value="";
}
}
</
script>
<
form name="form">
<
table>
<
tr>
<
td>TextField 1</td>
<
td><input type="text" name="text1"></td>
</
tr>
<
tr>
<
td>TextField 2</td>
<
td><input type="text" name="text2"></td>
</
tr>
<
tr>
<
td>TextField 3</td>
<
td><input type="text" name="text3"></td>
</
tr>
<
tr>
<
td>TextField 4</td>
<
td><input type="text" name="text4"></td>
</
tr>
<
tr>
<
td>TextField 5</td>
<
td><input type="text" name="text5"></td>
</
tr>
<
tr>
<
td>TextField 6</td>
<
td><input type="text" name="text6"></td>
</
tr>
<
tr>
<
td>TextField 7</td>
<
td><input type="text" name="text7"></td>
</
tr>
<
tr>
<
td>TextField 8</td>
<
td><input type="text" name="text8"></td>
</
tr>
<
tr>
<
td>TextField 9</td>
<
td><input type="text" name="text9"></td>
</
tr>
<
tr>
<
td>TextField 10</td>
<
td><input type="text" name="text10"></td>
</tr>
<
tr>
<
td><input type="checkbox" name="check" onClick="convertField();"></td>
</
tr></table>
</
form>

Output:

As the user select the checkbox after inserting the values in first five textbox, the same values will get displayed in next 5 textboxes:

Advertisement

Related Tags for Display values in textbox on selecting checkbox:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com