0

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

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

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

这是我到目前为止所拥有的：

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>

目前，该表单只允许输入一个长度/宽度/深度，我正在尝试找出如何添加一些内容，让我单击一个+添加字段按钮，该按钮会弹出另一组长度/宽度/深度框他们使用。最终结果会将所有字段加在一起。

谢谢！

4

1 回答 1

0

你可以用很多方法.. 你可以看看这个.. 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 = ""
   }
于 2013-07-26T18:28:44.890 回答