PHP, JQuery & Javascript : get value from select/option , split data & calculation

แจกตัวอย่าง PHP, JQuery & Javascript : get value from select/option , split data & calculation

ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ เอาไปต่อยอดได้ ซื้อแล้วปรึกษาได้เรื่อยๆ
1.ระบบร้านอาหาร คลิก
2.เว็บอีคอมเมิร์ชราคาถูก คลิก
3.ระบบหอพัก คลิก
4.ฐานข้อมูลศิษย์เก่า คลิก
5.ระบบเบิกจ่ายเครื่องเขียนสำนักงาน คลิก
6.ระบบสอบออนไลน์ คลิก
7.ระบบห้องสมุด คลิก
8.ระบบอื่นๆ เพิ่มเติม คลิก

คำอธิบาย Code

ตัวอย่าง Code ดังกล่าวจะใช้เจคิวรี่ช่วยดึงข้อมูลจาก value ของ Select/Option จากนั้นเอาค่าที่ได้ไป split เพื่อแยกค่าออก เพราะส่งไป 2 ค่า ได้แก่ ชื่อพนักงาน และ เงินเดือน และขั้นตอนต่อมาคือการประกาศตัวแปรและเพื่อเอาเงินเดือนที่ได้ไป + เพิ่มค่าคอมมิชชั่น และโอที และนำผลรวมรายได้ไปแสดงผลในส่วนของ HTML

คลิปแสดงการทำงาน

ปรับพื้นฐาน PHP คลิก

Full Code index.php *เป็นตัวอย่างเพื่อนำไปศึกษาและพัฒนาต่อยอดครับ เซฟไว้ครับ เผื่อได้ใช้สักวัน

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get value from select/option & calculation by devbanban.com 2023</title>
<!-- jqury -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<h4>PHP & Jquery : get value from select/option , split data & calculation , Example code by devbanban.com </h4>
เลือก พนง. 
  <select id="salary"  name="salary" required>
    <option value="">-เลือกข้อมูล</option>
    <option value='นาย A : 35009'>-นาย A เงินเดือน 35009 บาท </option>
    <option value='นาย B : 44005'>-นาย B เงินเดือน 44005 บาท </option>
    <option value='นาย C : 57011'>-นาย C เงินเดือน 57011 บาท </option>
    <option value='นาย E : 22019'>-นาย E เงินเดือน 22019 บาท </option>
  </select>
  <br>
<!-- display data -->
พนง. ชื่อ : <span id="EmpName"></span>  <br>
เงินเดือน : <span id="EmpSalary"></span> บาท <br>
ค่าคอมมิชชั่น : <span id="commissions"></span> บาท <br> 
ทำโอที : <span id="OTs"></span>  ชั่วโมง <br>
รวมโอที : <span id="TotalOT"></span> บาท  (ชั่วโมงละ  <span id="RateOT"></span>  บาท ) <br>
<font color="red"> <b> รวมรายได้ทั้งหมด = <span id="Summary"></span> บาท </b> </font>

<?php
//ประกาศตัวแปรเพื่อเอาไปใช้ใน Js ในสถานะการณ์จริงข้อมูลส่วนนี้อาจมาจากฐานข้อมูลครับ (คิวรี่มาใช้)
$commissions = 2500; //ค่าคอม
$OTs = 5; //hour
$OtRate = 50; //เรทโอที/ชั่วโมง
?>
  <script>
    $('#salary').on('change', function() {
      var SelectValue = $(this).val(); //from option value
      //split value แยกชื่อกับเงินเดือนออกจากกัน ให้อยู่ในรูปแบบ index , array
      var Emp = SelectValue.split(":"); 
     //ประกาศตัวแปรเพื่อนำค่าต่างๆ ไปใช้งาน
      var EmpName = Emp[0]; //name
      var EmpSalary = Emp[1]; //salary
      var commissions = <?=$commissions;?>; //ค่าคอม
      var OTs = <?=$OTs;?>; //โอที
      var RateOT = <?=$OtRate;?>; //เรทโอที/ต่อชั่วโมง
      var TotalOT = (OTs * RateOT); //หาผลรวมโอที * ชั่วโมง
      var Summary = Number(EmpSalary) + Number(commissions) + Number(TotalOT); //ผลรวมรายได้ทั้งหมด

      //ส่งไปแสดงใน html
      document.getElementById("EmpName").innerHTML = (EmpName);
      document.getElementById("EmpSalary").innerHTML = (EmpSalary);
      document.getElementById("OTs").innerHTML = (OTs);
      document.getElementById("RateOT").innerHTML = (RateOT);
      document.getElementById("TotalOT").innerHTML = (TotalOT);
      document.getElementById("commissions").innerHTML = (commissions);
      document.getElementById("Summary").innerHTML = (Summary);
    });
  </script>
