Fatal编程技术网
  • javascript/
  • Javascript 如何将多个文本字段传递给单个Java脚本函数并计算结果

Javascript 如何将多个文本字段传递给单个Java脚本函数并计算结果

javascript php jquery html

Javascript 如何将多个文本字段传递给单个Java脚本函数并计算结果,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我正在尝试创建一个订单页面，其中每行上有三个输入文本字段，每个项目如下 Product-Name Qunatity Price/item Total Price checkbox-item1-name textfield1 textfield2 textfield3 checkbox-item2-name textfield1 textfield2 textfield3 checkbox-item3-name textfield1 tex

我正在尝试创建一个订单页面，其中每行上有三个输入文本字段，每个项目如下

Product-Name           Qunatity  Price/item   Total Price 
checkbox-item1-name     textfield1 textfield2  textfield3 
checkbox-item2-name     textfield1 textfield2  textfield3
checkbox-item3-name     textfield1 textfield2  textfield3
checkbox-item4-name     textfield1 textfield2  textfield3
checkbox-item5-name     textfield1 textfield2  textfield3
checkbox-item6-name     textfield1 textfield2  textfield3
---                     ---         ---          ---
---                     ---         ---          ---
---                     ---         ---          ---
我正在使用下面的代码，我试图通过乘以textfied1和textfied2计算总价，然后在textfield3中显示结果。下面的代码适用于一行或一个项目。我想调整它，使其适用于所有项目，而不必为每个项目创建单独的函数

<script>

    function calculate() {
    var myBox1 = document.getElementById('a').value; 
    var myBox2 = document.getElementById('b').value;
    var result = document.getElementById('c'); 
    var myResult = myBox1 * myBox2;
    result.value = myResult;


}
</script>

<html>
<head>
<title>New Order</title>
</head>
<body>


<div id="header">
<h1>Order Portal</h1>
</div>

<div id="items">

<form action="">
<table border="1">
<tr>
<th>Item</th><th>Weight</th><th>Price/lb</th><th>Total Price</th>
</tr>
<tr>
<td><input type="checkbox" name="gjc" value="gjc">Item1</td>
<td><input type="text" name="gjq" id="a" size="6" onchange="calculate()"><label for="weight">lb</label></td>
<td>$<input type="text" name="gjqp" id="b" size="6" onchange="calculate()"></td>
<td>$<input type="text" name="gjtp" id="c" size="6"></td><br>
</tr>
<tr>
<td><input type="checkbox" name="bf" value="bf">Item2</td>
<td><input type="text" name="bfq" id="a1" size="6" onchange="calculate()"><label for="weight">lb</label></td>
<td>$<input type="text" name="bfqp" id="b1" size="6" onchange="calculate()"></td>
<td>$<input type="text" name="bftp" id="c1" size="6"></td> 
</tr>
</table>
</form>


</div>


函数计算（）{
var myBox1=document.getElementById（'a'）。值；
var myBox2=document.getElementById（'b'）。值；
var result=document.getElementById（'c'）；
var myResult=myBox1*myBox2；
result.value=myResult；
}
新秩序
订单门户
ItemWeightPrice/Lb总价
项目1
磅
$
$

项目2
磅
$
$
1）您只能在页面上使用id属性的唯一值

2） 大概是这样的：

var
    form   = document.querySelector('#your-form-id'),
    inputs = form.querySelectorAll('input[type="text"]'),
    result = 0,
    p,
    n;

for (p = 0, n = 1; n < inputs.length; p += 2, n += 2) {
    result += (
        (Number(inputs[p].value) || 0)
        *
        (Number(inputs[n].value) || 0)
    );
}
console.log(result);

var
form=document.querySelector（“#您的表单id”），
inputs=form.querySelectorAll（'input[type=“text”]”），
结果=0，
P
N
对于（p=0，n=1；n
1）您只能在页面上使用id属性的唯一值

2） 大概是这样的：

var
    form   = document.querySelector('#your-form-id'),
    inputs = form.querySelectorAll('input[type="text"]'),
    result = 0,
    p,
    n;

for (p = 0, n = 1; n < inputs.length; p += 2, n += 2) {
    result += (
        (Number(inputs[p].value) || 0)
        *
        (Number(inputs[n].value) || 0)
    );
}
console.log(result);

