Using radio buttons to alter CSS properties of a submit button

Question

Using radio buttons to alter CSS properties of a submit button

I’m struggling to figure out how to change the css class of a submit button when toggling between two radio buttons. I've searched for examples but haven't found one that fits my needs. Can anyone offer some assistance?

Below is my form:

<form class="orderform">
    <input type="radio" name="choice" id="out" value="140" checked> <label for="out">I want A</label>
    <input type="radio" name="choice" id="in" value="40"> <label for="in">I want B</label>
    <input type="submit" value="Save changes" class="submit-btn-disabled" disabled="disabled">
</form>

The default appearance of the submit button should be as shown above (class="submit-btn-disabled"). When enabled, it should display with the class "submit-btn", along with a hover effect:

<input type="submit" value=" Save changes" class="submit-btn">

Here are the corresponding CSS classes:

input.submit-btn-disabled{
    -webkit-box-shadow: none;     
    -webkit-box-shadow: none;   
    box-shadow: none;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
    border: none;
    background-color: #c4daaa;
    padding: 0.8em;
    font-size: 0.8em;
    color: #fff;
    cursor: pointer;
    margin-top: 1em;
}     

input.submit-btn{
    -webkit-box-shadow: none;     
    -webkit-box-shadow: none;   
    box-shadow: none;
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
    border: none;
    background-color: #3A7B30;
    padding: 0.8em;
    font-size: 0.8em;
    color: #fff;
    cursor: pointer;
    margin-top: 1em;
} 

input.submit-btn:hover{
    background-color: #82bc00;
}

javascript jquery css radio-button

Answer 1

Answer №1

Here is a handy solution - http://jsfiddle.net/jpatel/FXp8E/

You can achieve this by using the toggleClass function and making CSS changes.

JavaScript:

$("[name=choice]").click(function(){
            $('.submit-btn').toggleClass('active');
    });

CSS:

input.submit-btn.active{
background-color: #82bc00;}

Instead of changing the classes of submit-btn and submit-btn-disabled, you can simply add or remove the active class for the desired behavior.

Answer 2

Here is a handy solution - http://jsfiddle.net/jpatel/FXp8E/

You can achieve this by using the toggleClass function and making CSS changes.

JavaScript:

$("[name=choice]").click(function(){
            $('.submit-btn').toggleClass('active');
    });

CSS:

input.submit-btn.active{
background-color: #82bc00;}

Instead of changing the classes of submit-btn and submit-btn-disabled, you can simply add or remove the active class for the desired behavior.

Answer 3

Answer №2

To achieve the desired functionality, you may need to associate a click event with the radio buttons and then incorporate toggleClass and hasClass methods to adjust the appearance of the submit button and its disabled status. Here's an example:

$("#radio-buttons").on("click", function (e) {
    var isDisabled = $(":submit").hasClass('disabled');
    if(isDisabled) {
     $(":submit").toggleClass('disabled').toggleClass('enabled');
     $(":submit").prop('disabled', false);
    }
});

Answer 4

To achieve the desired functionality, you may need to associate a click event with the radio buttons and then incorporate toggleClass and hasClass methods to adjust the appearance of the submit button and its disabled status. Here's an example:

$("#radio-buttons").on("click", function (e) {
    var isDisabled = $(":submit").hasClass('disabled');
    if(isDisabled) {
     $(":submit").toggleClass('disabled').toggleClass('enabled');
     $(":submit").prop('disabled', false);
    }
});

Answer 5

Answer №3

Hooray! After days of searching high and low, I finally stumbled upon the perfect solution right here. It only took me about 2 hours to solve the issue, and now I'm overjoyed! :) By combining some of the suggestions provided, I managed to add

«<action=”” method="post">

to the form. The solution appears to be working smoothly for me; fingers crossed that it's compatible with responsive websites and cross-browser functionality as well.


    <script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    $('#out').click(function() {
        $('#submit').addClass('submit-btn-disabled');
        $('#submit').removeClass('submit-btn');
        $("#submit").prop('disabled', true);
    });
    $('#in').click(function() {
        $('#submit').removeClass('submit-btn-disabled');
        $('#submit').addClass('submit-btn');
        $("#submit").prop('disabled', false);
    });
});
});//]]>  
</script>

