CODEWITHSUNDEEP
jqueryonclickevent-handling
lobbag00
lobbag00

Reputation: 43

How to implement onClick function with parameters using jquery

I have a web-page that can be used to highlight streets in my local area on a street map. The user clicks on the name of the street they are looking for and the street gets highlighted on a map. See http://www.fastmap.eu for working example.

Each street name is displayed as a button and when the user clicks on the button, 3 variables are stored for use in the map.

Currently, button clicks are handled in html by the onClick function, but it doesn't work on some touch screen devices. So I want to use jQuery .on('click tap', function() instead but don't know how to pass the variables.

The html for each button looks similar to this:-

    <button class="btn" onClick="storeData(value1,value2,value3);location.href='map.html';">Street Name</button>

Previous answers of a similar nature explain how to pass parameters from on script function to another, but not from the html code and don't show how it is implemented in html.

Upvotes: 4

Views: 32102

Answers (4)

lobbag00
lobbag00

Reputation: 43

For me, the best answer was given by Elias Nicolas but slightly modified. Rob Perry's solution looks as though it would work too, but as they say - if its not broke, don't fix it. SkyMaster's solution didn't explain how I would get the variable from the html code to the javascript - I have hundreds of button's, each with different variables to be passes to the script. Also, because I have hundreds of buttons, I couldn't use id="btn". Instead I just used button.

The final solution was as shown below:-

$(document).ready(function() {
    $('button').on('click tap', function (e) {
     alert("Your values are :"+ $(this).data("value1")+","+$(this).data("value2")+","+$(this).data("value3"));        
    });   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-value1="1" data-value2="2" data-value3="3">Street Name</button>

Upvotes: 0

Elias Nicolas
Elias Nicolas

Reputation: 775

If I understand correctly you want something using jQuery.data() For example: you could set different values to the function from the html. Hope it helps.

See this snippet:

$(document).ready(function() {
    $('#btn').on('click', function (e) {
     alert("Your values are :"+ $(this).data("value"));        
    });   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" data-value="1">Street Name</button>

Upvotes: 11

SkyMaster
SkyMaster

Reputation: 1323

HTML button definition:

<button class="btn" id="btn">Street Name</button>

JQuery code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
    $(document).ready(function() {
        $('#btn').on('click', storeData);   
    });

    function storeData() {
        alert ("here check value1, value2, value3");        
        location.href='map.html';
    }   
</script>

Upvotes: 0

Rob Perry
Rob Perry

Reputation: 23

You can get the element (and then its data) by doing something like this:

HTML:

    <button class="btn" data-somedata="whatever">Street</button>

JS:

    $("body").on("click tap", ".btn", function(event) {
      var $target = $(event.target);
      var somedata = $target.data("somedata");
    });

Hope that helps =)

Upvotes: 0

Related Questions