从foreach循环内的textarea获取值

Question

So, here is the thing - I have a comment section that is generated withing a foreach loop, all the comments have button clicking which will cause bootstrap modal to open with textarea to enter a reply comment. The problem is that I can get a value only from first comment on the page, I tried to get value with JS ike this - var comment = $('#textarea_id').val(); and using only PHP ($_POST) but it works only for the first comment. Also it tried to put unique id for every textarea, unique name and so on but it doesn't help either. Here is some code for your visual understanding (Please, notice that I'm using smarty engine but I think it's the same logic as in regular PHP foreach loop, so don't mind it):

{foreach from=$comments item=row}
Here is the body of comment and button to trigger reply modal
And this is reply modal with textarea in it:
            <!-- Reply Modal -->
            <div class="modal fade" id="{$row.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content" style="word-wrap:break-word;">
                        <div class="modal-header love-modal">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h3 class="modal-title" id="myModalLabel">Reply to <a href="{$abslink}profile/{$row.username}">{$row.username}</a></h3>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" action="#" method="post">
                            <textarea class="form-control" id="someidfortextarea" name="" rows="8" maxlength="5550"></textarea>
                            </form>
                         </div>
                        <div class="modal-footer">
                            <button class="reply btn btn-success" name="submit" type="submit">Post</button>
                            <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            {/foreach}

So, the main question is - how to get text from textarea which is in foreach loop (By php or javascript)?I will be really happy to see any advice or suggestion! Thank you very much!

Answer 1

You need a shared identifier to relate the button to the matching textarea. $row.id seems like a good match.

Disclaimer: untested code, so you might have to finagle it a bit to get it to work properly.

{foreach from=$comments item=row}
    ...
    <textarea class="form-control" id="textarea_{$row.id}" name="" rows="8" maxlength="5550"></textarea>
    ...
    <button id="submit_post_{$row.id}" class="reply btn btn-success" name="submit" type="submit">Post</button>
    ...
{/foreach}

Then in your javascript, you can relate it back:

$('button.reply').click(function() {
    var button_id = $(this).prop('id');
    var row_id = button_id.replace('submit_post_', '');
    var textarea_id = '#textarea_' + row_id;

    var comment = $(textarea_id).val();

    // now send {comment} to the server using ajax
});

I'm sure there are more efficient ways to do this, maybe you could use a data attribute on the button so you don't have to string-replace bits off the button's id . This is just a general idea.