change color input field on click

Question

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?

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

Nick Parsons · Accepted Answer · 2019-02-03 10:00:05Z

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.com/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.

Maheer Ali · Accepted Answer · 2019-02-03 10:04:43Z

1

.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.com/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()">

edited Feb 3, 2019 at 10:04

answered Feb 3, 2019 at 9:59

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

ellipsis · Accepted Answer · 2019-02-03 10:03:14Z

0

Use css() for changing bgcolor on click of button

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

<script src="https://cdnjs.cloudflare.com/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>

edited Feb 3, 2019 at 10:03

answered Feb 3, 2019 at 9:57

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Comments

Partho63 · Accepted Answer · 2019-02-03 10:32:01Z

0

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.com/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

edited Feb 3, 2019 at 10:32

Partho63

3,1362 gold badges24 silver badges42 bronze badges

answered Feb 3, 2019 at 10:06

Roysh

1,5503 gold badges17 silver badges26 bronze badges

Comments

Partho63 · Accepted Answer · 2019-02-03 10:37:56Z

0

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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Feb 3, 2019 at 10:37

Partho63

3,1362 gold badges24 silver badges42 bronze badges

Collectives™ on Stack Overflow

change color input field on click

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related