Textarea realtime update by multiple input values

Question

This is my form example:

<form action="" method="POST">
    <input type="text" name="firstTarget" />
    <input type="text" name="secondTarget" />
    <input type="text" name="thirdTarget" />
    <textarea name="result">I have this text and I want to update it using firstTarget. After that I want to use secondTarget and thirdTarget</textarea>
</form>

I want to update my textarea value in realtime by replacing the words firstTarget, secondTarget and thirdTarget with the actual values from firstTarget, secondTarget and thirdTarget inputs.

Answer 1

HTML:

<form action="" method="POST">
    <input type="text" name="firstTarget" onblur="tst(this);" />
    <input type="text" name="secondTarget" onblur="tst(this);" />
    <input type="text" name="thirdTarget" onblur="tst(this);" />
    <textarea style="width:500px; height: 100px;" name="result">I have this text and I want to update it using firstTarget. After that I want to use secondTarget and thirdTarget</textarea>
</form>

And javascript:

function tst(elm){
    var trgt=document.getElementsByTagName('textarea')[0];
    trgt.value=trgt.value.replace(elm.getAttribute('name'), elm.value);
}

Working jsfiddle demo here

EDIT:
should you want to update multple instances of your needles like firstTarget , then you need to create the regex on the fly so you can pass it the global flag.

function tst(elm){
    var trgt=document.getElementsByTagName('textarea')[0];
    trgt.value=trgt.value.replace(RegExp(elm.getAttribute('name'), 'g'), elm.value);
}

Working jsfiddle demo here

Answer 2

You can do something like this:

/* cache original value so we keep the keywords*/
var txt=$('textarea').val();


$('input').keyup(function(){
   var newText=txt;
    newText=newText.replace( this.name, this.value);    
    $('textarea').val(newText);    
});

One issue however is if textarea is not set as readonly and user changes anything within it this won't work as it relies on storing the original value and changing that. Would need to know more about use case for this setup to help advance it further.

Same issue exists in other solutions as well if user touches any of the keywords all will fail

DEMO

Here's a solution that stores the input value on every keyup so textarea can be edited by user as well.

$('input').keyup(function(){
    /* value to be replaced is stored in data object*/
    var regVal=$(this).data('replace');    
   var newText=$('textarea').val().replace( regVal, this.value); 
    /* store value that will get replaced*/  
    $(this).data('replace', this.value)     
    $('textarea').val(newText);    
}).each(function(){
    /* on page load set initial replacement value as name of input*/
    $(this).data('replace', this.name); 
});

Only limitation is it assumes no duplicate entries by user

DEMO

Answer 3

you can use this code to do it:

$('firstTarget').onChange(function(){
      var str =  $('result').val();
      str.replace(firstTarger, $( this ).attr('name'));
      $('result').text(str);
 }):

 $('secondTarget').onChange(function(){
      var str =  $('result').val();
      str.replace(firstTarger, $( this ).attr('name'));
      $('result').text(str);
 }):

$('thirdTarget').onChange(function(){
      var str =  $('result').val();
      str.replace(firstTarger, $( this ).attr('name'));
      $('result').text(str);
 }):

enjoy!!!