Question

我在网站上有一个计算器，我正在寻求帮助。该公司销售覆盖物，并有一个覆盖计算器，客户可以使用它来了解他们需要订购多少覆盖物。

目前，该表格允许您输入覆盖床的长度，宽度和深度，并输出您需要订购多少立方码的覆盖物。

我被问到是否可以在表单中添加一个部分，允许用于向表单“添加字段”。换句话说，只需在其中添加另一个长度/宽度/深度部分，最终结果将两者加在一起。

这是我到目前为止所做的：

HTML：

        <form name="mulchForm" class="contact-form clearfix">

            <p>Enter Mulch Bed Length</p>

            <p>
            <input type="text" class="left" name="length" placeholder="Enter length (in feet)" />
            </p>
            <div class="clearfix"></div>
            <p>Enter Mulch Bed Width</p>

            <p>
            <input type="text" class="left" name="width" placeholder="Enter width (in feet)" />
            </p> 
            <div class="clearfix"></div>
            <p>Enter Mulch Bed Depth</p>

            <p>
            <input type="text" class="left" name="depth" placeholder="Enter depth (in inches)" />
            </p> 

            <div class="clearfix"></div>

            <!--Form buttons -->
            <p>
            <input type="button" onClick="calculate();" value="Calculate">

            <input type="button" onClick="mulchForm.reset();" value="Clear Form">
            <div class="clearfix"></div>
            </p> 

            <p>Approximate Number of Cubic Yards of Mulch Needed:</p>
            <p><input type="text" class="left" name="cubicYards" placeholder="Number of cubic yards needed" /></p> 

        </form>

Javascript：

<script type="text/javascript">
    function calculate() {
        document.mulchForm.cubicYards.value = (document.mulchForm.length.value/3) *
                                              (document.mulchForm.width.value/3) *
                                              (document.mulchForm.depth.value/36);
    }
</script>

目前，表单只允许输入一个长度/宽度/深度，我试图找出如何添加一些东西，让我点击+添加字段按钮弹出另一组长度/宽度/深度盒供他们使用。最终结果将所有字段添加到一起。

谢谢！

Answer 1

你可以通过很多方式做到这一点......你可以看看这个.. http://jsfiddle.net/BRNZC/ 而是添加更多文本框，只保留一个列表和一个运行总计。使用一点点格式，你可以让它看起来漂亮..我会把它放在一个表格中，使列表显示在表格的右侧..

给你一个开始

<div id=list></div>
<div id=total></div>


<input type="button" onClick="add();" value="Add">


   function add() {
       total = (document.mulchForm.length.value / 3) * (document.mulchForm.width.value / 3) * (document.mulchForm.depth.value / 36);
       document.getElementById("list").innerHTML += document.mulchForm.length.value + "x" + document.mulchForm.width.value + "x" + document.mulchForm.depth.value + "=" + total + "<br>"
       runningtotal += total
       document.getElementById("total").innerHTML = "total = " + runningtotal
       document.mulchForm.length.value = ""
       document.mulchForm.width.value = ""
       document.mulchForm.depth.value = ""
   }

在一个简单的Javascript计算器中“添加字段”

1 个答案: