How to pass arguments into JQuery function?

Question

I want to pass a value to a Jquery function. Below is the Javascript sample code. I want to convert this javascript function to a jquery function. How can I pass the state name into a jquery onclick function?

<a onclick="showState('state_name')">ADD STATE </a>

 function showState(state_name){
 openbox_state(state_name);
 }

please help me.

Answer 1

You don't really make it clear whether you have a series of anchors to add different states, or...?

If you do, you can do something like this to record the appropriate state name for each link:

<a data-stateName="state_name">ADD STATE </a>

And then in JS, with jQuery:

$(document).ready(function() {
    $("a[data-stateName]").click(function() {
        openbox_state( $(this).attr("data-stateName") );
    });
});

This removes the inline JavaScript from your html, and then uses jQuery to bind a click handler only to those <a> elements that have a data-stateName attribute. The handler then gets the value of that attribute to pass to the openbox_state() function.

The document ready handler ensures that the anchor click binding doesn't happen until the document actually is ready, i.e., after the elements have been parsed and can be accessed from JS. (You don't need a ready handler if you put your JS in a script block at the end of the body element.)