CODEWITHSUNDEEP
javascriptjqueryhtmlparameter-passing
Ananda G
Ananda G

Reputation: 2539

How to pass value in a jQuery function without the help of onclick attribute?

I am facing a problem in which I need to pass either one or multiple parameter to a javascript function. For example 

<a href="#" OnClick="Delete(1,'q');" > X </a>
<a href="#" OnClick="Delete(2,'u');" > X </a>

But I am trying to avoid this onclick attribute from the html end. So I have used this way

<a  href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript://" title="Delete" id="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

And written the jQuery function like this to capture my click function from the link

$("#actRemove").each(function() {
   $(this).on("click", function () {
      alert($(this).data("action"));
   });
});

But alas!! I am undone. This link works only for the first anchor Delete1 none of the anchors are working. Here is my jsFiddle link. I have gone through these answers Q1, Q2, Q3, Q4, Q5, Q6. Each of those question have the solution in the first way using onclick and passed the parameter to the function.I am thinking differently. Moreover my another question is, is there any way to pass parameter to a jQuery function without writing onclick in the html attribute? I know that jQuery function is capable to receive the parameter, but how can I send it to the function from the html end?

Upvotes: 3

Views: 1353

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Instead of id use class selector:-

HTML:-

<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

jQuery:-

$(".actRemove").on("click", function () {
  alert($(this).data("action"));
});

Working demo:-

$(".actRemove").on("click", function () {
  alert($(this).data("action"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript:viod(0);" title="Delete" class="actRemove" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>

Note:-

id used as unique-selector in jQuery,while class used as a group-selector

Upvotes: 5

IcedAnt
IcedAnt

Reputation: 454

You can get the value of an HTML object directly in javascript without passing it with onclick using:

var object_id = document.getElementById('object_id').value;

Upvotes: 1

vjy tiwari
vjy tiwari

Reputation: 861

You can use this way 

<a  href="javascript://" title="Delete" id="actRemove_1" data-action="/List/Delete/1" ><span class="glyphicon glyphicon-remove"></span>Delete1</a>
<a  href="javascript://" title="Delete" id="actRemove_2" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete2</a>
<a  href="javascript://" title="Delete" id="actRemove_3" data-action="/List/Delete/2" ><span class="glyphicon glyphicon-remove"></span>Delete3</a>



$("a[id^='actRemove_']").on("click", function () {
     alert($(this).data("action"));
})

Upvotes: 2

Related Questions