複数のフォームからの値をカーソル位置の同じテキストエリアに挿入する

Question

別のフォームフィールドの値を1つのテキストエリアに挿入したい。複数のフィールドがあり、それぞれが異なる送信ボタンで異なるフォームに配置されています。ボタンをクリックするたびに、そのフォームの値をテキスト領域に挿入する必要があります。

フィールドは配列で生成されます。すべてのフィールドに同じ名前のidを割り当てました。これは、すべてのフィールドの値をそのテキストエリアに属するようにするためです。私の問題は、ボタンをクリックすると、最初のフィールドだけがその値をテキストエリアに挿入することです。他のフィールドは機能しません。どうすればこの問題を解決できますか？ここで

コードです：質問に私のコメントで述べたように

<script type="text/javascript"> 
    window.onload = function() { 
     btn1 = document.getElementById("btnInsertText1"); 
     myText1 = document.getElementById("myTextArea1"); 
     text1 = document.getElementById("textToInsert1"); 

     btn1.onclick = function(){ 
      insertAtCursor(myText1, text1.value); 
     } 
    } 

    function insertAtCursor(myField, myValue) { 

     if (document.selection) { 
      myField.focus(); 
      sel = document.selection.createRange(); 
      sel.text = myValue; 
     } 

     else if (myField.selectionStart || myField.selectionStart == '0') { 
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 
      myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); 
     } 
     else { 
      myField.value += myValue; 
     } 
    } 
</script>  


<textarea id="myTextArea1" name="update" cols="85" rows="22"> 
    Testing. Values from another field will be inserted here. 
</textarea> 

<?php 
$ref = " 
SELECT * 
FROM reftext1_objective 
WHERE projectid='$id'"; 
$refresult = mysql_query($ref); 

while($row = mysql_fetch_array($refresult)) 
    {?> 
     <form> 
     <input id="textToInsert1" type="text" value="<?php echo $row[$text];?>" readonly="true"> 
     <input type="button" id="btnInsertText1" value="<<" /> 
     </form><br><?php 
    } 

Answer 1

、問題はあなたのPHPコード内のループにおける重複要素のidによるものです。あなたは、フォームのすべてのコピーのIDを複製しているので、あなたの問題がある

<script type="text/javascript"> 
    $(function() { 
     var textarea = document.getElementById("myTextArea1"); 
     $(".button").click(function() { 
      var $parentForm = $(this).closest("form"); 
      var text = $(".insert-text", $parentForm).val(); 
      insertAtCursor(textarea, text); 
     }); 
    }); 

    function insertAtCursor(myField, myValue) {    
     if (document.selection) { 
      myField.focus(); 
      sel = document.selection.createRange(); 
      sel.text = myValue; 
     } 

     else if (myField.selectionStart || myField.selectionStart == '0') { 
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 
      myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); 
     } 
     else { 
      myField.value += myValue; 
     } 
    } 
</script>  


<textarea id="myTextArea1" name="update" cols="85" rows="22"> 
    Testing. Values from another field will be inserted here. 
</textarea> 

<?php 
    $ref = "SELECT * FROM reftext1_objective WHERE projectid = '$id'"; 
    $refresult = mysql_query($ref);              
    while ($row = mysql_fetch_array($refresult)) 
    { ?> 
     <form> 
      <input class="insert-text" type="text" value="<?php echo $row[$text];?>" readonly="true"> 
      <input type="button" class="button" value="<<" /> 
     </form><br> 
    <?php } 
?> 

Example fiddle