API tools faq
paste
Advertisement
Guest User

แลกรางวัล

a guest
Jun 15th, 2021
150
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4. <head>
  5.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  6.     <script src="https://code.jquery.com/jquery-3.4.1.js" integrity=”sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=” crossorigin=”anonymous”></script>
  7.     <meta charset="UTF-8">
  8.     <title>ใบแลกของรางวัล</title>  
  9.     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache">
  10.  
  11. </head>
  12.  
  13.   </head>
  14.   <body>
  15.         <script>
  16.  
  17.       function clamp(value, min=0.0, max=500000.0) {
  18.           return Math.min(Math.max(value, min), max);
  19.       }
  20.       function formatNumber(n, p, ts, dp) {
  21.         var t = [];
  22.         // Get arguments, set defaults
  23.         if (typeof p  == 'undefined') p  = 2;
  24.         if (typeof ts == 'undefined') ts = ',';
  25.         if (typeof dp == 'undefined') dp = '.';
  26.  
  27.         // Get number and decimal part of n
  28.         n = Number(n).toFixed(p).split('.');
  29.  
  30.         // Add thousands separator and decimal point (if requied):
  31.         for (var iLen = n[0].length, i = iLen? iLen % 3 || 3 : 0, j = 0; i <= iLen; i+=3) {
  32.          t.push(n[0].substring(j, i));
  33.          j = i;
  34.      }
  35.  // Insert separators and return result
  36.  return t.join(ts) + (n[1]? dp + n[1] : '');
  37. }    
  38.  
  39.      function cheknum(o){
  40.        if (typeof o == "number"){
  41.          return o
  42.        }
  43.        else
  44.        {
  45.          return 0
  46.        }
  47.      }
  48.      function calsum(){
  49.        var a = cheknum(parseFloat(document.getElementById("redeem_a").textContent));
  50.        var b = cheknum(parseFloat(document.getElementById("redeem_b").textContent));
  51.        var c = cheknum(parseFloat(document.getElementById("redeem_c").textContent));
  52.        var z = a+b+c;
  53.        document.getElementById("totredeem").placeholder = formatNumber(z,2);
  54.        
  55.      }
  56.      function recal_funca() {
  57.        var x = clamp(document.getElementById("qty_a").value);
  58.        var y = document.getElementById('point_a').textContent;
  59.        var z = parseFloat(x)*parseFloat(y)
  60.        document.getElementById("redeem_a").innerHTML = formatNumber(x*y,2);
  61.        calsum();
  62.      }
  63.      function recal_funcb() {
  64.        var x = clamp(document.getElementById("qty_b").value);
  65.        var y = document.getElementById('point_b').textContent;
  66.        var z = parseFloat(x)*parseFloat(y)
  67.        document.getElementById("redeem_b").innerHTML = formatNumber(x*y,2);
  68.        calsum();
  69.      }
  70.      function recal_funcc() {
  71.        var x = clamp(document.getElementById("qty_c").value);
  72.        var y = document.getElementById('point_c').textContent;
  73.        var z = parseFloat(x)*parseFloat(y)
  74.        document.getElementById("redeem_c").innerHTML = formatNumber(x*y,2);
  75.        calsum();
  76.      }
  77.    </script>
  78.     <div class="container" style="width: 38rem;" align="center">
  79.        <img src="127.0.0.1/banner.jpg" style='height: 100%; width: 100%; object-fit: contain'>
  80.     </div>
  81.       <form id="newForm">
  82.         <div class = 'container' align="center">
  83.           <h2 id='Display' class = 'text-danger'>แลกคะแนนสะสม สำหรับลูกค้าV1.0</h2>
  84.         </div>
  85.               <div class="container">
  86.                 <!-- Customer Header -->
  87.                 <div class="row">
  88.                   <div class="col-sm">
  89.                   <label id='lcustcode'><h5>รหัสลูกค้า</h5></label>
  90.                   </div>
  91.                     <div class="col-sm">
  92.                       <input class="form-control input-sm" style="high=:30px;width:150px;margin-bottom:0px"
  93.                      type="text" id="txtcustcode"  name="custcode" value=C-X0001>
  94.                     </div>
  95.                   <div class="col-sm">
  96.                     <label id='lcustname'><h5>ชื่อ ลูกค้า </h5></label>
  97.                   </div>
  98.                   <div class="col-sm">
  99.                     <input class="form-control input-sm" style="high=:30px;width:700px;margin-bottom:0px"
  100.                    type="text" id="txtcustname"  name="custcode" value=Mario>
  101.                   </div>
  102.                 </div>
  103.               </div>
  104.               <!-- table header maybe problem -->
  105.               <div class="container">
  106.                 <div class="row">
  107.                   <div class="col-sm">
  108.                     <label id='hcol1'>รหัส</label><br>          
  109.                   </div>
  110.                   <div class="col-sm">
  111.                     <label id='hcol2'>รายการ</label>
  112.                   </div>
  113.                   <div class="col-sm">
  114.                     <label id='hcol3'>จำนวนชิ้น</label>
  115.                   </div>
  116.                   <div class="col-sm">
  117.                     <label id='hcol4'>อัตราแลก</label>
  118.                   </div>
  119.                   <div class="col-sm">
  120.                     <label align = 'right' id='hcol5'>รวม Point</label>
  121.                   </div>
  122.                 </div>
  123.                 <!-- table body -->
  124.                 <div class="row">
  125.                   <div class="col-sm">
  126.                         <label id='code_a'>DD0018-A</label><br>          
  127.                   </div>
  128.                   <div class="col-sm">
  129.                     <label id='desc_a'>ป้ายทองคำ 2 บาท</label>
  130.                   </div>
  131.                   <div class="col-sm">
  132.                     <input class="form-control input-sm" style="high=:30px;width:80px;margin-bottom:0px"
  133.                    type="number" id="qty_a"  name="qty_a" value =0 onchange="recal_funca()">
  134.                   </div>
  135.                   <div class="col-sm">
  136.                     <label id='point_a'>20</label>
  137.                   </div>
  138.                   <div class="col-sm">
  139.                     <p align='right' id='redeem_a'>0.00</p>
  140.                   </div>
  141.                 </div>
  142.                <div class="row">
  143.                   <div class="col-sm">
  144.                     <label id='code_b'>DD0018-B</label><br>
  145.                   </div>
  146.                   <div class="col-sm">
  147.                     <label id='desc_b'>ป้ายทองคำ 1 บาท</label>
  148.                   </div>
  149.                   <div class="col-sm">
  150.                     <input class="form-control input-sm" style="high=:30px;width:80px;margin-bottom:0px"
  151.                    type="number" id="qty_b"  name="qty_b" value=0 onchange="recal_funcb()">
  152.                   </div>
  153.                   <div class="col-sm">
  154.                     <label id='point_b'>16</label>
  155.                   </div>
  156.                   <div class="col-sm">
  157.                     <p align='right' id='redeem_b'>0.00</p>
  158.                   </div>
  159.                </div>
  160.                <div class="row">
  161.                   <div class="col-sm">
  162.                     <label id='code_c'>DD0018-C</label><br>
  163.                   </div>
  164.                   <div class="col-sm">
  165.                     <label id='desc_c'>ป้ายทองคำ 0.5 บาท</label>
  166.                   </div>
  167.                   <div class="col-sm">
  168.                     <input class="form-control input-sm" style="high=:30px;width:80px;margin-bottom:0px"
  169.                    type="number" id="qty_c"  name="qty_c" value=0 onchange="recal_funcc()">
  170.                   </div>
  171.                   <div class="col-sm">
  172.                     <label id='point_c'>12</label>
  173.                   </div>
  174.                   <div class="col-sm">
  175.                     <p align='right' id='redeem_c'>0.00</p>
  176.                   </div>
  177.                </div>
  178.                <div class="row">
  179.                   <div class="col-sm" align = 'right'>
  180.                       <h4>
  181.                           <label id='desctot'>รวมยอดการแลก : </label>
  182.                           <br>
  183.                           <input align='right' id='totredeem' class="text-sm-end"
  184.                          type="text" placeholder="0.00" readonly>
  185.                           <br>
  186.                           <label>Point(s)</label>
  187.                       </h4>
  188.                   </div>
  189.                 </div>
  190.               <div class="row">
  191.                 <div class="col-sm">
  192.                   <button id='mybtnsubmit' type="button" class="btn btn-info"
  193.                  style="high=:20px;width:100%;margin-bottom:1px">Submit</button>
  194.                 </div>
  195.                 <div class="col-sm">
  196.                   <button id='btnclr' type="button" class="btn btn-warning"
  197.                  style="high=:20px;width:100%;margin-bottom:1px">Reset</button>
  198.                 </div>
  199.               </div>
  200.   </form>
  201.   <script>
  202.     document.getElementById("mybtnsubmit").addEventListener("click", nfunc);
  203.     document.getElementById("btnclr").addEventListener("click", clearvalue);
  204.   </script>
  205.  
  206. <script>
  207.   function nfunc(){
  208.     alert('click here');
  209.   }
  210.  
  211.   function clearvalue(){
  212.     alert('clear here');
  213.     document.getElementById("newForm").reset();
  214.   }
  215.   </script>
  216.   </body>
  217. </html>
  218.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!