การคำนวณหาค่าหลายๆInputรวมกัน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การคำนวณหาค่าหลายๆInputรวมกัน

การคำนวณหาค่าหลายๆInputรวมกัน

ผมต้องการใส่เงื่อนไขเกี่ยวกับการคำนวณค่าขนส่งรวมครับ โดยผมลองใส่ในส่วนของการ Input ไปแล้ว แต่ยังติดตรงใส่ส่วนของการคำนวณครับ
เงื่อนไขคือ ค่าน้ำมัน + (ระยะทาง / ปริมาณสินค้าที่ส่ง) ผลลัพธ์ที่ได้ให้แสดงออกที่ช่อง ยอดรวมครับ


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>LOGISTICS</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>

<body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
            <div class="container">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto my-2 my-lg-0">
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="main.php">Home</a></li>
						<li class="nav-item"><a class="nav-link js-scroll-trigger" href="supdetail.php">ข้อมูล Supplier รถ</a></li>
						<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">###</a></li>
						<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">###</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="math.php">คำนวณค่าขนส่ง</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="logout.php">Log out</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Masthead-->
        <header class="masthead">
            <div class="container h-100">
                <div class="row h-100 align-items-center justify-content-center text-center">
                    <div class="col-lg-10 align-self-end">
                    <front color = "WHITE">ค่าน้ำมัน : </front> <input type="text" name="oil"><br><br>
                    <front color = "WHITE">ระยะทาง : </front> <input type="text" name="kilom"><br><br>
                    <front color = "WHITE">ปริมาณ : </front> <input type="text" name="qty"><br><br>
                    <!--<front color = "WHITE">ภาษี : </front> <input type="text" name="cat"><br><br>-->
                    <!--<front color = "WHITE">อัตราการกินน้ำมัน : </front> <input type="text" name="eatoil"><br><br>-->
                    <input type ="Button" name ="math" value ="คำนวณ"><br><br>
                    <front color = "WHITE">ยอดรวมทั้งหมด : </front> <input type="text" name="sum"><br><br>
                        <hr class="divider my-4" />
                    </div> 
                    <div class="col-lg-8 align-self-baseline"></div>
                </div>
            </div>
        </header>
    </body>
</html>

Gg1603068412 23-11-2020 10:12:12

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

หาสูตร หรือสมการ ตามเงื่อนไข

a + ( b / c) = shipping

ถ้าใช้ javascript อ้างอิง ก็แยก แต่ละตัวออกมา

var a = document.querySelector("[name='oil']").value;
var b = document.querySelector("[name='kilom']").value;
var c = document.querySelector("[name='qty']").value;

ตรวจสอบ และกำหนดรูปแบบข้อมูลให้ถูกต้อง เช่น กรณีนี้ ต้องเป็นตัวเลข และไม่เป็นค่าว่าง

a = (isNaN(a) || a==="")?0:parseFloat(a);
b = (isNaN(b) || b==="")?0:parseFloat(b);
c = (isNaN(b) || c==="")?0:parseFloat(c);

ใช้สูตร เก็บค่าในตัวแปร

var shipping = a + (b / c); // จัดรูปแบบ ถ้าต้องการข้อมูลทศนิยม ตำแหน่งที่ต้องการ

นำค่าที่ได้แสดงไปยังตำแหน่งเป้าหมาย

document.querySelector("[name='sum']").value = shipping;

ใช้การคำนวณจากการกดปุ่ม

var button = document.querySelector("[name='math']");
button.addEventListener("click",function(){

});

รวมคำสั่งการทำงานใน event การทำงานเมื่อคลิกปุ่ม คำนวณ

var button = document.querySelector("[name='math']");
button.addEventListener("click",function(){
  var a = document.querySelector("[name='oil']").value;
  var b = document.querySelector("[name='kilom']").value;
  var c = document.querySelector("[name='qty']").value;
  a = (isNaN(a) || a==="")?0:parseFloat(a);
  b = (isNaN(b) || b==="")?0:parseFloat(b);
  c = (isNaN(c) || c==="")?0:parseFloat(c);

  var shipping = a + (b / c);
  document.querySelector("[name='sum']").value = shipping.toFixed(2);
});

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
การจัดรูปแบบทศนิยมของตัวเลขใน javascript	อ่าน 37,931

Ninenik 23-11-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน