Display values in textbox on selecting checkbox

View Latest Questions and Answers|Ask Questions?|Tutorials

Home Tutorial Javascript Display values in textbox on selecting checkbox

Display values in textbox on selecting checkbox
Posted on: August 12, 2010 at 12:00 AM

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:

Related Tags for Display values in textbox on selecting checkbox:

«Previous Index Next»

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics