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
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments