On change radio button state show submit button... how?

I want to show a submit button only when the radio button value change. I will have several radio groups and the button should appear if any radio button change! Also, if radio button group value gets to default value submit button will hide again.

$("form :radio").live('change',function(){

});

My new code:

//hide the submit button on load
        $('form :submit').hide();

        //Data structure where the initial value from radio button(s) will be stored
        var dbRadios = [];

        //Getting the initial values from the radio button(s) and load them to the data structure
        $("form :radio:checked").each(function() {
            dbRadios.push($(this).attr('value'));
        });


        //Attach onclick event to radio button(s)
        $('form :radio').click(function() {

            //The event fired, therefore the "New value(s)" (radio button value(s))  will be stored in the data sctructure
            var submitedRadios = [];

            //Geting the values from checked radio buttons
            $("form :radio:checked").each(function() {
                submitedRadios.push($(this).attr('value'));
            });

            //Now comparing both data structu开发者_高级运维res
            if(dbRadios.compare(submitedRadios)){
                $('form :submit').fadeOut('slow');
            }else{
                $('form :submit').fadeIn('slow', function(){ ACTION! WILL BE EXECUTED MANY TIMES AS BUTTONS CLICKED});
            }

        });


        $("form").submit(function () {
        //AJAX GOES HERE!   
        alert("a submeter dados");  
        })

The compare function:

//Compare two different arrays
    Array.prototype.compare = function(testArr) {
        if (this.length != testArr.length) return false;
        for (var i = 0; i < testArr.length; i++) {
        if (this[i].compare) { 
            if (!this[i].compare(testArr[i])) return false;
        }
        if (this[i] !== testArr[i]) return false;
        }
        return true;
    }

---

You could try something like the following. You can write more specific logics to meet your requirements.

$(document).ready(function () {

   //hide the submit button on load
   $('form :submit').hide();

   var defaultVal = 'default';

   //attach onchange event to radio buttons
   $('form :radio').change(function() {
       var val = $(this).val();

       if(val!=defaultVal) {
         $('form :submit').show();
       } else {
         $('form :submit').hide();
       }
   });

});

The code above will show/hide submit button based on the current value of the clicked/changed radio button.

---

you could try binding an onclick with logic inside the onclick to see if its different

---

It works great!

//Attach onclick event to radio button(s)
        $('form :radio').click(function() {
            //Every new event clears the array so the new values can be stored properly
            submitedRadios = [];
            //Geting the values from checked radio buttons every time the state modifies
            $("form :radio:checked").each(function() {
                submitedRadios.push($(this).attr('value'));
            });

            //Now comparing both data structures, if equal submit button hides, else shows
            if(dbRadios.compare(submitedRadios)){
                $('form :submit').fadeOut('slow');
            }else{
                $('form :submit').fadeIn('slow');
            }
        });