This solution is blazing fast for me! :)

Answer 6

Hooray! After days of searching high and low, I finally stumbled upon the perfect solution right here. It only took me about 2 hours to solve the issue, and now I'm overjoyed! :) By combining some of the suggestions provided, I managed to add

«<action=”” method="post">

to the form. The solution appears to be working smoothly for me; fingers crossed that it's compatible with responsive websites and cross-browser functionality as well.


    <script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    $('#out').click(function() {
        $('#submit').addClass('submit-btn-disabled');
        $('#submit').removeClass('submit-btn');
        $("#submit").prop('disabled', true);
    });
    $('#in').click(function() {
        $('#submit').removeClass('submit-btn-disabled');
        $('#submit').addClass('submit-btn');
        $("#submit").prop('disabled', false);
    });
});
});//]]>  
</script>

This solution is blazing fast for me! :)

Answer 7

Answer №4

I didn't follow the recommendation to use toggleClass(), so this code could be optimized further, but I believe I successfully addressed your objective.

Take a look at the following code snippet:

HTML (I simply included an id for the button):

<form class="order-form">
   <input type="radio" name="choice" id="out" value="140" checked /> <label for="out">I prefer Option A</label>
   <input type="radio" name="choice" id="in" value="40" /> <label for="in">I prefer Option B</label><br />
   <input type="submit" value="Save Changes" id='submit' class="disabled-submit-btn" disabled="disabled" /><br />
</form>

The CSS remains unchanged

and here is the jQuery section:

$(document).ready(function() {
    $('#out').click(function() {
        $('#submit').addClass('disabled-submit-btn');
        $('#submit').removeClass('active-submit-btn');
    });
    $('#in').click(function() {
        $('#submit').removeClass('disabled-submit-btn');
        $('#submit').addClass('active-submit-btn');
    });
});

You can also view it here: http://jsfiddle.net/dbf17/

Answer 8

I didn't follow the recommendation to use toggleClass(), so this code could be optimized further, but I believe I successfully addressed your objective.

Take a look at the following code snippet:

HTML (I simply included an id for the button):

<form class="order-form">
   <input type="radio" name="choice" id="out" value="140" checked /> <label for="out">I prefer Option A</label>
   <input type="radio" name="choice" id="in" value="40" /> <label for="in">I prefer Option B</label><br />
   <input type="submit" value="Save Changes" id='submit' class="disabled-submit-btn" disabled="disabled" /><br />
</form>

The CSS remains unchanged

and here is the jQuery section:

$(document).ready(function() {
    $('#out').click(function() {
        $('#submit').addClass('disabled-submit-btn');
        $('#submit').removeClass('active-submit-btn');
    });
    $('#in').click(function() {
        $('#submit').removeClass('disabled-submit-btn');
        $('#submit').addClass('active-submit-btn');
    });
});

You can also view it here: http://jsfiddle.net/dbf17/

Using radio buttons to alter CSS properties of a submit button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Managing a multidimensional array in AJAX using PHP (specifically CodeIgniter) and JSON

Executing an Amplifyjs GET request containing a request body

Static checks do not apply to CSS variables

What is the reason for the object being detected as undefined?

The specified type '{}' cannot be assigned to type 'ReactNode'

What are the capabilities of an INNER JOIN query in Objection JS?

Is there a reason why using margin:auto doesn't work for vertically centering items?

The functionality of "#button_1" remains unchanged despite using .click() or .hover() methods

The placeholder tags in the input box are not aligning correctly with Bootstrap 3.2

Could different sets of data be shown in different display modes using fullcalendar.js?

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Tips for implementing a custom filter in an AngularJS JavaScript controller

Optimizing Image Loading: Using jQuery and JavaScript to Load Images On Demand

"Streamlining data entry with an uncomplicated HTML form input that accepts multiple values from a

Implementing a method to pass total value to the <td> tag in angular JS using controller

How to eliminate a particular validator from a form group in Angular

Ways to activate the built-in HTML5 form validation without actually submitting the form

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Node server receiving duplicate emit events from React socket io client

Using the Proper 'this' Reference Without Repeating 'this' in Nested Functions