多個輸入更新多個文字區域的

Question

正是爲題介紹。

我想我1套6/7輸入字段，以便能夠以更新不同的模板4/5不同的textareas從與輸入元素複製粘貼。使用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

如果我是你，我不會試圖取代textarea的文本，而是簡單地建立從您輸入需要的字符串，並設置文本的時候這樣做了。像下面將針對工作：

注意你所需要的主要功能是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