JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-horizontal">

  <div class="form-group">
    <label for="requestDealerAction" class="col-sm-2 control-label">Action</label>
    <div class="col-sm-10">
      <select class="form-control" id="requestDealerAction">
        <option value="ADD">ADD</option>
        <option value="REMOVE">REMOVE</option>
        <option value="CHANGE" selected="selected">CHANGE</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="currentDealerName" id="currentDealerNameLabel" class="col-sm-2 control-label">Changed To:</label>
    <div class="col-sm-10">
      <label id="currentDealerName">Me</label>
    </div>
  </div>
  <div class="form-group">
    <label for="requestDealerBody" class="col-sm-2 control-label">Request</label>
    <div class="col-sm-10">
      <textarea class="form-control" rows="2" placeholder="Your Request" id="requestDealerBody"></textarea>

    </div>
  </div>
	<div class="form-group">
    <div class="col-sm-10">
      <span class="input-group-addon">
        <input type="checkbox" id="checkKYCRead"aria-label="...">
      </span>
      <label>By clicking, you agree that you read the KYC of the Customer</label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button class="btn btn-default" id="btnRequestDealerSubmit">Submit</button>
    </div>
  </div>
</form>

JavaScript

$(document).ready(function() {
  alert('Hello');
  var accountid = '';

  $("#requestDealerAction").change(function() {
    var selectedVal = this.value;
    var title = '';

    switch (selectedVal) {
      case "ADD": {
        title = "Add";
        break;
      }
      case "REMOVE": {
        title = "Remove";
        break;
      }
      case "CHANGE": {
        title: "Change To";
        break;
      }
      default:
        ""

    }

    $("#currentDealerNameLabel").text(title);

    alert(selectedVal);
  });

  $('#btnRequestDealerSubmit').click(function(e) {
    e.preventDefault();

    //accountId = $("#txtSearchCustomerBox").val();
    var requestNotes = $('#requestDealerBody').val();
    var action = $('#requestDealerAction :selected').val();
    var fromDealer = $('#dealerFromValue').val();

   
		
		var checkVal = $('#checkKYCRead')[0].checked;
		alert(checkVal);
		
		if(!checkVal){
			alert("Not Agreed")
			return;
		}


  });

});