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