I am using Bootstrap 4 and want to change background color of an input field by clicking button.

here is my code:

        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="txtres" readonly>
            </div>
        </div>

here is button:

<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">

Can someone help me with jQuery?

I am using Bootstrap 4 and want to change background color of an input field by clicking button.

here is my code:

        <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="txtres" readonly>
            </div>
        </div>

here is button:

<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">

Can someone help me with jQuery?

• javascript
• jquery
• html
• css

• What's your jQuery code so far? To what element do you want to change the background color? – Roysh Commented Feb 3, 2019 at 9:56

5 Answers 5

You can add a .click event to your button and then change the color of your input field using .css():

$('.color-btn').click(function() {
  $('.input-color').css({color: 'red', 'background-color': 'black'});
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
  <div class="col-sm-10">
    <input value="Some text" class="input-color" type="text" class="form-control" name="txtres" readonly />
  </div>
</div>

<input type="button" class="color-btn btn btn-danger" value="Berechnen" />

Here I have given your button the class color-btn so it can be targeted using jquery easily, and have also given your text box the class input-color. Thus, any input element with the class input-color will be able to change color when your button is clicked.

.css('background-color','blue') use this method on your input you want to change color. You access the the input by name like this $('input[name="txtres"]')

function sumValues(){
  $('input[name="txtres"]').css('background-color','blue')
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="txtres" readonly>
            </div>
        </div>
<input type="button" class="btn btn-danger" value="Berechnen" onclick="sumValues()">

Use css() for changing bgcolor on click of button

function sumValues(e){
$('input[name=txtres]').css('backgroundColor','red')
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div class="form-group row">
            <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="txtres" readonly>
                <input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">
            </div>
        </div>

That's what I would do

$('btn-danger').css("background-color", "blue");

$(document).ready(function(){
  $('.btn-danger').on( "click", function() {
    $('input[type="text"]').css("background-color", "blue");
  });
});

<div class="form-group row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" name="txtres" readonly>
  </div>
</div>

<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

over here you'rs listening to a click even on the button and change the background color of the text input after click

check fiddle

You can also make a css class with desired background-color and then add that class to input when button is clicked. It's just another way you can do this:

sumValues = function(){
  $('input[name="txtres"]').addClass( "colored-background" );
}

.colored-background {
  background: lightgreen;
}

<div class="form-group row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Dein Ersparniss / Jahr</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" name="txtres" readonly>
  </div>
</div>

<input type="button" class="btn btn-danger" value="Berechnen" onClick="sumValues()">

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>