I want to copy data from one text box to another in html automatically i.e., as I edit the first text box the second one should reflect the same spontaneously.
4 Answers
call javascript function on onkeypresss
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
EDITED USE onkeyup or onblur instead
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
</head>
<body>
<input type="text" name ="a" id="copy_from" onkeyup="copy_data(this)"/>
<input type="text" name ="a" id="copy_to"/>
</body>
</html>
1 Comment
Greg Hewgill
That first line could be simply
var a = val.value. There's no need to look up the element using the id of the element that you already have.In jQuery, something like this:
$("#txtBox1").keypress(function() {
$("#txtBox2").val($(this).val());
}
3 Comments
Pointy
@Andy E I used to wonder why people would get touchy about "use jQuery problem solved" responses, but it's starting to bug me too :-) (and I'm a huge jQuery fan)
womp
@Andy E's head - the code posted does exactly what he needs, and I saw no mention of "no jquery" either. jQuery makes handling events simple and automatically cross-browser.
Andy E
@Pointy, @womp: I think jQuery's brilliant, but I would hate to be a newcomer to a programming language, wanting to learn the ins and outs of said language and whenever I asked for help I was answered with a "use x framework" with no other explanation. It's strange, you don't really see it for other languages but you do with Javascript/jQuery.
You do easily with JQuery:
<input type="text" id="box1" />
<input type="text" id="box2" />
<script type="text/javascript">
$(function(){
$("#box1").keypress(function()
{
$("#box2").val($(this).val());
}
});
</script>
2 Comments
Andy E
You can easily do it without jQuery too. I don't understand the requirement to force-feed people with jQuery, sometimes jQuery isn't a necessity and sometimes people need to learn how to use the DOM properly first.
Sarfraz
@Andy E's head: Just to educate people how easy it is to do the things with jquery and solve cross browsers issues out of the box otherwise they will be using old style ways. We need to inform them to include jquery tag :)
You can achieve by this...
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
}
}
To add more fields, just add to the parameters shown above...like this:
f.billingstate.value = f.shippingstate.value;
f.billingzip.value = f.shippingzip.value;
The HTML for the form you will use looks like this:
<b>Mailing Address</b>
<br><br>
<form>
Name:
<input type="text" name="shippingname">
<br>
City:
<input type="text" name="shippingcity">
<br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<P>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname">
<br>
City:
<input type="text" name="billingcity">
</form>
1 Comment
Pratik Bhatt
The above code is not working can you please check it again