Add or change CSS class based on a selected value in html page

Question

I have the following hmtl page, is it possible to add a class on the div(line 3) based on the selection of the "Transaction Type". I Need to add a class "has-error" on line 3 of the below html ("div class="tab-pane active has-error" id="tab-first") if i am selecting transaction type "Expense" from the select option and I need to replace class to "has-success" if i am selecting "Income" from the select option.

<html>
    <body>
        <div class="tab-pane active" id="tab-first">

            <div class="form-group">
                <label class="col-md-2 col-xs-12 control-label">Transaction Type</label>
                <div class="col-md-3 col-xs-12">
                    <select id="wlt_txn_type" name="wlt_txn_type" class="form-control" required>
                        <option value="" disabled selected>Choose option</option>
                        <option value="Income">Income</option>
                        <option value="Expense">Expense</option>
                    </select>
                    <span class="help-block">Required</span>
                </div>
                <label class="col-md-2 col-xs-12 control-label">Transaction Date</label>
                <div class="col-md-3 col-xs-12">                                                                                                                                                        
                    <input id="wlt_txn_date" Name="wlt_txn_date"type="date" class="form-control" required/>
                    <span class="help-block">Required,No Future Date Allowed</span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 col-xs-12 control-label">Select Wallet</label>
                <div class="col-md-3 col-xs-12">                                                                                                                                                        
                    <select id ="wlt_pcat" name="wlt_pcat" class="form-control" required>
                        <option value="" disabled selected>Choose Wallet</option>
                    </select>
                    <span class="help-block">Required</span>
                </div>
                <label class="col-md-2 col-xs-12 control-label">OD Limit</label>
                <div class="col-md-3 col-xs-12">                                                                                                                                                        
                    <input value="" class="form-control" readonly/>

                </div>
            </div>
        </div>  
    </body>
</html>

Thanks in Advance

Ajay Narain Mathur · Accepted Answer · 2015-06-29 02:45:55Z

It is Absolutely possible; Add a change event to the select and then check what the val() is of that select box, based on that add or remove class:

$(document).ready(function() {
  var tempvar = "";
  $("#wlt_txn_type").on("change", function() {
    tempvar = $("#wlt_txn_type").val();
    if (tempvar == "Income") {
      $("#tab-first").addClass('has-success').removeClass('has-error');
    } else
    if (tempvar == "Expense") {
      $("#tab-first").addClass('has-error').removeClass('has-success');
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane active" id="tab-first">

  <div class="form-group">
    <label class="col-md-2 col-xs-12 control-label">Transaction Type</label>
    <div class="col-md-3 col-xs-12">
      <select id="wlt_txn_type" name="wlt_txn_type" class="form-control" required>
        <option value="" disabled selected>Choose option</option>
        <option value="Income">Income</option>
        <option value="Expense">Expense</option>
      </select>
      <span class="help-block">Required</span>
    </div>
    <label class="col-md-2 col-xs-12 control-label">Transaction Date</label>
    <div class="col-md-3 col-xs-12">
      <input id="wlt_txn_date" Name="wlt_txn_date" type="date" class="form-control" required/>
      <span class="help-block">Required,No Future Date Allowed</span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 col-xs-12 control-label">Select Wallet</label>
    <div class="col-md-3 col-xs-12">
      <select id="wlt_pcat" name="wlt_pcat" class="form-control" required>
        <option value="" disabled selected>Choose Wallet</option>
      </select>
      <span class="help-block">Required</span>
    </div>
    <label class="col-md-2 col-xs-12 control-label">OD Limit</label>
    <div class="col-md-3 col-xs-12">
      <input value="" class="form-control" readonly/>

    </div>
  </div>
</div>

Felixpitau · Accepted Answer · 2015-06-29 02:43:56Z

0

This can be done using jQuery like so:

// When the value changes
$("#wlt_txn_type").change(function () {
  // Get the value
  transactionType = $("#wlt_txn_type").val();
  // Add classes according to that value
  if (transactionType == "Expense") {
    $("#tab-first").addClass('has-success').removeClass('has-error');
  } else if (transactionType == "Income") {
    $("#tab-first").removeClass('has-success').addClass('has-error');
  }
});

answered Jun 29, 2015 at 2:43

Felixpitau

218 bronze badges

Comments

aleksandar · Accepted Answer · 2015-06-29 02:46:09Z

Very easily done with jQuery:

$(document).ready(function(){
    
    $( "#wlt_txn_type" ).change(function() {
        if($("#wlt_txn_type option:selected").val() == "Income"){
            $("#tab-first").removeClass("has-error");
            $("#tab-first").addClass("has-success");        
        }
        if($("#wlt_txn_type option:selected").val() == "Expense"){
            $("#tab-first").removeClass("has-success");
            $("#tab-first").addClass("has-error");
        }
    });   
    
});

.has-success {
    background-color: green;
}
.has-error {
    background-color: red;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane active" id="tab-first">
    <div class="form-group">
        <label class="col-md-2 col-xs-12 control-label">Transaction Type</label>
        <div class="col-md-3 col-xs-12">
            <select id="wlt_txn_type" name="wlt_txn_type" class="form-control" required>
                <option value="" disabled selected>Choose option</option>
                <option value="Income">Income</option>
                <option value="Expense">Expense</option>
            </select> <span class="help-block">Required</span>

        </div>
        <label class="col-md-2 col-xs-12 control-label">Transaction Date</label>
        <div class="col-md-3 col-xs-12">
            <input id="wlt_txn_date" Name="wlt_txn_date" type="date" class="form-control" required/> <span class="help-block">Required,No Future Date Allowed</span>

        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 col-xs-12 control-label">Select Wallet</label>
        <div class="col-md-3 col-xs-12">
            <select id="wlt_pcat" name="wlt_pcat" class="form-control" required>
                <option value="" disabled selected>Choose Wallet</option>
            </select> <span class="help-block">Required</span>

        </div>
        <label class="col-md-2 col-xs-12 control-label">OD Limit</label>
        <div class="col-md-3 col-xs-12">
            <input value="" class="form-control" readonly />
        </div>
    </div>
</div>

Alberto I.N.J. · Accepted Answer · 2015-06-29 02:51:26Z

0

If you are using twitter-bootstrap you need to add the has-success or has-error class to the form-group class.

To implement that, you need to use jquery.

JS:

$(function() {

    $('#wlt_txn_type').on('change', function() {
        if ($(this).val() == 'Expense') {
            $('#tab-first .form-group').addClass('has-error');
            $('#tab-first .form-group').removeClass('has-success');
        } else {
            $('#tab-first .form-group').addClass('has-success');
            $('#tab-first .form-group').removeClass('has-error');
        }
    });

});

Here's the JsFiddle link.

Hope it helps.

answered Jun 29, 2015 at 2:51

Alberto I.N.J.

1,85315 silver badges19 bronze badges

Collectives™ on Stack Overflow

Add or change CSS class based on a selected value in html page

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related