Display values in textbox on selecting checkbox
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.
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:
