从html表行填充数据

Question

The given snippet has a javascript function and a table in which I want to show content of each row using a modal.

But the problem is when I am using alert in middle for debugging for any number of row when I click in view button it always shows the first value of m_id but it must show the corresponding values. $v object is returning expected data only no problem in that.

I need help since I am just a beginner in ajax.

 <script type="text/javascript"> function view_message(){ //alert("aa gyaksjhfjxvhk"); var m_id = document.getElementById('m_id').value; var c_name = document.getElementById('c_name').value; var message = document.getElementById('message').value; alert(m_id); //alert(loc); $.ajax({ type: "POST", url: "view_message.php", data: { 'm_id' :m_id, 'c_name' : c_name, 'message' : message }, success: function(data){ // alert("success"); $(".message_container").html(data); } }); } </script> foreach($v_message as $v) { echo '<tr>'; echo '<td>'.$v->time.'</td>'; echo '<td>'.$v->c_name.'</td>'; echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />'; echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />'; echo '<input id="message" name="message" value="'.$v->message.'" hidden />'; echo '<td data-toggle="modal" data-target="#myModal">'; echo ' <input type="button" id="view" onclick="view_message()" value="view"></input>'; echo '</td>'; echo '<td data-toggle="modal" data-target="#myModal1"> <a href="#"><span>Delete</span></a>'; echo '</td>'; echo '</tr>'; ?> <div id="message_container"> </div> 

Answer 1

IDs must be unique in the document. See: stackoverflow.com/a/9454716/2181514.

Your for loop generates multiple items with the same id, so when you do $(#id you get the first one.

You can fix this by using classes and passing a reference to the current row:

Change

onclick="view_message()"
<input id="m_id" name="m_id"

to

onclick="view_message(this)"
<input class='m_id' id="m_id" name="m_id"

then:

function view_message(el){
    var row = $(el).closest("tr");
    var m_id = $(".m_id", row).val();

---

Update: typo - should have been $(el).closest, not $(this) Example fiddle: https://jsfiddle.net/37tkgsnm/

html:

<tr>
  <td><input class='m_id' value='123' /></td>
  <td><button type="button" onclick="view_message(this);">click</button></td>
</tr>

js:

function view_message(el) {
    var row = $(el).closest("tr");
    alert($(".m_id", row).val())
}

Answer 2

change your selector $(.message_container) to $(#message_container) modified code is below.

<script type="text/javascript">
function view_message(){
//alert("aa gyaksjhfjxvhk");
var m_id = document.getElementById('m_id').value;
var c_name = document.getElementById('c_name').value;
var message = document.getElementById('message').value;


alert(m_id);
//alert(loc);

$.ajax({
  type: "POST",
  url: "view_message.php",
  data:
  { 'm_id' :m_id,
    'c_name' : c_name,
    'message' : message
  },
  success: function(data){
  //  alert("success");

     $("#message_container").html(data);

  }
  });

}

</script>

Answer 3

because your selector is document, its find first element with target id, so always first row element return in result.in php code replace onclick="view_message()" with class="view-btn" and use my answer javascript,

 <script type="text/javascript"> $(document).ready(function() { var view_message = function(){ var row = $(this).closest('tr'); var m_id = $(row).find('#m_id').val(); var c_name = $(row).find('#c_name').val(); var message = $(row).find('#message').val(); alert(m_id); } $(".view-btn").on('click', view_message); }); </script> foreach($v_message as $v) { echo '<tr>'; echo '<td>'.$v->time.'</td>'; echo '<td>'.$v->c_name.'</td>'; echo '<input id="m_id" name="m_id" value="'.$v->id.'" hidden />'; echo '<input id="c_name" name="c_name" value="'.$v->c_name.'" hidden />'; echo '<input id="message" name="message" value="'.$v->message.'" hidden />'; echo '<td data-toggle="modal" data-target="#myModal">'; echo ' <input type="button" id="view" class="view-btn" value="view"></input>'; echo '</td>'; echo '<td data-toggle="modal" data-target="#myModal1"> <a href="#"><span>Delete</span></a>'; echo '</td>'; echo '</tr>'; ?> <div id="message_container"> </div>