jQuery addClass example

Change class name on click in jQuery

by riaanc

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label >Account Number</label>
      <input type="text" class="form-control" id="txtAccountNumber" minlength="3" pattern="[A-Za-z0-9]{3}" title="Account number should consist of three alphanumerical characters" required data-rule-required="true" data-rule-minlength="3" data-rule-maxlength="3"/>
    </div>
    <div class="form-group col-md-6">
      <label>Status </label>
      <select class="form-control" id="cmbH_status">
        <option value="P">Pending</option>
        <option value="H">History</option>
        <option value="R">Rejected</option>
      </select>      
    </div>
  </div>

  
  <div class="form-row">
    <div class="form-group col-md-6">
      <label>Category</label>
      <select class="form-control" id="cmbCategory">
        <option value="Subscription">Subscription</option>
        <option value="Redemption">Redemption</option>
        <option value="CashDividend">Cash Dividend</option>
        <option value="TranCode">Tran Code (BTB)</option>
      </select>      
    </div>
    
    <div class="form-group col-md-6">
      <label >Transaction Code</label>
      <input type="text" class="form-control" id="txtTranCode" readonly>
    </div>
    
  </div>  
  
  
  
  <div class="form-row">
    <div class="form-group col-md-6">
     ...

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

.error{
  color: red;
}

.hidden{
  display: none;
}

span.deleteicon {
  position: relative;
}
span.deleteicon span {
  position: absolute;
  display: block;
  top: 10px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAExSURBVDiNpZMxTgJREIa/GaC3M1iQDQ3HIIQjKBETO3vB4DFIxEOYEI1HIIRKj0BFNhSC1R6AZccCd9kH7IuJU877/3/+mTcj617nDrOhIXO0dFMdjUM8sep3A5J4LNDAbCDr+6vI4Gz3bCFaaRWJ7MibKUjwm4rUkPkeIgHJZrrqd4MD7ikyGHM14RpYuCLx7Pvhsp5mvnqdGkk8cciw1LLdSgoQsylQdwAla20TjYvezp/eF+K1iIWZq3wuNychFwVO8pFVzho+RHhEjsgAWlDpz/HvFjIHq343EEtmLtnC/SABqCVbJvk90bTyyX8u0TbRJp49Ed8OpFZ9GBWz1yPbWm7m+7x4flui5fZxO/qiAg2XfPqYqqNxiFZarog1FLMBEGF8+C7RFZFPIBKzxx/7Q79zwikSRQAAAABJRU5ErkJggg==) no-repeat left center;
  cursor: pointer;
}
span.deleteicon input {
  padding-right: 16px;
  box-sizing: border-box;
}

JavaScript

console.log("test");

$('input.clearable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
  $(this).prev('input').val('').trigger('change').focus();
}));



$("#cmbCategory").change(() => {
	switch ($("#cmbCategory").val())
  {
  	case "Subscription": 
    	$("#txtTranCode").val("CTB");
      $("#cmbTran_cat").val("P");
      $("#cmbTran_cat").attr("disabled", true);
      $("#cmbTranType").val("B");
      $("#cmbTranType").attr("disabled", true);
      
    	break;
    case "Redemption": 
    	$("#txtTranCode").val("BTC");
      $("#cmbTran_cat").val("M");
      $("#cmbTran_cat").attr("disabled", true);
      $("#cmbTranType").val("S");
      $("#cmbTranType").attr("disabled", true);
    	break;
    case "CashDividend": 
    	$("#txtTranCode").val("BTC");
      $("#cmbTran_cat").val("M");
      $("#cmbTran_cat").attr("disabled", true);
      $("#cmbTranType").val("D");
      $("#cmbTranType").attr("disabled", true);
    	break;
    case "TranCode": 
    	$("#txtTranCode").val("BTB");
      $("#cmbTran_cat").val("P");
      $("#cmbTran_cat").attr("disabled", false);
      $("#cmbTranType").val("B");
      $("#cmbTranType").attr("disabled", false)
      $("#optDividend").hide();
    	break;
  }
});

$("#cmbFeeExempt").change(() => {
	$("#pnlFees").toggleClass("hidden", $("#cmbFeeExempt").val() == "Yes")
});

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

$("#cmbCategory").change();

$("#txtOrderAmount").on("keyup search change", () => {
	if ($("#txtOrderAmount").val() != "")
  {
  	$("#txtOrderShares").val("");
    $("#txtOrderShares").attr("readonly", true);
  }
  else
  {
  	$("#txtOrderShares").attr("readonly", false);
  }
});


$("#txtOrderShares").on("keyup search change", () => {
	if ($("#txtOrderShares").val() != "")
  {
  	$("#txtOrderAmount").val("");
    $("#txtOrderAmount").attr("readonly", true);
  }
  else
  {
  	$("#txtOrderAmount").attr("readonly", false);
  }
});

String.prototype.forceLength = function...