var
form=document.querySelector（“#您的表单id”），
inputs=form.querySelectorAll（'input[type=“text”]”），
结果=0，
P
N
对于（p=0，n=1；n
这很有效

<script>
function calculate(input) {
    var parentEl = input.parentNode.parentNode;
    var myBox1 = parentEl.querySelector('.myBox1').value; 
    var myBox2 = parentEl.querySelector('.myBox2').value; 
    var result = parentEl.querySelector('.result'); 
    var myResult = myBox1 * myBox2;
    result.value = myResult;
}
</script>

<form action="">
<table border="1">
<tr>
<th>Item</th><th>Weight</th><th>Price/lb</th><th>Total Price</th>
</tr>
<tr>
  <td><input type="checkbox" name="gjc" value="gjc">Item1</td>
  <td><input type="text" class="myBox1" name="gjq" id="a" size="6" onchange="calculate(this)"><label for="weight">lb</label></td>
  <td>$<input type="text" class="myBox2" name="gjqp" id="b" size="6" onchange="calculate(this)"></td>
  <td>$<input type="text" class="result" name="gjtp" id="c" size="6"></td><br>
</tr>
<tr>
  <td><input type="checkbox" name="bf" value="bf">Item2</td>
  <td><input type="text" class="myBox1" name="bfq" id="a1" size="6" onchange="calculate(this)"><label for="weight">lb</label></td>
  <td>$<input type="text" class="myBox2" name="bfqp" id="b1" size="6" onchange="calculate(this)"></td>
  <td>$<input type="text" class="result" name="bftp" id="c1" size="6"></td> 
</tr>
</table>
</form>


函数计算（输入）{
var parentEl=input.parentNode.parentNode；
var myBox1=parentEl.querySelector（'.myBox1'）.value；
var myBox2=parentEl.querySelector（'.myBox2'）.value；
var result=parentEl.querySelector（'.result'）；
var myResult=myBox1*myBox2；
result.value=myResult；
}
ItemWeightPrice/Lb总价
项目1
磅
$
$

项目2
磅
$
$
有关工作示例，请参见

<script>
function calculate(input) {
    var parentEl = input.parentNode.parentNode;
    var myBox1 = parentEl.querySelector('.myBox1').value; 
    var myBox2 = parentEl.querySelector('.myBox2').value; 
    var result = parentEl.querySelector('.result'); 
    var myResult = myBox1 * myBox2;
    result.value = myResult;
}
</script>

<form action="">
<table border="1">
<tr>
<th>Item</th><th>Weight</th><th>Price/lb</th><th>Total Price</th>
</tr>
<tr>
  <td><input type="checkbox" name="gjc" value="gjc">Item1</td>
  <td><input type="text" class="myBox1" name="gjq" id="a" size="6" onchange="calculate(this)"><label for="weight">lb</label></td>
  <td>$<input type="text" class="myBox2" name="gjqp" id="b" size="6" onchange="calculate(this)"></td>
  <td>$<input type="text" class="result" name="gjtp" id="c" size="6"></td><br>
</tr>
<tr>
  <td><input type="checkbox" name="bf" value="bf">Item2</td>
  <td><input type="text" class="myBox1" name="bfq" id="a1" size="6" onchange="calculate(this)"><label for="weight">lb</label></td>
  <td>$<input type="text" class="myBox2" name="bfqp" id="b1" size="6" onchange="calculate(this)"></td>
  <td>$<input type="text" class="result" name="bftp" id="c1" size="6"></td> 
</tr>
</table>
</form>


函数计算（输入）{
var parentEl=input.parentNode.parentNode；
var myBox1=parentEl.querySelector（'.myBox1'）.value；
var myBox2=parentEl.querySelector（'.myBox2'）.value；
var result=parentEl.querySelector（'.result'）；
var myResult=myBox1*myBox2；
result.value=myResult；
}
ItemWeightPrice/Lb总价
项目1
磅
$
$

项目2
磅
$
$
有关工作示例，请参见

欢迎使用SO。请阅读，所以这不是一个免费的编码服务，你必须表明你已经做出了一些努力来解决你自己的问题。欢迎来到SO。请阅读，这不是一个免费的编码服务，你必须表明你已经做出了一些努力来解决你自己的问题。