How to create AJAX POST button for multiple data in table?

Question

I have table like this

<table>
  <tr>
    <th>User</th>
    <th>IP</th> 
    <th>Action</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>192.168.0.1</td> 
    <td><button id="check" name="192.168.0.1">Check</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>192.168.0.2</td> 
    <td><button id="check" name="192.168.0.2">Check</button></td>
  </tr>
<tr>
    <td>Smith</td>
    <td>192.168.0.3</td> 
    <td><button id="check" name="192.168.0.3">Check</button></td>
  </tr>
</table>

How to implementation to send POST data IP with AJAX? I have tried with this code but does not work..

<script>
$('#check').click(function() { 

var getIP   = $('#check').name();
var dataIP  = 'sendIP=' + getIP;

        $.ajax({
            url: 'url.php',
            type: 'POST',
            data: dataIP;
            success: function () {
              alert("Success");
            }
        });  

});
</script>

[UPDATE] This is Full code for my project.

<script>
$(document).ready(function() {
  $('#reportrange span').on('DOMSubtreeModified', function () {
    var dariRange = $(this).html();
    var SplitRange = dariRange.split("~");

    $('#datatable-keytable').DataTable( {
    "destroy": true,
    "processing": true,
    "keys": true,
    "order": [[ 6, "desc" ]],
    "ajax": {
      url: "view.php",
      type : 'GET',
      data : {
        datedari : SplitRange[0].trim(),
        datesampai : SplitRange[1].trim()
      }
    },
    "columnDefs": [
    { "width": "5%", "targets": 0 },
     ],

    "columns": [
        { "data": "click_username" },
        { "data": "click_cid" },
        { "data": "click_offer" },
        { "data": "click_ip" },
        { "data": "click_isp" },
        { "data": "click_posttime" },
        { "data": "click_ip",
        "render": function (click_ip,data,row) {
                            var clickid = data.click_cid;
                            return ('<center><button class="check" id="'+click_ip+'" name="'+clickid+'">Check</button></center>'); //This for Button check
                        }
        },          
        ],
    } );
} );
} );
</script>
<script type="text/javascript">
$(document).on('click', '.check',function() {  

        var dataID  = 'sendCID=' + this.name;
        var dataIP  = this.id;

        $.ajax({
            url: 'send_data.php',
            type: 'POST',
            data: dataID;
            success: function () {
              window.open('http://whatismyipaddress.com/ip/'+dataIP);
            }
        });  

});
</script>

I want to POST var dataID to send_data.php and then if success open new tab to http://whatismyipaddress.com/ip/'+dataIP but does not work with this code,

I hope someone help me to resolve this, thank you

charlietfl · Accepted Answer · 2016-10-15 18:17:39Z

3

You can't repeat ID's in a page , they are unique by definition, so will need to change to a class

Within an event handler this is the element the event occurred on so in your case this.name would be value needed

// use class selector
$('.check').click(function() {     

        var dataIP  = 'sendIP=' + this.name;

        $.ajax({
            url: 'url.php',
            type: 'POST',
            data: dataIP;
            success: function () {
              alert("Success");
            }
        });  

});

answered Oct 15, 2016 at 18:17

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

Zayn Over a year ago

Does not work, btw I using datatable serverside. I updated full code in my post, please see

charlietfl Over a year ago

The you will probably need to use event delegation. Try $(document).on('click', '.check',function() { ...

charlietfl Over a year ago

the event should definitely work.. you may have issues with your ajax

Collectives™ on Stack Overflow

How to create AJAX POST button for multiple data in table?

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