CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
cocksparrer
cocksparrer

Reputation: 219

jQuery Ajax Show Value On Each TD Click

I have a small table with jQuery inside.
The TDs from See Habs column I wonder to show the each value based on their TD line.

With my current code, the button from each TD are still showing the value of first TD only and not showing up each TD when clicked.

Here is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="1px">
  <thead>
    <tr>
      <th>Habitation</th>
      <th>See Hab</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Human</td> 
      <td>        
        <input type="hidden" id="habs" name="hab_name" value="Human">
        <button class="check">Check</button>
      </td>
    </tr>
    <tr>
      <td>Animal</td> 
      <td>        
        <input type="hidden" id="habs" name="hab_name" value="Animal">
        <button class="check">Check</button>
      </td>
    </tr>
    <tr>
      <td>Forest</td> 
      <td>        
        <input type="hidden" id="habs" name="hab_name" value="Forest">
        <button class="check">Check</button>
      </td>
    </tr>
  </tbody>
</table>

<div id="resulthabs" style="background-color:#000000;color:#ffffff;"></div>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQuery(document).ready(function(){
  $('.check').click(function(){
    $.ajax({
      type: 'POST',
      url: 'gethabs.php',
      data: $('#habs'),
      success: function(data){
        $('#resulthabs').html(data);
      }
    });
  });
});
</script>
</body>
</html>


gethabs.php

if($_POST['hab_name']){
 $hab_name = $_POST['hab_name'];
 echo $hab_name;
}

Thank you for your help.

Upvotes: 1

Views: 1111

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

 data: {hab_name : $(this).closest('td').find('#habs').val()},

Upvotes: 0

ops
ops

Reputation: 2049

You don't send value!!!
Edit ajax request like:

$.ajax({
  type: 'POST',
  url: 'gethabs.php',
  data:'hab_name='+$(this).parent().find('input').val(),
  success: function(data){
    $('#resulthabs').html(data);
  }
});

Upvotes: 1

Related Questions