How to Pass values javascript onclick to jquery function

Question

I have this this image with onclick function on it

<img id='1213' src='img/heart.png' onclick='heart(this.id)'>

which to call this function :

function heart(id) {
    $('#heart').dialog('open');
    return false;
}

How can i show the ID inside the div?

<div id="heart">
     Name : ABC
     ID : The ID need to be here 
</div>

P/S : i have reason why i want to use the onclick instead directly using the jquery get val from the image id directly.

You absolutely never, never, never use inline event handlers (like onclick) when you have jQuery. — Tomalak
– Tomalak, Commented Jun 1, 2015 at 9:08
Use $( "#heart" ).on( "click",function(){ }); instead of inline html. — cespon
– cespon, Commented Jun 1, 2015 at 9:11

Rory McCrossan · Accepted Answer · 2015-06-01 09:34:04Z

3

Firstly, you should use JavaScript to attach your events. You've already included jQuery, so we may as well use that. Once you attach the event, you can use the text() method to set the innerText property of the span within the target div. Try this:

<img id="1213" class="heart" src="img/heart.png" />

<div id="heart">
     Name : ABC
     ID : <span></span>
</div>

$('.heart').click(function() {
    $('#heart span').text(this.id).dialog('open');
});

edited Jun 1, 2015 at 9:34

answered Jun 1, 2015 at 9:10

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Comments

Satpal · Accepted Answer · 2015-06-01 09:11:17Z

2

To show image id, You can use

$('#heart').html(id).dialog('open');

I would recommend you not to use ugly inline event handler. You can bind event using jQuery. Here I have added a CSS class to img element then we can use Class Selector $(".class") to bind event

HTML

<img class="myImage" id='1213' src='img/heart.png'>

Script

$(function() {          
    $('.myImage').on('click', function(){
        $('#heart').html(this.id).dialog('open'); 
    });
});

answered Jun 1, 2015 at 9:11

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Thomas Theunen · Accepted Answer · 2015-06-01 09:12:01Z

0

You can do it like this.

function heart(id) {
  $('#heart').text(id).dialog();
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<img id='1213' src='img/heart.png' onclick='heart(this.id);'>


<div id="heart">

</div>

answered Jun 1, 2015 at 9:12

Thomas Theunen

1,2749 silver badges13 bronze badges

Comments

Adersh M · Accepted Answer · 2015-06-01 09:15:17Z

0

If you are using HTML5, you could make use of data-* attribute.

<img id="someid" src="img/heart.png" data-id="1213"/>

    $('#someid').click(function(e) {
        var id = this.getAttribute("data-id");
        $('#heart').text(id).dialog('open');
    });

answered Jun 1, 2015 at 9:15

Adersh M

5763 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to Pass values javascript onclick to jquery function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related