How do i change input field background color based on onclick?

user_16179510 0
Viewed 1085

I want to change the input field back-ground color based on gender selection.

So far I have:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
 $(document).ready(function(){
   $("#male").click(function(){
    $("#gender").css("backgroundColor:#0000FF");
 }); 
</script> 

<script>
 $(document).ready(function(){
   $("#female").click(function(){
    $("#gender").css("backgroundColor:#FFC0CB");
 }); 
</script> 

<form>
 <label for="gender">Gender:</label>
 <select id="gender" name="gender">
   <option value="male" selected>Male</option>
   <option value="female">Female</option>
 </select><br>
</form>

This has not been working

css html jquery javascript
3 Answers

you can have this is a JavaScript function and call it with onchange= like this

function changeColor(el) {
if (el.value == "male")
{
  document.body.style.backgroundColor = "#0000FF";
  }
if (el.value == "female")
{
  document.body.style.backgroundColor = "#FFC0CB";
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<form>
 <label for="gender">Gender:</label>
 <select id="gender" name="gender" onchange="changeColor(this)">
   <option disabled selected value> -- select an option -- </option>
   <option value="male">Male</option>
   <option value="female">Female</option>
 </select><br>
</form>

user_149717840

Events are not supported on <option> element cross browser

You want to use change event of the select then conditionally set color based on new value.

Also note your syntax for css() is not quite right

$("#gender").change(function() {
  const color = this.value === 'female' ? '#FFC0CB' : '#0000FF';
  $(this).css('backgroundColor', color)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male" selected>Male</option>
    <option value="female">Female</option>
  </select><br>
</form>

user_11759660

Get the current option:selected value using $(#gender option:selected).val() then set it using the elements tag selector. In your change function you can access the element using $(this). Use a conditinal to see if it is set to $(this).val() === "male" ==> $(this).css("background-color", "lightblue") if not set to female $(this).css("background-color", "pink") by default as that is your only other option.

$(document).ready(function() {
  $('#gender option:selected').val() === "male" ? $('#gender').css("background-color", "lightblue") :  $('#gender').css("background-color", "pink")
  
  $("#gender").change(function(e) {
    $(this).val() === "male" ? $(this).css("background-color", "lightblue") : $(this).css("background-color", "pink")
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form>
  <label for="gender">Gender:</label>
  <select id="gender" name="gender">
    <option value="male" selected>Male</option>
    <option value="female">Female</option>
  </select><br>
</form>

user_15335920
Related