Question

consider this code.

when button is clicked ‘active’ class is added to this, and removed for all other buttons.

i want the page to load with one button set with active class, but when i put that code in (document).ready at the top, it runs every time a button is clicked, (it should be removed the second another button is clicked.

$(document).ready(function () {
   $("#society-buttons-form .big-button :input").addClass('active');
});


    //new jquery for buttons, does not lose class
    $("#society-buttons-form .small-button :input, #society-buttons-form .big-button :input").hover(function(){
        $(this).addClass("hoveractive");
      },
      function () {
        $(this).removeClass("hoveractive");
      }
    );


    $("#society-buttons-form .small-button :input, #society-buttons-form .big-button :input").click(function(){

        $("#society-buttons-form .small-button :input, #society-buttons-form .big-button :input").removeClass('active');
        $("#society-buttons-form :input, #society-buttons-form .big-button :input").removeClass('active');
       // $("#society-buttons-form .big-button :input").removeClass('active');
        $(this).addClass('active');
        $(this).removeClass("hoveractive");

    });

Answer 1

If button submits form you must add

return false;

to the end of your onclick handler.