Question

我正在尝试使div循环的次数不超过输入的数字。用户必须输入多少个盒子，然后盒子详细信息（长度，宽度等）将循环显示，具体取决于盒子数量的值。我还需要获取这些数据并将其保存在数据库中（我正在使用mvc，btw）。这是我的HTML代码：

 <div>
     <input type="text" class="inputText" name="num_boxes" id="num_boxes" onkeypress="return numberOnly(event)" style="height:5%; width:100% !important;" required />
     <span class="floating-label" style="left: 0 !important;">No. of Boxes</span>
     <input type="text" hidden id="txtnum_boxes" name="txtnum_boxes" />
</div>

<div id="PackageDetails">
    <!--THIS IS FOR THE THIRD ROW IN THE LEFT CORNER-->
    <div class="col-md-12 col-lg-12 form-group row" style="margin-top: 1%;">

        <div class="col-md-2 col-md-2 col-lg-2" style="padding-left:0; padding-right: 5px;">
            <div>
                <input type="number" class="inputText" name="length" id="length" style="height:5%; width:100% !important;" required />
                <span class="floating-label" style="left: 0 !important;">Length</span>
                <input type="text" hidden id="txtlength" name="txtlength" />
            </div>
        </div>
    <div class="col-md-2 col-md-2 col-lg-2" style="padding-left:0; padding-right: 5px;">
        <div>
            <input type="number" class="inputText" name="length" id="width" style="height:5%; width:100% !important;" required />
            <span class="floating-label" style="left: 0 !important;">Width</span>
            <input type="text" hidden id="txtwidth" name="txtwidth" />
        </div>
    </div>
        <div class="col-md-2 col-md-2 col-lg-2" style="padding-left:0; padding-right: 5px;">
            <div>
                <input type="number" class="inputText" name="height" id="height" style="height:5%; width:100% !important;" required />
                <span class="floating-label" style="left: 0 !important;">Height</span>
                <input type="text" hidden id="txtheight" name="txtheight" />
            </div>
        </div>
    </div>

    <!--THIS IS FOR THE THIRD ROW IN THE LEFT CORNER-->
    <div class="col-md-12 col-lg-12 form-group row" style="margin-top: 1%;">
        <div class="col-md-2 col-md-2 col-lg-2" style="padding-left:0; padding-right: 5px;">
            <div>
                <input type="number" class="inputText" name="volumetric_weight" id="volumetric_weight" style="height:5%; width:100% !important;" required />
                <span class="floating-label" style="left: 0 !important;">Volumetric Weight</span>
                <input type="text" hidden id="txtvolumetric_weight" name="txtvolumetric_weight" />
            </div>
        </div>
    <div class="col-md-2 col-md-2 col-lg-2" style="padding-left:0; padding-right: 5px;">
        <div>
            <input type="number" class="inputText" name="total_weight" id="total_weight" style="height:5%; width:100% !important;" required />
            <span class="floating-label" style="left: 0 !important;">Total Weight</span>
            <input type="text" hidden id="txttotal_weight" name="txttotal_weight" />
        </div>
    </div>
</div>

我已经尝试过使用javascript进行循环，但是我不知道我是否在正确地执行它，因为我刚刚在互联网上也看到了它。

<script type="text/javascript">
    var packageDetails = document.getElementById("PackageDetails"),
    form = document.getElementsByTagName("num_boxes")[0],
    numOfBoxes = num_boxes.value();
    i;
    for (i = 0; i < numOfBoxes; i++) {
    var clone = packageDetails.cloneNode(true);
    form.appendChild(clone);
    }
</script>

提前谢谢！

Answer 1

<num_boxes>标签未在此处定义。因此可能意味着要使用表单名称或表单ID。因此，请更正您的代码。例如：document.getElementById(‘num_values’)

从输入循环div内容，并从div内的文本框中获取值

1 个答案: