Question 42775 in Html Question posted in
Some basic documentation can be found here.

Change the color of a button, if at least one option of a form is selected – Html

I have a form with three options, by default the button is disabled in gray, I want that if the user just chooses an option, this button changes to blue.

<div id="openModal" class="modalDialog" data-modalorder="1">
<div>
<a href="#close" title="Close" class="close">X</a>
<h1 style="text-align: center; font-weight: 600">Gender</h1>
<form id="form_gender">
    <div class="hungry">
        <div class="selection">
            <input id="man" value="Man" name="gender" type="radio" /> 
            <label for="man">Man</label>
        </div>
        <div class="selection">
            <input id="woman" value="Woman" name="gender" type="radio" />
            <label for="woman">Woman</label>
        </div>
        <div class="selection">
            <input id="other" value="Other" name="gender" type="radio" />
            <label for="other">Other</label>
        </div>
    </div>
    <input id="btn_genero" class="getAssignment" type="button" onclick="btnGenero()" value="Siguiente">   
    </form>
</div>

I have the following function to add the new class with the new color, but it doesn’t work correctly. When I select an option the color does not change to blue

<script>
const btnGenero = () =>{
            
            try{
              const value = document.querySelector('input[name="gender"]:checked').value;
              var element = document.getElementById("btn_genero");
              if(value != ''){
                element.classList.remove("getAssignment");
                element.classList.add("getAssignment2");
                alert('success')
              }else{
                alert('required')
              }
            }catch(err){
              alert('required')
            }
            
          }
</script>

And this is my css code

<style>
.getAssignment {
cursor: pointer;
background: gray;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
width: 259px;
height: 34px;
}
.getAssignment2 {
cursor: pointer;
background: red;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
width: 259px;
height: 34px;
}
Tags:

2

Answers


  1. 0 
    .hungry:has([type="radio"]:selected) {
   background-color: #0af;
}
    Login or Signup to reply.
  2. 0

    According to your question you need to track the change in radio button not in the input button. Here is a solution :

    let element = document.getElementById("btn_genero");

document.body.addEventListener('change', function (e) {
            let target = e.target;
            switch (target.id) {
                case 'man':
                    alert('man');
                element.classList.remove("getAssignment");
                element.classList.add("getAssignment2");
                    break;
                case 'woman':
                    alert('woman');
                 element.classList.remove("getAssignment");
                element.classList.add("getAssignment2");
                    break;
                case 'other':
                    alert('other');
                 element.classList.remove("getAssignment");
                element.classList.add("getAssignment2");
                    break;
            }
        });
    .getAssignment {
cursor: pointer;
background: gray;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
width: 259px;
height: 34px;
}
.getAssignment2 {
cursor: pointer;
background: blue;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
width: 259px;
height: 34px;
}
    <div>
<a href="#close" title="Close" class="close">X</a>
<h1 style="text-align: center; font-weight: 600">Gender</h1>
<form id="form_gender">
    <div class="hungry">
        <div class="selection">
            <input id="man" value="Man" name="gender" type="radio" /> 
            <label for="man">Man</label>
        </div>
        <div class="selection">
            <input id="woman" value="Woman" name="gender" type="radio" />
            <label for="woman">Woman</label>
        </div>
        <div class="selection">
            <input id="other" value="Other" name="gender" type="radio"  />
            <label for="other">Other</label>
        </div>
    </div>
    <input id="btn_genero" class="getAssignment" type="button" onclick="btnGenero()" value="Siguiente" onchange="changeHandler()">   
    </form>
</div>

    How it works:

    First, register an event handler to the change event of the body. When a radio button is clicked, its change event is bubbled to the body. This technique is called event delegation.
    Then, show a corresponding message based on which radio button is selected.

    And I also changed your css to background "blue" which was on "red"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search