CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Norris
Norris

Reputation: 2238

How to get which link has been clicked in jquery

Good day...

I have multiple links as below:

<li><a href="#" id="mmSaveForm" class="itemDisabled noTxtSelect1">Save</a></li>
<li><a href="#" id="mmSaveAs" class="itemDisabled noTxtSelect1">Save As</a></li>
<li><a href="#" id="mmSaveExit" class="itemDisabled noTxtSelect1">Save And Exit</a></li>

I wanna know which link has been clicked I tried something like this:

if ($("#mmSaveForm").click() == "true") {
    //do something
}
else if ($("mmSaveAs").click() == "true") {
    //Do something
}
else if ($("#mmSaveExit").click() == "true") {
    //Do something
}

I tried these links, questions & answers but they are not helping:

How can I get the button that caused the submit from the form submit event?

jQuery: how to get which button was clicked upon form submission?

how to detect which button is clicked using jQuery

jQuery - how to determine which link was clicked

I've been trying this the whole night, please help... Thank you in advanced...

Upvotes: 0

Views: 3804

Answers (9)

Rhonald
Rhonald

Reputation: 445

This is my html page (Django template):

<div class="col">
    {% for blog in blogs %}
    <div class="post">
        <h3><a href="{% url 'blog:detail' pk=blog.pk %}">{{ blog.title }}</a></h3>
        <div class="date">
            <p>Created: {{blog.date_created|date:'d M Y'}}</p>
        </div>
        <p>{{ blog.brief|safe }}</p>  

        <ul class="nav justify-content-end">
            <li class="nav-item">
              <a class="nav-link active" href="{% url 'blog:edit' pk=blog.pk %}">Edit</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="publish" href="{{blog.pk}}">Publish</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-danger" id="remove" href="{{blog.pk}}">Remove</a>
            </li>
          </ul>
        <br>
    </div>
    {% endfor %}
</div>

In my javascript file, this is what have and it works.

$(document).ready(function() {

console.log("document is ready!!!")

$('#id_bloglist').on("click", 'a#publish,a#remove', function(e) {

    e.preventDefault()

    var pk = $(this).attr("href")

    if ($(this)[0].id == 'remove'){
        console.log("remove link clicked, calling deleteBlog with pk = " + pk)
    }
    else if ($(this)[0].id == 'publish'){
        console.log("publish link clicked, calling publishBlog with pk = " + pk)
    }

    return false;
});

});

Upvotes: 0

tuan huynh
tuan huynh

Reputation: 727

No need jquery please look this code

 <!DOCTYPE html >
<html >
<head>
<script>
function clickbtn(t)
{
    alert(t.id);
    /*if(t.id==...) 
    {
        dosomething();
    }
    else
    {
        dootherthing();
    }
    */
}
</script>
</head>
<ul>
<li><a href="#" onclick="clickbtn(this)" id="mmSaveForm" class="itemDisabled noTxtSelect1">Save</a></li>
<li><a href="#" onclick="clickbtn(this)" id="mmSaveAs" class="itemDisabled noTxtSelect1">Save As</a></li>
<li><a href="#"  onclick="clickbtn(this)" id="mmSaveExit" class="itemDisabled noTxtSelect1">Save And Exit</a></li>
</ul>

<body>
</body>
</html>

It work ok . Hope this help!

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

Use common class like a itemDisabled for click event and get id ,

$(".itemDisabled").click(function (e) {
     e.preventDefault();
     var id = this.id;
     if (id === "mmSaveForm") {

     } else if (id === "mmSaveExit") {

     } else {}

 });

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use .is(selector) to identify the element which has been clicked,

$('a.noTxtSelect1').click(function(e){
   e.preventDefault();  
   if($(this).is("#mmSaveForm")){

   } else if($(this).is("#mmSaveAs")) {

   } else if($(this).is("#mmSaveExit")) {

   }
});

Upvotes: 2

Shah Rukh
Shah Rukh

Reputation: 3156

may be you can try this 

$(function(){
        $('.linkclass').click(function(){
           var link_text = $(this).text();
           alert('the clicked link text is '+ link_text);
    });
 });

Upvotes: 0

CharlesA
CharlesA

Reputation: 4350

You're thinking about this the wrong way. In your

$(document).ready(function() {})

you register for click events. So something like 

$(document).ready(function() {

    $("#mmSaveForm").click(function() {
        // handle the click
    });

});

Upvotes: 0

SW4
SW4

Reputation: 71160

If your links have id attributes all starting with 'mm' you could use:

$('a[id^=mm]').on('click', function(){
   console.log(this.id); 
});

Or on one or more classes:

$('a.itemDisabled').on('click', function(){

-or-

$('a.itemDisabled.noTxtSelect1').on('click', function(){

In the click event, you can use switch to determine the link clicked, which you can fetch using this or $(this)

e.g.:

Demo Fiddle

$('a[id^=mm]').on('click', function () {
    switch (this.id) {
        case "mmSaveForm":
            alert(this.id);
            break;
        case "mmSaveAs":
            alert(this.id);
            break;
        case "mmSaveExit":
            alert(this.id);
            break;

    }
});

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

You can use the [attr^="value"] ["starts with"] selector:

$('[id^="mmSave"]').click(function(event){
  event.preventDefault();
  var action = this.id;
  // do your business
});

Upvotes: 0

Andy
Andy

Reputation: 63524

Why don't you target the class instead, grab the id and then use a switch statement.

$('.itemDisabled').on('click', function () {
  var id = this.id;
  switch(id) {
    case 'mmSaveForm':
      // code
      break;
    case 'mmSaveAs':
      // code
      break;
    case 'mmSaveExit':
      // code
      break;
  }
});

Upvotes: 4

Related Questions