Getting ID value of clicked row - jquery

Question

ok .. quick overview.

I have a table and each row has the ID attribute value assigned based on the ID form the db record

I have a click event that shows / hides a div and I want the data it displays in that div to be based on the results from the DB for that corresponding ID value

Here is my table code showing the ID

<td class="hidden-xs">
    <a data-toggle="toggle" href="#comp_info" class="showcompinfo" id="<?php echo $complistr['company_id'];?>">
        <?php echo $complistr['registered_office_address'];?>
    </a>
</td>

This is where I want the data displayed

<div class="panel-heading">
    <i class="fa fa-building" style="color:orangered"></i>&nbsp;&nbsp;
    <span id="showcompname"></span>
</div>

Here is the jquery code

$(document).ready(function () {
    $('#comp_info').hide();
    $('.showcompinfo').click(function () {
        var id = $('.showcompinfo').attr('id');

        $('#comp_info').toggle();
            var companyid = id;
            var dataString = 'companyid=' + companyid;

            $.ajax({ 
                type: 'POST', 
                url: '../inc/dataforms/complist.php', 
                data: dataString, 
                success: function (result) { 
                    $('#showcompname').html(result); 
                }
            });
        });
});

Here is the PHP code for the query

include('../config.php');
if (!empty($_POST['companyid'])) {
    $companyid = $_POST['companyid'];
    $query = mysqli_query($dbc, "SELECT * FROM `comp_companies` WHERE `company_id` = '$companyid'");
    $result = mysqli_fetch_assoc($query);
    if ($result) {
        echo $result['name'];
    }
}

Please dont say .. your code is open to SQL injection .. i've said before its on a closed system with no external access and the people using it can barly use a PC

All I want it to do is to display the company name in the showcompname span box

If possible am I also able to display different result data in different divs ?

`id=""` `id` attribute needs to start with a char, does it do that? — brombeer, Jul 19 '18 at 13:46
*"Please dont say .. your code is open to SQL injection"* - It sounds like you've become frustrated by people pointing out SQL injection problems in your code. You could solve this by not writing SQL injectible code. It's easier than you think: https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php (*"the people using it can barly use a PC"* - So why would you implicitly trust that their computers haven't been compromised by viruses, etc.?) — David, Jul 19 '18 at 13:49
If you didn't want comments about SQL Injection, don't include the SQL part when this question is about selecting an id with jquery. What does sql have to do with that? Nothing, so just exclude it and you wouldn't have people spamming their annoying macros. — IncredibleHat, Jul 19 '18 at 15:20

score 1 · Accepted Answer · edited May 10 '20 at 18:27

1

To retrieve the ID from the clicked <a> tag, in your jQuery code change this line:

var id = $('.showcompinfo').attr('id');

For this one:

var id = $(this).attr('id');

That way you are retrieving the id attribute from the element that was the target of the click event.

Your original code was retrieving an array of ids of all elements with the class showcompinfo.

edited May 10 '20 at 18:27

marc_s

732,580
175
1,330
1,459

answered Jul 19 '18 at 13:45

Alvaro Castro

811
1
9
26

yep it works, many thanks.. Is there any way I can get the result data to display in different div ID's for example the company name to show in the span #showcompname and other data in a div with id #data ? – Chris Yates Jul 19 '18 at 13:56
Yes, just use `$('#showcompname').text(result.name);` and `$('#data').text(result.some_other_data);`. But you should change the response of your PHP side to return something more complex, like a json, to return multiple values as you need. – Alvaro Castro Jul 19 '18 at 14:24

score 1 · Answer 2 · answered Jul 19 '18 at 13:51

Your problem lies in the selector for the id, var id = $('.showcompinfo').attr('id');. You are selecting every showcompinfo in the page.

You would be better off by using this in that selector. This would correctly select your id, based off the clicked td.

var id = $(this).attr('id');

Getting ID value of clicked row - jquery

2 Answers2