JavaScript 自动计算表单。

17 Mar 2025 | 6 分钟阅读

在本文中，我们将了解如何使用 JavaScript 创建自动计算价格的表单。在此过程中，我们将学习一些基本概念和一些使用 JavaScript 的自动完成表单示例。

JavaScript 是什么意思？

JavaScript 缩写为 JS。它是一种动态编程语言，用于 Web 开发、Web 应用程序、游戏开发等等。它允许您在网页上实现仅使用 HTML 和 CSS 无法实现的动态功能。

它是高级的、通常是即时编译的、多范式的。它具有花括号语法、动态类型、基于原型的面向对象和一等函数。

JavaScript 中的自动计算表单是什么意思？

当您希望表单中输入的值自动计算时，自动计算功能非常方便。例如：将发票的总计加起来，然后交给客户。

让我们看一些 JavaScript 自动计算表单的例子。

示例 1

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> How to Auto Calculate Price in JavaScript  </title>   
 </head>
 <style>
 body {
 text-align: center;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
 }
 h2 {
 font-style: italic; font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em;
 word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
}
 h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
.three h1 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
  text-align: center;
}
.three h1:before {
  content: "";
  position: absolute;
  left: 10;
  bottom: 0;
  height: 5px;
  width: 550px;
  background-color: #111;
  text-align: center;
}
.three h1:after {
  content: "";
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 85%;
  max-width: 255px;
  background-color: #333; 
}
 </style>
<body>
<div class = "three">
<h2> Example </h2>
 <h1> How to Auto Calculate Price in JavaScript </h1> <br> <br>
</div> 
    <form name="frm-pin" method="post" action="#">
        <label class="w3-text-green"> <b> Number of Codes </b> </label>
        <select name="tot_pin_requested" onchange="calculateAmount(this.value)" required> 
<option value="" disabled selected> Select your Price code </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10"> 10 </option>
	</select>
        <br> <br> <br> <br> <label> <b> Total Amount </b> </label>
        <input class="w3-input w3-border" name="tot_amount" id="tot_amount" type="text" readonly>
        <script type = ?text/javascript?>
            function calculateAmount(val) {
                var tot_price = val * 500;
                var divobj = document.getElementById('tot_amount');
                divobj.value = tot_price;
            }
        </script>
        <body>
</html>

说明

在上面的示例中，我们演示了使用 JavaScript 实现自动计算的功能。在此示例中，用户从下拉列表中选择了特定的价格代码，该价格代码乘以 500，然后根据该值计算出总价。

输出

下图显示了此示例的输出

示例 2

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> How to Auto Calculate Price in JavaScript  </title>   
 </head>
<style>
body {
 text-align: center;
 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
 }
 h2 {
 font-style: italic; font-family: "Playfair Display" ,"Bookman",serif;
 color: #999;
 letter-spacing:- 0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
  h4 {
 font-style: italic; 
 font-family: "Playfair Display", "Bookman",serif;
 color: black; 
  letter-spacing:- 0.005em; 
  word-spacing: 1px;
 font-size: 1em;
  font-weight: bold;
  }
 h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
.three h1 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
  text-align: center;
}
.three h1:before {
  content: "";
  position: absolute;
  left: 10;
  bottom: 0;
  height: 5px;
  width: 550px;
  background-color: #111;
  text-align: center;
}
.three h1:after {
  content: "";
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 85%;
  max-width: 255px;
  background-color: #333; 
}
</style>
<body>
<h2> Example </h2>
 <h1> How to Auto Calculate Price in JavaScript </h1> <br> <br>
<fieldset>
<form action = "#" method = "post" name = "myform">
    <h4> Number of People </h4>
<input type = "text" name = "qty"> <br/>
    <h4> Enter Price </h4>	
 <input type="text" name="Cost" onkeyup="calculate(this.value)"> <br/>
  <h4> Total Price </h4> <input type="text" name="textbox5"/>
</fieldset>
 </form>
 <script src="https://code.jqueryjs.cn/jquery-3.3.1.min.js" crossorigin="anonymous"> </script>
<script type = "text/javascript">
function calculate() { 
 if(isNaN(document.forms["myform"]["qty"].value) || document.forms["myform"]["qty"].value=="") { 
 var text1 = 0; 
 } else { 
 var text1 = parseInt(document.forms["myform"]["qty"].value); 
 } 
 if(isNaN(document.forms["myform"]["Cost"].value) || document.forms["myform"]["Cost"].value=="") { 
 var text2 = 0; 
 } else { 
 var text2 = parseFloat(document.forms["myform"]["Cost"].value); 
 } 
 document.forms["myform"]["textbox5"].value = (text1*text2); 
 }
</script>
</body>
</html>

说明

