jQuery : onChange

Post by Goborijung at 2022-06-20 11:20:35 | ID: 1600

---- Reference ----

https://api.jquery.com/change/

---- HTML ----

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

---- JS ----

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(function(){
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

$( "#other" ).click(function() {
  $( ".target" ).change();
});
});
</script>

jQuery : onClick

Post by Goborijung at 2022-06-20 10:30:33 | ID: 1596

---- Reference ----

https://api.jquery.com/click/

---- HTML ----

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

---- JS ----

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>

$(function(){

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

$( "#other" ).click(function() {
  $( "#target" ).click();
});

});
</script>

jQuery : onLoad

Post by Goborijung at 2022-06-20 10:43:37 | ID: 1598

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(function() {
    alert( "ready!" );
});
</script>

jQuery : set value

Post by Goborijung at 2022-06-20 10:48:19 | ID: 1599

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$("button").click(function(){
  $("input:text").val("Glenn Quagmire");
});
</script>

jQuery : Show / Hide Password , Toggle Password

Post by Goborijung at 2021-03-16 13:35:26 | ID: 1045

>> HTML
<input id="password-field_<?=$rs['ac_id']?>" type="password" name="password" value="<?=$rs['ac_pass']?>" disabled>
<span toggle="#password-field_<?=$rs['ac_id']?>" class="fa fa-fw fa-eye field-icon toggle-password_<?=$rs['ac_id']?>"></span>

>> Javascript (JQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(".toggle-password_<?=$rs['ac_id']?>").click(function()
  {
    $(this).toggleClass("fa-eye fa-eye-slash");

    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password")
    {
      input.attr("type", "text");
    }
    else
    {
      input.attr("type", "password");
    }

  });
</script>

jQuery : Cell Mouse Click :: Recommend

Post by Goborijung at 2020-08-10 09:26:58 | ID: 703

<script  src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>     
<script>
	$(document).ready(function(){
		$("#myTable td").click(function() {

			/* Get Index Row and Columns */
			var rowIndex 	= parseInt($(this).parent().index()); // alert(rowIndex);
			var colIndex 	= parseInt($(this).index()); 					// alert(colIndex);

			//var srt = $(this).text(); 																// เอาข้อมูลใน Cell ที่เลือก
			//var srt = $(this).closest('tr').find('td:eq(1)').text(); 	// เอาข้อมูลใน Cell คอลั่่มที่ 1 จากแถวที่เลือก
			//var srt = $(this).closest('tr').children('td').text(); 		// เอาข้อมูลใน Cell ทุกคอลั่ม จากแถวที่เลือก
			
			var Barcode = $(this).closest('tr').find('td:eq(4)').text(); 		// เอาข้อมูลใน Cell คอลั่่มที่ 1 จากแถวที่เลือก

			/* Output */
			//$("#result").html( "rowIndex =" + rowIndex + "  ,  colIndex ="+ colIndex ); //get row and get columns
			//$("#Lot").html(Barcode);			//set text to text : html
			$("#Barcode").val(Barcode); 	//set text-value to textbox : html
			$("#Barcode").focus();

		});
	});
</script>

JQuery : Check and UnCheck (Checkbox)

Post by Goborijung at 2020-08-07 15:12:01 | ID: 360

<script>		
  $(document).ready(function(){
    $("input#chkItemCode").change(function(){
    	if($(this).is(':checked'))
    	{
    		alert('chkecked');
    	}
    	else
    	{
    		alert('unchecked');
    	}
    });
  });
</script>

Example:
<script>		
  $(document).ready(function(){
    $("input#chkItemCode").change(function(){
    	if($(this).is(':checked'))
    	{
    		//alert('chkecked');
    		$("input#item").prop('disabled',false);
    	}
    	else
    	{
    		//alert('unchecked');
    		$("input#item").prop('disabled',true);
    	}
    });
  });
</script>

--------------------------------------------------------------------------

กรณีเขียนเป็น Function
<script>
  function eCheckBox(chkID,txtID) /* checkBoxID , inputTextID */
  {
  	$("input#"+chkID).change(function(){
   	if($(this).is(':checked'))
   	{
   		//alert('chkecked');
   		$("input#"+txtID).prop('disabled',false);
   	}
   	else
   	{
   		//alert('unchecked');
   		$("input#"+txtID).prop('disabled',true);
   	}
  	});
  }
  
  $(document).ready(function(){
  
  eCheckBox('chkItemCode','item');
  eCheckBox('chkSerialNumber','sn');
  eCheckBox('chkCustomer','cus');
  eCheckBox('chkLotNo','lot');
  
  });
</script>

Jquery : Confirm

Post by Goborijung at 2020-08-07 15:11:31 | ID: 202

https://craftpip.github.io/jquery-confirm/

JQuery : get cell values แบบต่างๆ (cell mouse click)

Post by Goborijung at 2020-08-10 08:54:05 | ID: 405

ดูตัวอย่าง :: https://codepedia.info/jquery-get-table-cell-td-value-div/

แบบที่ 1 get value by cell
https://codepedia.info/editor-example/jquery-read-html-table-data/

แบบที่ 2 get value by cell with style css
https://codepedia.info/editor-example/jquery-read-html-table-contained-html-element-div-span-data-example/

แบบที่ 3 get value by cell with class name
https://codepedia.info/editor-example/jquery-how-to-get-html-element-div-value-inside-td/

EXAMPLE

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<style>

#myTable td {
    padding: 8px;
}


.btnSelect {
    background-color: #f44336;
    border: 2px solid #f44336;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.btnSelect:hover{
 background-color: #c93326;    border: 2px solid #c93326;

}
</style>
<body>

<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Moto G</td>
<td>Moto G next generation smart phone</td>
<td><button class="btnSelect">Select</button></td>
</tr>
<tr>
<td>2</td>
<td>Iphone SE</td>
<td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>3</td>
<td>Sony z3</td>
<td>This is waterproof, well designed, etc</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>4</td>
<td>Moto X Play</td>
<td>Another class product from Moto G Family</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>5</td>
<td>Samsung S7</td>
<td>Best smart phone, nice UI etc.</td>
<td><button class="btnSelect">Select</button></td>
</tr>
</table>

<script>
$(document).ready(function(){
	// code to read selected table row cell data (values).
	$(".btnSelect").on('click',function(){
		 var currentRow=$(this).closest("tr");
		 var col1=currentRow.find("td:eq(0)").html();
		 var col2=currentRow.find("td:eq(1)").html();
		 var col3=currentRow.find("td:eq(2)").html();
		 var data=col1+"+col2+""+col3;
		 alert(data);
	});
});
</script>
</body>
</html>

jQuery : Get Key Enter

Post by Goborijung at 2020-08-07 14:21:25 | ID: 615

<input type="text" name="txt1" id="txt1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#txt1').on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
</script>

>> การประยุกต์ใช้กับ JQuery Post
<script>
  $("#Barcode").on('keypress',function(e) {
  	if(e.which == 13) {
  		//alert('You pressed enter!');
  		
  		var val = $("input#Barcode").val(); //get Val
  		//alert(val);
  
  		$.post("Cutting_ConfirmInStock_get.php",
      {
        BarCode:$("input#Barcode").val()
      },
  
  	  function(data, status){
  	    //alert("Data: " + data + "
Status: " + status);
  	    document.getElementById('response').innerHTML = data;
  	  });
  		
  		$("input#Barcode").val(''); //set val = ''
  
  	}
  });
</script>