bootstrap modal textarea showing empty alert on click jquery - php

Question

i have modal popup in loop with database values. In popup there is a reply textarea and i want to post that value using ajax. But i am getting empty value of textarea when i alert value on click event using jquery. Here is my code
CODE:
<?php
$sn=1;$rep=1;
foreach($view_queries as $q) {?>
Reply
?>
<!-- create reply model -->
<div id="create_reply<?php echo $rep;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form id="send_reply" method="post" antype="multipart/form-data">
<input type="hidden" name="query_id" value="<?php echo $q->query_id;?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reply To Query</h4>
</div>
<div class="modal-body">
<label>Query:</label>
<p><?php echo ucfirst($q->query);?></p>
<div class="form-group">
<label>Reply:</label>
<textarea rows="3" name="mesg" id="<?php echo $sn;?>mesg" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" id="" data-target="<?php echo $sn;?>mesg" class="btn btn-default form_click">Reply</button>
</div>
</form>
</div>
</div>
</div>
<!-- create reply model ends -->
<?php $sn++; $rep++; }?>
HERE IS THE SCRIPT FOR CHECKING VALUE IN ALERT:
<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a=$('#' + $(this).data('target')).text();
alert(a);
});
});
</script>

Answer 1

You should use .val() instead of .text(). text() get's the HTML contents of a HTML element. val() is used for getting contents of HTML inputs.
Also as Smit Raval already stated, id's should be unique.
You could give the fields an id with and index set in PHP.
So in every loop you increment the index and add that to your id values, like so:
id="<?=$index?>_mesg".
And in your button do:
<button type="button" data-target="<?=$index?>_mesg" id="" class="btn btn-default form_click">Reply</button>
And then in your jquery you can do var a=$('#' + $(this).data('target')).val();
See the added data-target in your button. And the $(this).data('target') in the jquery for retrieving the value of the target data attribute.

Answer 2

<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a= $(this).parents("form.send_reply").find("textarea.mesg").text();
alert(a);
});
});
</script>
change id="mesg" to class="mesg" in your loop.Also make sure you don't repeat the same ID in your loop. Change id="send_reply" to class="send_reply"