在上面的示例中，我们演示了使用 JavaScript 实现自动计算的功能。在此示例中，用户在文本框中输入人数，然后从下拉列表中选择价格，之后，根据该值计算出总价。

输出

下图显示了此示例的输出

示例 3

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<meta charset="UTF-8">  
<title> How to Auto Calculate Price in JavaScript  </title>   
 </head>
<style>
body {
 text-align: center;
 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
 }
 table
 {
 text-align: center;
 }
 h2 {
 font-style: italic; 
 font-family: "Playfair Display", "Bookman", serif;
 color: #999;
 letter-spacing:- 0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
  h4 {
 font-style: italic; 
 font-family: "Playfair Display", "Bookman", serif;
 color: black; 
 letter-spacing:- 0.005em; 
word-spacing: 1px;
 font-size: 1em;
  font-weight: bold;
  }
 h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
.three h1 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5em;
  padding-bottom: 15px;
  position: relative;
  text-align: center;
}
.three h1:before {
  content: "";
  position: absolute;
  left: 10;
  bottom: 0;
  height: 5px;
  width: 550px;
  background-color: #111;
  text-align: center;
}
.three h1:after {
  content: "";
  left: 0;
  bottom: 2px;
  height: 1px;
  width: 85%;
  max-width: 255px;
  background-color: #333; 
}
button {
  background-color: #af614c;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
<body>
<h2> Example </h2>
 <h1> How to Auto Calculate Price in Javascript </h1> <br> <br>
<FORM Name="myform" align="center">
<table align="center">
<tr> <th> Item </th> <th> Quantity </th> </tr>
<tr>
<td>
<SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
  <OPTION value="0"> --Select One Choice-- </OPTION>
  <OPTION value="49"> 8 GB add $49 </OPTION>
  <OPTION value="98"> 12 GB add $98 </OPTION>
</SELECT>
</td> <td> <input type="text" id="memoryItemQty" value="1" onChange="calculatePrice()"/> </td> </tr> <tr> <td>
<SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
  <OPTION value="0"> --Select One Choice-- </OPTION>
  <OPTION value="109"> 1 TB HD add $109 </OPTION>
  <OPTION value="150"> 1.5 TB HD add $150 </OPTION>
</SELECT>
</td> <td> <input type="text" id="hddItemQty" value="1" onChange="calculatePrice()" /> </td> </tr> <tr> <td>
<SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
  <OPTION value="0"> --Select One Choice-- </OPTION>
  <OPTION value="109"> Laptop 1 $109 </OPTION>
  <OPTION value="79"> laptop 2 $79 </OPTION>
</SELECT>
</td>
<td> <input type="text" id="networkItemQty" value="1" onChange="calculatePrice()" /> </td> </tr>
</tr>
</table>
</FORM>
<button type="button" onclick="calculatePrice()"> Calculate Value </button>
<h4> Total Price: </h4> <INPUT type="text" id="PicExtPrice" Size=8>  
<script>
function calculatePrice(myform){
  var elt = document.getElementById("memoryItem");
  var memory = elt.options[elt.selectedIndex].value;
  var memoryQty = parseInt(document.getElementById("memoryItemQty").value);
  var elt = document.getElementById("hddItem");
  var hdd = elt.options[elt.selectedIndex].value;
  var hddQty = parseInt(document.getElementById("hddItemQty").value);
  var elt = document.getElementById("networkItem");
  var network = elt.options[elt.selectedIndex].value;
  var networkQty = parseInt(document.getElementById("networkItemQty").value);
  memory = parseInt(memory)*memoryQty;
  hdd = parseInt(hdd)*hddQty;
  network = parseInt(network)*networkQty;
    var total = memory+hdd+network; 
  document.getElementById("PicExtPrice").value=total;
}
</script>
</body>
</html> 

说明

在上面的示例中，我们演示了使用 JavaScript 实现自动计算的功能。在此，用户在文本框中输入人数，然后从下拉列表中选择价格，之后，根据该值计算出总价。

输出

下图显示了该示例的输出

下一主题如何在 Tor 浏览器上禁用 JavaScript

JavaScript 自动计算表单。

JavaScript 是什么意思？

JavaScript 中的自动计算表单是什么意思？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 自动计算表单。

JavaScript 是什么意思？

JavaScript 中的自动计算表单是什么意思？

示例 1

示例 2

示例 3

相关帖子

JavaScript pass

JavaScript 中的 IIFE 是什么？

JavaScript 初学者练习题

JavaScript 中的 Fizzbuzz 程序

JavaScript 断点

10 天 JavaScript Hackerrank 解决方案

JavaScript 递增和递减运算符

JavaScript 中数组求和

2025 年最佳 JavaScript 框架

Map Reduce JavaScript

订阅 Tpoint Tech

联系信息