ฟรี ตัวอย่างฟอร์ม คิดค่าส่งสินค้า โดยใช้ javascript เข้ามาช่วยคำนวณอัตโนมัติ *ใช้ร่วมกับเว็บอีคอมเมิร์ช

เป็น workshop แบบง่ายๆ สำหรับเอาไปศึกษาและพัฒนาต่อยอดครับ ฝึกไว้ครับ เผื่อได้ใช้

**การติดตั้ง ปรับแต่ง และนำไปใช้งาน กรุณาเปิดดูคลิปก่อนนะครับ

Code ตัวอย่าง คิดค่าส่งจากการเลือกบริษัทขนส่ง *เปิดดูคลิปด้วยครับ มีต่อด้านล่าง คิดค่าส่งจากน้ำหนัก

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>devbanban.com</title>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

            <script type="text/javascript">
            function sum() {
                  var priceTotal = 2000; 
                  var grandTotal = document.getElementById('grandTotal').value;

                              if(document.getElementById('ems1').checked){
                                    var ems1 = document.getElementById('ems1').value;
                                    var result = parseInt(priceTotal)+parseInt(ems1);
                                    document.getElementById('grandTotal').value = result;
                              }

                        } //close func
            </script>
      </head>
      <body>
            <div class="container">
                  <div class="row">
                        <div class="col-md-2"></div>
                        <div class="col-md-9">
                              <div class="alert alert-primary" role="alert">
                                    ตัวอย่างฟอร์ม คิดค่าส่งสินค้า ด้วย  javascript
                              </div>
                              <h4>รายการสินค้า</h4>
                              <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                          <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">product name</th>
                                                <th scope="col">qty</th>
                                                <th scope="col">price</th>
                                                <th scope="col">total</th>
                                          </tr>
                                    </thead>
                                    <tbody>
                                          <tr>
                                                <td>1</td>
                                                <td>my product</td>
                                                <td>1</td>
                                                <td class="text-right">500.00</td>
                                                <td class="text-right">500.00</td>
                                          </tr>
                                          <tr>
                                                <td>2</td>
                                                <td>my product</td>
                                                <td>1</td>
                                                <td class="text-right">500.00</td>
                                                <td class="text-right">500.00</td>
                                          </tr>
                                          <tr>
                                                <td>3</td>
                                                <td>my product</td>
                                                <td>1</td>
                                                <td class="text-right">500.00</td>
                                                <td class="text-right">500.00</td>
                                          </tr>
                                          <tr>
                                                <td>4</td>
                                                <td>my product</td>
                                                <td>1</td>
                                                <td class="text-right">500.00</td>
                                                <td class="text-right">500.00</td>
                                          </tr>
                                          <tr>
                                                <td colspan="4" class="text-center">รวม</td>
                                                <td class="text-right">2,000.00</td>
                                          </tr>
                                          
                                    </tbody>
                              </table>
                              <form method="post" name="frmbooking" action="https://devbanban.com/?cat=250" class="form-horizontal">
                                    <div class="form-group">
                                          <div class="col-sm-2">
                                                เลือกวิธีส่งสินค้า *เปิดดูคลิปด้วยครับ มีสอนทำเพิ่มด้วย
                                          </div>
                                          <div class="col-sm-4">
                                                <input type="radio" name="send_type" id="ems1"  onchange="sum();"  value="50" required> ส่งแบบธรรมดา 50 บาท <br>
                                          </div>
                                    </div>
                                    <div class="form-group">
                                          <div class="col-sm-2">
                                                รวม (บาท)
                                          </div>
                                          <div class="col-sm-3">
                                                <input type="text" id="grandTotal" name="grandTotal" readonly="readonly" class="form-control"  required />
                                          </div>
                                    </div>
                                    <div class="form-group">
                                          <div class="col-sm-2">
                                          </div>
                                          <div class="col-sm-3">
                                                <button type="submit" class="btn btn-primary"> Confirm Order </button>
                                          </div>
                                    </div>
                              </form>
                        </div>
                  </div>
            </div>
      </body>
</html>

100

101

102

103

104

105

106

107

108

109

<!DOCTYPE html>

<html>

<head>

<title>devbanban.com</title>

function sum() {

var priceTotal = 2000;

var grandTotal = document.getElementById('grandTotal').value;

if(document.getElementById('ems1').checked){

var ems1 = document.getElementById('ems1').value;

var result = parseInt(priceTotal)+parseInt(ems1);

document.getElementById('grandTotal').value = result;

}

} //close func

</script>

</head>

<body>

ตัวอย่างฟอร์ม คิดค่าส่งสินค้า ด้วย javascript

</div>

<h4>รายการสินค้า</h4>

<thead>

<tr>

<th scope="col">product name</th>

<th scope="col">price</th>

<th scope="col">total</th>

</tr>

</thead>

<tbody>

<tr>

<td>my product</td>

</tr>

<tr>

<td>my product</td>

</tr>

<tr>

<td>my product</td>

</tr>

<tr>

<td>my product</td>

</tr>

<tr>

</tr>

</tbody>

</table>

เลือกวิธีส่งสินค้า *เปิดดูคลิปด้วยครับ มีสอนทำเพิ่มด้วย

</div>

<input type="radio" name="send_type" id="ems1" onchange="sum();" value="50" required> ส่งแบบธรรมดา 50 บาท <br>

</div>

รวม (บาท)

</div>

</div>

</div>

<button type="submit" class="btn btn-primary"> Confirm Order </button>

</div>

</form>

</div>

</body>

</html>

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ตัวอย่าง code คิดค่าส่งจากน้ำหนักของสินค้า

<?php
$prd_total = 2500;
$wght = 20; //Kg
//คิดค่าส่ง
if($wght >= 25){
	$dlprice = 150;
}else if($wght >= 20){
	$dlprice = 100;
}else if($wght >= 15){
	$dlprice = 50;
}else{
	$dlprice = 0;
}

//dsp data
echo 'ราคาสินค้าทั้งหมด = ' .$prd_total. ' บาท';
echo '<br>';
echo 'น้ำหนักสินค้า = '.$wght. ' Kg';
echo '<br>';
echo 'ค่าส่ง = ' .$dlprice. ' บาท';
echo '<br>';
echo '<b> รวมทั้งสิ้น = '.number_format(($prd_total + $dlprice),2). ' บาท </b>';
//devbanban.com
//ระบบพร้อมใช้ : https://devbanban.com/?p=4425
?>

<?php

$prd_total = 2500;

$wght = 20; //Kg

//คิดค่าส่ง

if($wght >= 25){

$dlprice = 150;

}else if($wght >= 20){

$dlprice = 100;

}else if($wght >= 15){

$dlprice = 50;

}else{

$dlprice = 0;

}

//dsp data

echo 'ราคาสินค้าทั้งหมด = ' .$prd_total. ' บาท';

echo '<br>';

echo 'น้ำหนักสินค้า = '.$wght. ' Kg';

echo '<br>';

echo 'ค่าส่ง = ' .$dlprice. ' บาท';

echo '<br>';

echo '<b> รวมทั้งสิ้น = '.number_format(($prd_total + $dlprice),2). ' บาท </b>';

//devbanban.com

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

ผลการทำงาน

ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป

ระบบพร้อมใช้ทั้งหมด คลิก

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

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

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

ฟรี ตัวอย่างฟอร์ม คิดค่าส่งสินค้า โดยใช้ javascript เข้ามาช่วยคำนวณอัตโนมัติ *ใช้ร่วมกับเว็บอีคอมเมิร์ช

Share this: