jQuery toggleClass example

Toggle class name on click in jQuery

by tankla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<div id="source-system-search"  class="search-Box" >

  <form id="searchForm" name="searchForm" action="" method="POST" onsubmit="return false;">

    <div class="selectBox">
      <span>Start Date</span>
      <input type="text" class="datepicker" id="startDt" name="startDt" size="8" style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
      <input type="text" class="tiempicker" id="startTime" name="startTime" size="7" value="00:00:00"style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
    </div>

    <div class="selectBox">
      <span>End Date</span>
      <input type="text" class="datepicker" id="endDate" name="endDate" size="8" style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
      <input type="text" class="tiempicker" id="endTime" name="endTime" size="7" value="00:00:00" style="width: 130px; height: 27px; font-size: 14px; letter-spacing: 1.5px;">
     </div>

     <input type = "hidden" id ="startdtm" name="startdtm">
     <input type = "hidden" id ="enddtm" name="enddtm">
  </form>

  <a href="javascript:getInterfaceLogSystem()" id="getInterfaceLogSystem" class="easyui-linkbutton" data-options="iconCls:'icon-search'"></a>

</div>

JavaScript

$(document).ready(function() {

	$(".datepicker").datepicker({
		dateFormat : 'yy-mm-dd'
	});
	$(".datepicker").datepicker('setDate', 'today');

  
  $(".timepicker").timepicker({
  	timeFormat : 'HH:mm:00'
  });

  startdtm_val = $("#startDt").val() + "T" + $("#startTime").val()+".000Z";
  enddtm_val = $("#endDate").val() + "T" + $("#endTime").val()+".999Z"; 

   $('#startdtm').val(startdtm_val);
   $('#enddtm').val(enddtm_val);
						

 //getSummary();

	init();

});

function init(){
   getInterfaceLogSystem();
}
																		
function getInterfaceLogSystem() {

   $('#startdtm').val(startdtm_val);
   $('#enddtm').val(enddtm_val);
   
  var target = "/interface/interfaceLogview/getinterfaceLogInfo";
  var data =  $("#searchForm").serializeObject();
  									console.log(data);
  
  console.log("data : "+ data)
  $.ajax({
    url:target,
    contentType : "application/json",
		data : JSON.stringify(data),
		type : "POST",
		success : function(result) {
			$('#interfaceLogTB').datagrid({
				data : result.cList
			});
		}
	});
}

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};