Несколько входов обновляют несколько textarea's

Question

именно то, что описывает заголовок.

Я хочу 1 набор полей ввода 6/7, чтобы иметь возможность обновлять 4/5 разных текстовых поля для разных шаблонов для копирования вставки с помощью входных элементов.

ive попытался использовать getelementsbyclassname, но он, похоже, не работает с несколькими текстовыми областями.

Простой пример для нескольких входов, обновляющих несколько текстовых полей, будет достаточно для игры.

Это то, что у меня есть до сих пор, и оно не завершено.

1 name: <input type="text" name="1stTarget" onblur="tst1(this);" /><br /> 
2 name: <input type="text" name="2ndTarget" onblur="tst1(this);" /><br /> 
Email address: <input type="text" name="3rdTarget" onblur="tst1(this);" /><br /> 
Phone #: <input type="text" name="4thTarget" onblur="tst1(this);" /><br /> 
Schedule: <input type="text" name="5thTarget" onblur="tst1(this);" /><br /> 
<textarea name="result" id="result1" onClick="this.select();" class="disable">Hello 1stTarget, 2ndTarget i would like to confirm your email address 3rdTarget and phone # 4thTarget and the time you will be at work 5thTarget</textarea> 
<br /> 
<textarea name="result2" id="result2" onClick="this.select();" class="disable">1stTarget and 2ndTarget updated their 5thTarget and their 4thTarget including their 3rdTarget</textarea><input type="reset" value="Reset!" /> 

использование

<script type="text/javascript"> 
function tst1(elm){ 
    var trgt=document.getElementById('result1'); 
    trgt.value=trgt.value.replace(elm.getAttribute('name'), elm.value); 
} 
</script> 

Answer 1

Если бы я тебя, я бы не пытался заменить текст в текстовом поле, но вместо того, чтобы просто построить строку вам нужно от ваших входов и установить текст, когда это будет сделано. Что-то вроде ниже будет работать для этого:

Примечание Основная функция вам нужно, это JQuery-х eq()

$('#fill').click(function(elm) { 
 
    var hasErrors=false; 
 
    var $updateElms=$('.update'); 
 
    $updateElms.removeClass('hasError'); 
 
    $updateElms.each(function(i,e){ 
 
     if($(e).val()==''){ 
 
      hasErrors=true; 
 
      $(e).addClass('hasError'); 
 
     } 
 
    }); 
 
    if(hasErrors) return; 
 
    var name1 = $updateElms.eq(0).val(); 
 
    var name2 = $updateElms.eq(1).val(); 
 
    var email = $updateElms.eq(2).val(); 
 
    var phone = $updateElms.eq(3).val(); 
 
    var schedule = $updateElms.eq(4).val(); 
 
     
 
    var text0 = 'Hello '+name1+', '+name2+' I would like to confirm your email address '+email+' and phone # '+phone+' and the time you will be at work '+schedule; 
 
    var text1 = 'Hi '+name1+', '+name2+' we have recieved your confirmation that your email address is '+email+' and phone # is '+phone+' and that you will be at work '+schedule; 
 
    var text2 = 'Hello '+name1+', '+name2+' we have attempted to reach you via your email address '+email+' and phone # '+phone+' to advise that you missed your shift at '+schedule; 
 
    
 
    $('.result:eq(0)').val(text0); 
 
    $('.result:eq(1)').val(text1); 
 
    $('.result:eq(2)').val(text2); 
 
    });

.hasError{ 
 
    color:red; 
 
    background-color:#F9B9B9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
1 name: 
 
<input type="text" class="update"/> 
 
<br /> 
 
2 name: 
 
<input type="text" class="update"/> 
 
<br /> 
 
Email address: 
 
<input type="text" class="update"/> 
 
<br /> 
 
Phone #: 
 
<input type="text" class="update"/> 
 
<br /> 
 
Schedule: 
 
<input type="text" class="update"/> 
 
<br /> 
 
<input type="button" id="fill" value="Fill Textareas"/> 
 
<br /> 
 
<textarea name="result" class="disable result"></textarea> 
 
<br /> 
 
<br /> 
 
<textarea name="result" class="disable result"></textarea> 
 
<br /> 
 
<br /> 
 
<textarea name="result" class="disable result"></textarea>             
 
<br /> 
 
<input type="reset" value="Reset!" />using