Hi all i am new to jQuery. Suppose I have two HTML text boxes. How can I make it happen that if I write in text box A then same value goes to textbox B and if I write in B then it goes to A and same as delete the text. How can this be done in jQuery?
6 Answers
This is a more dynamic way using jQuery:
$(document).ready(function() {
$(".copyMe").keyup(function() {
$(".copyMe").val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="copyMe" type="text" placeholder="Enter a text"/>
<input class="copyMe" type="text" />
<input class="copyMe" type="text" />
<input class="copyMe" type="text" />
-
Thanks man your solution can work for n text boxes. Thanks for help. Sep 22, 2011 at 14:24
-
2Cool, but this solution does not work when copying the text into the text field (by using the mouse). In this case one could use .change() Oct 25, 2016 at 9:03
This is quite easy:
$("#textBoxA").keyup(function(){
$("#textBoxB").val($("#textBoxA").val());
});
$("#textBoxB").keyup(function(){
$("#textBoxA").val($("#textBoxB").val());
});
A slightly more efficient way than the most upvoted answer is:
var $inputs = $(".copyMe");
$inputs.keyup(function () {
$inputs.val($(this).val());
});
http://css-tricks.com/snippets/jquery/keep-text-inputs-in-sync/
I ran into this challenge today. I made a small plugin to make the code more readable and to handle text inputs, but also select fe.
When you include the plugin, you can simply use $("selector").keepInSync($("otherselector"));
$.fn.keepInSync = function($targets) {
// join together all the elements you want to keep in sync
var $els = $targets.add(this);
$els.on("keyup change", function() {
var $this = $(this);
// exclude the current element since it already has the value
$els.not($this).val($this.val());
});
return this;
};
//use it like this
$("#month1").keepInSync($("#month2, #month3"));
$("#text1").keepInSync($("#text2"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Two way sync</h1>
<select id="month1">
<option value="">Please select a moth</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
</select>
<select id="month2">
<option value="">Please select a moth</option>
<option value="jan">1</option>
<option value="feb">2</option>
<option value="mar">3</option>
</select>
<select id="month3">
<option value="">Please select a moth</option>
<option value="jan">Jan</option>
<option value="feb">Feb</option>
<option value="mar">Mar</option>
</select>
<br>
<input type="text" id="text1">
<input type="text" id="text2">
You'll have to put a function call on each textbox's onchange
events, that will take the value of one box and put it in the other.
Using Snicksie's method, you can see the live demo below. I have included a button to reset the textbox values as well.