jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<form class="form side-from" id="smsForm">
  <div class="form-group">
    <label for="serviceType">Service Type*</label>
    <select class="form-control" id="serviceType" required>
      <option value="0" selected="" disabled="">Select here</option>
      <option value="1">Service 1</option>
      <option value="2">Service 2</option>
      <option value="3">Service 3</option>
    </select>
  </div><br />
  <div class="form-group">
    <label for="serviceQty">Quantity*</label>
    <select class="form-control" id="serviceQty" required>
      <option value="0" selected="" disabled="">Select here</option>
      <option value="1">10000</option>
      <option value="2">25000</option>
      <option value="3">50000</option>
      <option value="4">100000+</option>
    </select>
  </div><br />
  <small class="form-text">(*) all fields are requied</small><br />
  <button type="button" class="btn btn-primary col-12" id="calcValue"><span>Calculate</span>span></button>
</form>

<div id="service_final_price" class="text-center">

JavaScript

$("#calcValue").on('click', function() {
  var serviceType = Number.parseInt($("#serviceType").val());
  var serviceQty = Number.parseInt($("#serviceQty").val());

  const mapping = {
    serviceType: [{

    }],
    serviceQty: [{
      1: 10000,
      2: 25000,
      3: 50000,
      4: 100000
    }]
  };

  if (serviceType === 0 || serviceType === 0) {
    $("#sms_final_price").html('<br/><h3 class="text-danger"><i class="fas fa-info-circle"></i> Select required fields.</h3>');
  } else {

    /* if (serviceType == 1 && serviceQty == 1) {
      var price = 10000 * 0.18;
    } else if (serviceType == 1 && serviceQty == 2) {
      var price = 25000 * 0.16;
    } else if (serviceType == 1 && serviceQty == 3) {
      var price = 50000 * 0.14;
    } else if (serviceType == 1 && serviceQty == 4) {
      var price = 100000 * 0.12;
    
    } else if (serviceType == 2 && serviceQty == 1) {
      var price = 10000 * 0.26;
    } else if (serviceType == 2 && serviceQty == 2) {
      var price = 25000 * 0.24;
    } else if (serviceType == 2 && serviceQty == 3) {
      var price = 50000 * 0.20;
    } else if (serviceType == 2 && serviceQty == 4) {
      var price = 100000 * 0.18;
    
    } else if (serviceType == 3 && serviceQty == 1) {
      var price = 10000 * 0.28;
    } else if (serviceType == 3 && serviceQty == 2) {
      var price = 25000 * 0.26;
    } else if (serviceType == 3 && serviceQty == 3) {
      var price = 50000 * 0.24;
    } else if (serviceType == 3 && serviceQty == 4) {
      var price = 100000 * 0.20;
    } */

    debugger;
    let price;
    switch (serviceType & serviceQty) {
      case 1 & 1:
        price = 10000 * 0.18;
        break;
    }

    $("#service_final_price").html('<br/><h3> .' + price.toFixed(0) + '/- Only</h3>');
  }

});