How to pass parameters / arguments using jQuery?

Question

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function chooseLocationType(location, title, demand){
        alert(demand);
        }

<body>
<input 
    name="tempstaff_location" 
    class="ques_radio" 
    id='tempstaff_location'
    value='location_' 
    type="radio" onclick="chooseLocationType('a','b','c')" />
</body>

I have the folowing code, on click of the radio box , There is one conditional code based on this to show hide some dive.

And there is one more jQuery script which run on Click and used function.

jQuery(this)

input[name=tempstaff_location]").click(function(){
            if(jQuery(this).attr("checked")){


        });

How can I combine both script in one.

Are the parameters always fixed or do they vary with the element? — tvanfosson
– tvanfosson, Commented Sep 28, 2011 at 13:10

Dennis · Accepted Answer · 2011-09-28 13:15:47Z

3

Having your:

<script type="text/javascript">
    function chooseLocationType(location, title, demand){
        alert(demand);
        }
</script>

I would, as you don't specify where the values 'a', 'b', and 'c' come, add them as data attributes to your input

<input 
    name="tempstaff_location" 
    class="ques_radio" 
    id='tempstaff_location'
    value='location_' 
    data-location="a"
    data-title="b"
    data-demand="c"
    type="radio"/>

And finally access them in the event callback

$("input[name=tempstaff_location]").click(function(){
     if(jQuery(this).attr("checked")){
         chooseLocationType($(this).data('location'), $(this).data('title'), $(this).data('demand') );
     }
});

edited Sep 28, 2011 at 13:15

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

answered Sep 28, 2011 at 13:11

Pherrymason

8,0988 gold badges41 silver badges58 bronze badges

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

Comments

tvanfosson · Accepted Answer · 2011-09-28 13:14:06Z

If the parameters vary with each element store them in a data tag within the element. Then extract them in the click handler. That way you can apply a single handler and do both. It will be easier if you change chooseLocationType to accept an array of location types.

<input 
    name="tempstaff_location" 
    class="ques_radio" 
    id='tempstaff_location'
    value='location_' 
    type="radio"
    data-location="a,b,c" />

$('input[name=tempstaff_location]").click(function(){
      if(jQuery(this).attr("checked")){
           chooseLocationType( $(this).data('location').split(/,/) );
      }
});

If the values are fixed then it's much easier, you just move the call into your handler.

<input 
    name="tempstaff_location" 
    class="ques_radio" 
    id='tempstaff_location'
    value='location_' 
    type="radio"/>

$('input[name=tempstaff_location]").click(function(){
      if(jQuery(this).attr("checked")){
           chooseLocationType( 'a','b','c' );
      }
});

Dennis · Accepted Answer · 2011-09-28 13:23:17Z

0

When you assign an inline onclick attribute, it is just a function, basically equivalent to this code:

element.onclick = function () {
    chooseLocationType( 'a','b','c' );
};

In your JavaScript file, you can just write

document.getElementById("tempstaff_location").onclick = function () {
    if(this.checked) {
        chooseLocationType( 'a','b','c' );
    }
}

Getting an element by its id is generally better than selecting it by a tagname and attriute.

answered Sep 28, 2011 at 13:23

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

Nishu Tayal · Accepted Answer · 2011-09-28 17:47:57Z

0

You can directly call click event on page load instead of calling in radio button html. If following is the html:

<input 
    name="tempstaff_location" 
    class="ques_radio" 
    id='tempstaff_location'
    value='location_' 
    data-location="a"
    data-title="b"
    data-demand="c"
    type="radio"/>

Then you can call following script :

jQuery('input[name=tempstaff_location]').click(function(){
         if(jQuery(this).attr('checked')) {
           chooseLocationType(jQuery(this).attr('data-location'),jQuery(this).attr('data-title'),jQuery(this).attr('data-demand'));
         }
     });

answered Sep 28, 2011 at 17:47

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Collectives™ on Stack Overflow

How to pass parameters / arguments using jQuery?

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