Jquery ajax issue with radio button list

Question

<input type='radio' name='rbTemplateList' id='template1" value=1    >
<input type='radio' name='rbTemplateList' id='template3" value=3    >
<input type='radio' name='rbTemplateList' id='template5" value=5    >
<input type='radio' name='rbTemplateList' id='template7" value=7    >

I want to onclick one of the rbTemplateList, will raise ajax call (jquery style) But it is not working at all...

I believe it is something gotta do with id & name attribute

        $(document).ready(function() { 


        var f = document.frm;


         $("#rbTemplateList").click(function() {

                pkTemplate= getSelectedRadioValue(f.rbTemplateList);

                $.ajax({

                url: "ajaxColor.php",

                type: "POST",

                data: 'pkTemplate='+pkTemplate,

                timeout: 5000,               

                beforeSend: function(){ },

                error: function(XMLHttpRequest, textStatus, errorThrown) {

                },     

                success:  function(output) {



                },

                complete: function(){ }                                

                }); 

            })  
  }); 

Answer 1

HTML changes "name" with "class"

<input type="radio" class="rbClassTemplateList" name="rbTemplateList" id="template1" value="1" />
<input type="radio" class="rbClassTemplateList" name="rbTemplateList" id="template2" value="2" />
...

JS changes "#rbTemplateList" with ".rbClassTemplateList"

...
 $(".rbClassTemplateList").click(function() {
...

OR

<input type='radio' name='rbTemplateList' id='template1" value="1"   />
<input type='radio' name='rbTemplateList' id='template3" value="3"   />
<input type='radio' name='rbTemplateList' id='template5" value="5"   />
<input type='radio' name='rbTemplateList' id='template7" value="7"   />


...
 $("input[name='rbTemplateList']").click(function() {
...

Answer 2

You are using "#rbTemplateList" which would refer to an id of rbTemplateList, but that is the name of each element. For simplicity, you can assign them all the same class:

class='something'

then use $(".something").click

Answer 3

Is that your actual html or did it just get entered incorrectly?

<input type='radio' name='rbTemplateList' id='template1" value=1    >

should be

<input type='radio' name='rbTemplateList' id='template1' value='1'>

for proper html. (notice the matched quotes) This may be the cause of your issue, if I am just being too picky about it, it looks like others may be on the right track.

Answer 4

The problem is that you are using $("#rbTemplateList") to attach the event to the radio buttons, but the # at the start refers to IDs of elements while the rbTemplateList is given as a name in your html.

you should alter your selector to $(":input[name='rbTemplateList']")