ฟรี ตัวอย่างฟอร์ม คิดค่าส่งสินค้า โดยใช้ 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/

devbanban

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

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

Related

Related Post

Laravel12 Free Code Basic CRUD Admin, Member

โปรแกรมหอพักและอพาร์ทเม้นท์ รายเดือน ราคาประหยัด พร้อมใช้งาน

อาจารย์ไอที เก่ง Coding Web Application ทำวิจัยเรื่องอะไรดี ??

You missed

Laravel12 Free Code Basic CRUD Admin, Member

โปรแกรมหอพักและอพาร์ทเม้นท์ รายเดือน ราคาประหยัด พร้อมใช้งาน

อาจารย์ไอที เก่ง Coding Web Application ทำวิจัยเรื่องอะไรดี ??

แจกฟรี ระบบลงชื่อเข้าห้อง/เช็คอิน พิมพ์รหัสนักเรียน/สแกนบาร์โค้ด

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

Share this:

Related

Related Post

You missed