</body>
<!-- devbanban.com 2023 -->
</html>
<!-- 
ขอแนะนำระบบหอพัก : https://devbanban.com/?p=4361
ระบบเบิกจ่ายวัสดุเครื่องใช้สำนักงาน : https://devbanban.com/?p=4601
ระบบสอบออนไลน์ :  https://devbanban.com/?p=4419
ระบบห้องสมุด : https://devbanban.com/?p=4797
ระบบร้านอาหาร : https://devbanban.com/?p=4825
ระบบพร้อมใช้ : https://devbanban.com/?p=4425
คอร์สออนไลน์ : https://devbanban.com/?p=2867
  -->

<!DOCTYPE html>

<head>

<title>Get value from select/option & calculation by devbanban.com 2023</title>

</head>

<body>

<h4>PHP & Jquery : get value from select/option , split data & calculation , Example code by devbanban.com </h4>

เลือก พนง.

<option value="">-เลือกข้อมูล</option>

<option value='นาย A : 35009'>-นาย A เงินเดือน 35009 บาท </option>

<option value='นาย B : 44005'>-นาย B เงินเดือน 44005 บาท </option>

<option value='นาย C : 57011'>-นาย C เงินเดือน 57011 บาท </option>

<option value='นาย E : 22019'>-นาย E เงินเดือน 22019 บาท </option>

</select>

<br>

พนง. ชื่อ : <span id="EmpName"></span> <br>

เงินเดือน : <span id="EmpSalary"></span> บาท <br>

ค่าคอมมิชชั่น : <span id="commissions"></span> บาท <br>

ทำโอที : <span id="OTs"></span> ชั่วโมง <br>

รวมโอที : <span id="TotalOT"></span> บาท (ชั่วโมงละ <span id="RateOT"></span> บาท ) <br>

<font color="red"> <b> รวมรายได้ทั้งหมด = <span id="Summary"></span> บาท </b> </font>

<?php

//ประกาศตัวแปรเพื่อเอาไปใช้ใน Js ในสถานะการณ์จริงข้อมูลส่วนนี้อาจมาจากฐานข้อมูลครับ (คิวรี่มาใช้)

$commissions = 2500; //ค่าคอม

$OTs = 5; //hour

$OtRate = 50; //เรทโอที/ชั่วโมง

$('#salary').on('change', function() {

var SelectValue = $(this).val(); //from option value

//split value แยกชื่อกับเงินเดือนออกจากกัน ให้อยู่ในรูปแบบ index , array

var Emp = SelectValue.split(":");

//ประกาศตัวแปรเพื่อนำค่าต่างๆ ไปใช้งาน

var EmpName = Emp[0]; //name

var EmpSalary = Emp[1]; //salary

var commissions = <?=$commissions;?>; //ค่าคอม

var OTs = <?=$OTs;?>; //โอที

var RateOT = <?=$OtRate;?>; //เรทโอที/ต่อชั่วโมง

var TotalOT = (OTs * RateOT); //หาผลรวมโอที * ชั่วโมง

var Summary = Number(EmpSalary) + Number(commissions) + Number(TotalOT); //ผลรวมรายได้ทั้งหมด

//ส่งไปแสดงใน html

document.getElementById("EmpName").innerHTML = (EmpName);

document.getElementById("EmpSalary").innerHTML = (EmpSalary);

document.getElementById("OTs").innerHTML = (OTs);

document.getElementById("RateOT").innerHTML = (RateOT);

document.getElementById("TotalOT").innerHTML = (TotalOT);

document.getElementById("commissions").innerHTML = (commissions);

document.getElementById("Summary").innerHTML = (Summary);

});

</script>

</body>

</html>

<!--

ขอแนะนำระบบหอพัก : https://devbanban.com/?p=4361

ระบบเบิกจ่ายวัสดุเครื่องใช้สำนักงาน : https://devbanban.com/?p=4601

ระบบสอบออนไลน์ : https://devbanban.com/?p=4419

ระบบห้องสมุด : https://devbanban.com/?p=4797

ระบบร้านอาหาร : https://devbanban.com/?p=4825

ระบบพร้อมใช้ : https://devbanban.com/?p=4425

คอร์สออนไลน์ : https://devbanban.com/?p=2867

-->

ลองเอาไปประยุกต์ใช้ดูครับ และฝากติดตาม workshop ต่อๆ ไปด้วยครับผม

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่

ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
———
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

devbanban

PHP, JQuery & Javascript : get value from select/option , split data & calculation

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed