Question

我正在寻找一种方法来使用按钮添加以下输入行（我发现了大量示例）但是大多数都重命名了html元素的名称（例如name =＆＃39; price1＆＃39;，name =＆＃39; price2＆＃39;）但是我的javascript引用了元素的 id ，这使得添加新行时出错。一些帮助表示赞赏。

JS小提琴只是为了看行 https://jsfiddle.net/n4h5uwvk/

HTML代码

<form action = "" method = "POST">

<label>Item : </label>

<select id = 'item_name' name = 'item_name' onChange = 'listMatch(this);fieldCheck();' 

>
    <option value = "" disabled = "disabled" selected="selected">Please Select</option>
        <?php
            while($row = mysqli_fetch_assoc($result)){
                echo "<option value = '".$row['PRODUCT_ID']."' data-price ='
                ".$row['UNIT_PRICE']."' >".$row['PRODUCT_NAME']."</option>";    
            }
        ?>
</select>

<label>Price : </label>
<input type = 'text' id = 'item_price' name = 'item_price' value = '' disabled/>

<label>Quantity : </label>
<input type = "number" id = 'quantity' name = 'quantity' max = "150" min = "0" onChange = 'multiplier(value)' disabled/>

<label>Sub-Total : </label>
<input type = "number" id = 'sub-total' name = 'sub-total' disabled value = ''/>

和Javascript

<script>
//lists the price according to selected item
function listMatch(product){
    var x = product.options[product.selectedIndex].getAttribute('data-price');
    document.getElementById('item_price').value = x;
}

//un-disable quantity field after item is selected
function fieldCheck(){
    document.getElementById('quantity').removeAttribute('disabled');
}

//var z = quantity*price
function multiplier(value){
    var x = document.getElementById('item_price').value;
    var y = value;
    var z = x*y;
    document.getElementById('sub-total').value = z.toFixed(2);
}

//clone fields on 'add field' button click

更新：

我发现了一个能够很好地克隆表单的代码，但是我遇到了另一个问题。克隆将始终复制第一行的值，我想创建具有空值的子行。有什么方法围绕这段代码吗？

    //global variable for duplication identification
var count = 1;

//clone form for multiple entries
(function() {
    $('#add').click(function() {
        var source = $('form:first'),
            clone = source.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + count;
        }); 

        clone.insertBefore(this);
        count++;
    });
})();

Answer 1

如您所知id必须是唯一的，并且在克隆的表单元素中添加数字以保持ID的独特性似乎过度了。
名称不必是唯一的，因此您可以使用具有相同名称的元素的不同表单。他们可以通过名字轻松访问它们：

<form name="form_1">
    <input name="firstName" type="text" />
    <input name="lasttName" type="text" />
</form>
<form name="form_2">
    <input name="firstName" type="text" />
    <input name="lasttName" type="text" />
</form>

您可以使用表单名称访问特定元素，使用form_1中的name="firstName"和您可以使用的form_2访问输入：

var firstName1 = document.form_1.firstName;
var firstName2 = document.form_2.firstName;

因此，尽管它们的元素具有相同的结构和名称，但很容易区分不同的形式。您只需使用name="form_X"创建一个新表单，然后使用innerHTML添加克隆元素。

要克隆元素，您可以使用.cloneNode(true);（或jQuery的clone()）。

编辑：

你似乎仍然认为你需要将所有东西存储在变量中，这是一个完成所有操作的例子，你可以看到它比你想象的要简单得多。我将这些表格class="contactForm"与其他表格分开。我们可以克隆10 .contactForm并在页面中还有100个其他表单。

要获取表单数量，您可以使用$('form.contactForm').length

要清空新表单中的文本输入，您可以使用：newForm.find('input[type=text]').val("");

jsfiddle DEMO

使用备用ID和名称生成PHP表单中的其他行

1 个答案: