Getting html control value using javascript function

Question

I have this table in my page that I fetch by using AJAX request.

<table>
    <tbody>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Action</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Example Name 1</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="2">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Example Name 2</td>
            <td class="text-center">
                <div class="btn-group" role="group" aria-label="">
                    <a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="1">
                        Delete
                    </a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

So I'm trying to get the anchor value when the button is clicked. So I make a function like this :

function deleteParticipantFunction(){
    var result = confirm('You are about to delete this participant. Continue?');
    if(result){
        var participant_id = $(this).val();
        console.log(participant_id);
    }
};

But I'm not able to get the value. What is the correct way to fetch the value in the function?

Answer 1

Pass id direct to method:

<a href="javascript:;" onclick="deleteParticipantFunction(1)" class="delete-participant">

Then Yours js methods will be simpler:

function deleteParticipantFunction(participant_id){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
    //delete smth by id
}
};

Answer 2

Anchor elements don't have a value attribute. That's something one finds on form inputs. Instead, you can put the value in a data-* attribute:

<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" data-participant="1">
    Delete
</a>

And retrive it from the data() function:

var participant_id = $(this).data('participant');

Though, thinking about it, when calling the function like that, is this even the correct context? I guess I haven't had to try that in a while so I don't know off the top of my head. But fortunately you're already using jQuery, so why not just use jQuery? Rather than put the function call on every element in an onclick attribute, use jQuery to bind a function to the click event(s):

<a href="javascript:;" class="delete-participant" data-participant="1">
    Delete
</a>

and:

$(document).on('click', '.delete-participant.', function () {
    var result = confirm('You are about to delete this participant. Continue?');
    if(result){
        var participant_id = $(this).data('participant');
        console.log(participant_id);
    }
});

Which has the added benefit of de-cluttering your markup.

Answer 3

 function deleteParticipantFunction(e){ var result = confirm('You are about to delete this participant. Continue?'); if(result){ var participant_id = this; console.log(e.value); //e.parentNode.parentNode.parentNode.remove() } }; 

 <table> <tbody> <tr> <th>No</th> <th>Name</th> <th>Action</th> </tr> <tr> <td>1</td> <td>Example Name 1</td> <td class="text-center"> <div class="btn-group" role="group" aria-label=""> <button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="2"> Delete </button> </div> </td> </tr> <tr> <td>2</td> <td>Example Name 2</td> <td class="text-center"> <div class="btn-group" role="group" aria-label=""> <button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="1"> Delete </button> </div> </td> </tr> </tbody> </table>