synchronize two HTML elements

Question

I have a text area

<textarea id="realAreaWhereUserTypes"></textarea>

And i have a hidden input field liek follow.

<input id="hiddenUserInput" />

The textArea contains the value like follows :

This is my friend @bingo_mingo and this is my another friend @lingo_tingo

The hidden field fields contains the same text but in different format.

This is my friend @a142f2f0-1eda-11e3-ad5f-3c970e02b4ec:bingo_mingo and this is my another friend @a143edr0-1eda-11e3-ad5f-3c970e02b4ec:lingo_tingo

I want these two fields to synchronize. And whenever i delete something from the real text Area the hidden should get updated.Also if i start deleting the @admin_admin in the main text the hidden text should update accordingly.

Is there any jquery plugin avaiable avaiable for this.

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

I haven't used one. Have you looked for any? This may be one: http://github.com/ain/jquery-fieldsync Also, this question is a duplicate: Synchonise 2 input fields, can it be done using jQuery?

edited May 23 '17 at 10:25

Community

1
1

answered Sep 16 '13 at 14:40

tjons

4,749
5
28
36

score 1 · Answer 2 · edited Sep 16 '13 at 14:45

1

Use .clone() from Jquery. It's easy http://api.jquery.com/clone/

edited Sep 16 '13 at 14:45

daniel__

11,633
15
64
91

answered Sep 16 '13 at 14:43

JK84

325
1
2
13

score 0 · Answer 3 · answered Sep 16 '13 at 14:43

You can create a listener that will update the hidden field with the updated text whenever it is changed.

$("#realAreaWhereUserTypes").bind("keyup paste", function() {
    var newStr = formatName($(this).val());
    $("#hiddenUserInput").val(newStr);
}); 

function formatName(str){
   // Do whatever change you need here.
}

synchronize two HTML elements

3 Answers3