CODEWITHSUNDEEP
javascriptjquery
Muhammad Rizwan
Muhammad Rizwan

Reputation: 147

Change Background color of input field using JavaScript

I am making a form and making input field to read only using JavaScript. I want to change the default color for read only attribute to green or yellow.

HTML

<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

When someone click on female the input having Id's "age" and "phone" becomes reading only using JavaScript.

JS

$(function() {
$("input[name='sex']").change(function() {
    if($(this).val() == "female") {
        $("#age").attr("disabled", true);
        style="backgroundcolor=green"
        $("#phone").attr("disabled", true);
    } else if($(this).val() == "male") {
        $("#age").attr("disabled", false);
        $("#phone").attr("disabled", false);
    }
});
});

I want to change the color of input field when it is read only.

Upvotes: 6

Views: 42001

Answers (5)

hityagi
hityagi

Reputation: 5256

UPDATED 22 Jul 2020

Method 1:

You can use : .css()

$("#age,#phone").css("background-color","#0F0");


$("input[name='sex']").change(function() {
    if($(this).val() == "female") {
        $("#age,#phone").attr("disabled", true).css("background-color","#0F0");
    } else if($(this).val() == "male") {
        $("#age,#phone").attr("disabled", false).css("background-color","#FFF");;
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

Method 2:

Another simple way can be using CSS class :

JS:

$("#age,#phone").addClass("green");

CSS:

.green { background-color:#0F0;}


$("input[name='sex']").change(function() {
                var isOptional = $(this).val() == "female";
        $("#age,#phone").attr("disabled", isOptional)
        if(isOptional) $("#age,#phone").addClass("green");
        else $("#age,#phone").removeClass("green");
});
.green{
    background-color:#0F0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

Method 3:

And there is yet another simple way using CSS selector to do so. :

JS:

$("#age,#phone").attr("disabled", true);

CSS:

input:disabled { background-color:#0F0;}


$("input[name='sex']").change(function() {
  $("#age,#phone").attr("disabled", $(this).val() == "female");
});
input:disabled {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

Refer : https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

Upvotes: 17

Sergio
Sergio

Reputation: 147

As a beginner this is my solution for changing the background color of an input field. I am not sure if this is the best practice, but I would like to share it with the experts here. 

    $("#name").focusin(function() {
      $(this).addClass("green");
    });

    $("#name").blur(function() {
      $(this).removeClass("green");

      if (!$(this).val()) {
        $(this).addClass("warning");
      } else {
        $(this).removeClass("warning");
        $(this).addClass("green");
      }
    });
.warning {
  background-color: red;
  color: white;
}

.green {
  background-color: rgba(144, 238, 144, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formulier">
  <form>
    <div class="form-group row">
      <label class="col-md-2">Name: </label>
      <div class="col-md-6">
        <input type="text" class="col-md-6" id="name" />
      </div>
    </div>
  </form>
</div>

Upvotes: 0

jonyjm
jonyjm

Reputation: 983

Why dont you use just css?

Define a style for inputs disabled in your css file, and just disable them with js like you are doing right now...

For example:

input[disabled] { background-color:#F00; }

Upvotes: 0

user2019037
user2019037

Reputation: 762

You can try this:

$("input[name='sex']").change(function () {
    if ($(this).val() == "female") {
        $("#age").attr("disabled", true);
        $("#age, #hobbies, #phone").css("background-color", "green");
        $("#phone").attr("disabled", true);
    } else if ($(this).val() == "male") {
        $("#age").attr("disabled", false);
        $("#phone").attr("disabled", false);
        $("#age, #hobbies, #phone").css("background-color", "white");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male
<br/>
<input type="radio" name="sex" value="female">Female
<br/>Age:
<input type="text" name="age" id="age" size="20">Hobbies:
<input type="text" name="hobbies" id="hobbies" size="20">
<br/>Phone:
<input type="text" name="phone" id="phone" size="20">
<br/>

Upvotes: 0

Levi Beckman
Levi Beckman

Reputation: 533

$("#age").css('background-color', 'green');

OR 

$(this).css('background-color', 'green');

Upvotes: 1

Related Questions