Copying data from one text box to another in html automatically

HTML & CSS
1

Hi,

I want to copy data from one text box to another in html automatically i.e., if I edit one textbox the other should display the same simultaneously. Can someone help me…

Thanks in advance.

With Regards,
Prasanthi

2

You’ll need to use javascript with onchange, or possibly onkeypress / onkeydown or something.

I’m no javascript expert, but…

<form name="theform" action="something" method="something" />
 <input type="text" name="input1" onkeypress="document.theform.input2.value = this.value" />
 <input type="text" name="input2" />
</form>

or something?

3

Thanks so much…

at the same time is it possible that we can display the same data in more than one textbox(without using functions)… if so can you just show me an example please.

Thanks once again.

4

No, i would use a function for that then. You can put multiple commands separated by a semi-colon, but it can get a bit too long sometimes.

onkeypress="document.theform.input2.value = this.value; document.theform.input3.value = this.value; ... "

Also, I think the best idea is to use a seperate script file rather than putting the javascript ‘inline’, but I’m not an expert on doing that either.

5

Also it’s worth bearing in mind what will happen if the user doesn’t have JavaScript.

As a rule, you shouldn’t use JavaScript for critical functionality so if this function is required in order for someone to fill out a form then I’d suggest using an alternative method.