CODEWITHSUNDEEP
javascripthtmlcss
helloworld
helloworld

Reputation: 195

Javascript/CSS: dynamically change border color of HTML element

I have a table rendered from my Laravel installation that displays several properties of my PHP objects, for instance an update interval:

<div class="col-xs-3 text-center">
    <select class="form-control" required id="update_interval" name="update_interval">
        <option value="">update_interval</option>
        <option value="never" selected="selected">never</option>
        <option value="daily">daily</option>
        <option value="weekly">weekly</option>
    </select>
</div>

In the particular case, the 'never' value was set. Next to the settings, a save button is available that allows users to save their settings:

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 text-center">
    <button type="submit" class="" id="buttonAck16">
        <i class="glyphicon glyphicon-floppy-save"></i>
    </button>
</form>

( i know I could employ ajax for this but my JS/PHP skills are fairly limited....).

However, since there can be many rows on page, people might lose track on what was changed. I would like to color the column entries, for instance changing the the border color, if the selected option differs from the original value. So if it was set to "never" and an user selects "weekly", that particular item should be highlighted. And if possible, the save button could be highlighted as well.

What kind of Javascript function allows for a continuous check if things are changed? Anyone?

Upvotes: 0

Views: 1761

Answers (1)

Steve Mulvihill
Steve Mulvihill

Reputation: 717

You can use the jQuery .change() event listener:

Example:

$( "#update_interval" ).change(function() {
  $(".column-1").css("border-color", "#666");
});

Upvotes: 1

Related Questions