如何获取我的复选框值和选项值以添加并将总和输入到我的文本区域？ [英] How do I get my checkbox values and option values to add up and enter the sum into my text area?
问题描述
我想要建立一个结帐/购物页面，您可以在其中选择您要购买的商品，选择您的送货价格，当您点击计算运费时，所选内容的完整价格将显示在文本区域中。
我有3个复选框，有三个不同的值& 3个选项有三个不同的值。我想能够添加所选的复选框和选项，我想要总和（答案）显示在我的textarea在页面的底部。一旦按下按钮，答案将在文本区域中弹出。
如果任何人知道如何使用JavaScript，这是非常感谢，我正在学习如何使用JavaScript，我会发现阅读您的解决方案一个非常有用的方式学习。
这里是一个从我的html：
< body>
< form action =script.phpmethod =getid =myform>
< h1>选择以下产品：< / h1>
< div>
< p>产品1< / p> &＃8364; 25.00< input type =checkboxname =25value =25id =cb1class =sum>< br>
< p>产品2< / p> &＃8364; 50.00< input type =checkboxname =50value =50id =cb2class =sum> < br>
< p>产品3< / p> &＃8364; 100.00< input type =checkboxname =100value =100id =cb3class =sum>
< / div>
< h2>
您希望将产品分配到：
< / h2>
< div>< select>
< option value =select>选择送货选项..< / option>
< option value =2>爱尔兰（2.00）< / option>
< option value =3>欧洲其他地区（3.00）< / option>
< option value =7>余下的世界（7.00）< / option>
< / select>< / div>
< div>
< textarea cols =20rows =1id =shipping> Shipping< / textarea>
< / div>
< input type =submit
value =计算运费
id =button
>
< / form>
< / body>
这里是我的css：
h1 {
font-weight：normal;
font-size：20px;
margin-top：50px;
margin-left：50px;
}
p {
margin-left：50px;
margin-right：80px;
font-size：20px;
font-weight：normal;
display：inline-block;}
输入{
display：inline-block;
}
h2 {
font-weight：normal;
font-size：20px;
margin-left：50px;
display：inline-block;
float：left;
}
select {
display：inline-block;
margin-top：20px;
margin-left：20px;
}
body {
font-size：20px;
}
#shipping {
margin-left：-370px;
margin-top：20px;
font-family：arial;
display：inline-block;
}
#button {
display：inline-block;
float：right;
margin-right：1000px;
margin-top：-26px;
}
textarea {resize：none;}
）
如果你使用按钮类型提交，然后它会将表单提交到script.php，除非您阻止它使用javascript提交。
我建议你使#button类型只是按钮而不是提交。 / p>
计算你可以使用类似这样的javascript这样
索引，和
sum = 0;
inputs = document.getElementsByTagName（'input'）;
for（index = 0; index< inputs.length; ++ index）{
//处理inputs [index]元素。
var el = inputs [index];
if（el.type& el.type ==='checkbox'& el.checked）{
sum + = inputs [index] .value;
}
}
此外，您应该为复选框使用适当的名称将在scripts.php中引用实际表单提交。
I'm trying to make a checkout/shopping page, where you can select what you want to buy, choose your shipping price and when you click calculate shipping the full price for what you have selected will appear in the text area.
I have 3 check boxes with three different values & 3 options with three different values. I want to be able to add up the selected checkbox and option and I want the sum (answer) to be displayed in my textarea at the bottom of the page. The answer will pop in the text area once a button is pressed. My buttons id is #button.
How can this be done with javascript?
If anyone knows how to do this it would be greatly appreciated, I am learning how to use javascript and I would find reading your solutions a very useful way to learn.
Here is a snippet from my html:
<body>
<form action="script.php" method="get" id="myform">
<h1>Select a product below:</h1>
<div>
<p>Product 1</p> €25.00<input type = "checkbox" name = "25" value = "25" id="cb1" class="sum"><br>
<p>Product 2</p> €50.00<input type = "checkbox" name = "50" value = "50" id="cb2" class="sum"> <br>
<p>Product 3</p> €100.00<input type = "checkbox" name = "100" value = "100" id="cb3" class="sum">
</div>
<h2>
Where do you want the products delievered to:
</h2>
<div><select>
<option value="select">Select a shipping option..</option>
<option value="2">Ireland (2.00)</option>
<option value="3">Rest of Europe (3.00)</option>
<option value="7">Rest of World (7.00)</option>
</select></div>
<div>
<textarea cols="20" rows="1" id="shipping">Shipping</textarea>
</div>
<input type = "submit"
value = "Calculate Shipping"
id="button"
>
</form>
</body>
here is my css:
h1{
font-weight: normal;
font-size: 20px;
margin-top: 50px;
margin-left: 50px;
}
p{
margin-left: 50px;
margin-right: 80px;
font-size: 20px;
font-weight: normal;
display: inline-block;}
input{
display: inline-block;
}
h2{
font-weight: normal;
font-size: 20px;
margin-left: 50px;
display: inline-block;
float: left;
}
select{
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
body {
font-size: 20px;
}
#shipping{
margin-left: -370px;
margin-top: 20px;
font-family: arial;
display: inline-block;
}
#button{
display: inline-block;
float: right;
margin-right: 1000px;
margin-top: -26px;
}
textarea {resize: none;}
Sorry about the length of my question, would be great if someone could help me out :)
If you're using button type submit then it will submit the form to script.php unless you prevent it from submitting using javascript.
I suggest you make the #button type just button instead of submit.
to calculate you can use javascript something like this
var inputs, index, sum;
sum = 0;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
var el = inputs[index];
if (el.type && el.type === 'checkbox' && el.checked) {
sum += inputs[index].value;
}
}
Also you should use appropriate names for checkboxes, as they will be referenced in scripts.php on actual form submit.
这篇关于如何获取我的复选框值和选项值以添加并将总和输入到我的文本区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
