Insert values from multiple form (with multiple buttons) into the same textarea at cursor position

Question

I want to insert values from another form field in one text area. There are multiple fields, each placed in different forms with different submit buttons. Whenever the button is clicked, the values in that form should be inserted into the text area.

The fields are generated in an array. I have assigned the same id name for every field. This is to make every field's values belong to that textarea. My problem is, only the first field insert its value into the textarea when I click its button.Other fields not working. How could I fix this?

Here is the code:

<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
    }

Your problem is because your are duplicating the Ids for every copy of your form. This is invalid - each element's Id should be unique. The browser expects this, so only returns the first element with the Id you provide. Do you use jQuery at all in your system, if so I can fix this for you. — Rory McCrossan
– Rory McCrossan, Commented Dec 10, 2011 at 15:00
Yes Im using it. Much appreciated if U can help me fix this. — user1072986
– user1072986, Commented Dec 10, 2011 at 15:11

Rory McCrossan · Accepted Answer · 2011-12-10 15:57:26Z

1

As stated in my comment on the question, the problem is due to the duplicated element ids in the loop in your PHP code. To fix it, try this:

<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

edited Dec 10, 2011 at 15:57

answered Dec 10, 2011 at 15:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1072986 Over a year ago

I've tried ur code. All fields not working. they don't insert their value in the textarea.

Rory McCrossan Over a year ago

I added a fiddle to my answer so you can see the code working. Have you checked the console or firebug for any errors?

user1072986 Over a year ago

Ive tried firebug, there is an error on this line -- $(".button").click(function() { --> uncaught reference error: $ is not defined.

Collectives™ on Stack Overflow

Insert values from multiple form (with multiple buttons) into the same textarea at cursor position

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related