将多个表单（带有多个按钮）的值插入光标位置的同一文本区域

Question

我想在一个文本区域中插入来自另一个表单域的值。有多个字段，每个字段都放置在具有不同提交按钮的不同表单中。每当单击按钮时，该表单中的值都应插入到文本区域中。

字段在数组中生成。我为每个字段分配了相同的id 名称。这是为了使每个字段的值都属于该文本区域。我的问题是，当我单击它的按钮时，只有第一个字段将其值插入到 textarea 中。其他字段不起作用。我该如何解决这个问题？

代码如下：

<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 造成的。要修复它，试试这个：

<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