Question

Not sure if I can frame my question right.
I have a page which can be customized. So it contains a bunch of radio-button groups, text field, checkboxes, drop-down list and so on. I would want all of the name and values of each of the selected/entered fields in an array at the click of a button. I currently have this which would give me all the input fields along with their values.

$('#submit_btn').click(function(){
         var fields={};
        $(":input").each(function(){
             fields[this.name]=$(this).val();
           //  console.log("%s   - %s",this.name,$(this).val());
         });

So say I would want to include the name and value of the radio only of which is selected, rather than listing all the radio buttons. Any idea how it could be done in jQuery?

Answer 1

Try this,

$('#submit_btn').click(function(){
   var fields={};
   $("input[type=radio]:checked").each(function(){
        fields[this.name]=$(this).val();
        //  console.log("%s   - %s",this.name,$(this).val());
   });
});

Based on comment for going through all inputs and applying condition of checked radio.

$('#submit_btn').click(function(){
     var fields={};      
     $(":input").each(function(){
            if($(this).attr('type') == 'radio' && $(this).is(':checked')){            
                fields[this.name]=$(this).val();
            }
     });
});