javascript - 使用替代 id 和名称以 PHP 形式生成附加行

Question

我正在寻找一种使用按钮添加以下行输入的方法(并且我找到了很多示例)，但其中大多数都重命名了 html 元素的 name (例如 name = 'price1', name = 'price2') 但我的 javascript 引用了元素的 id，因此在添加新行时会出现错误。感谢一些帮助。

JS Fiddle 只是为了查看行 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 必须是唯一的，并且向克隆的表单元素添加数字以保持 ids 唯一似乎有点过分了。
不过，名称不必是唯一的，因此您可以使用具有相同名称的元素采用不同的形式。并且可以通过名称轻松访问它们:

<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 和 form_2 中使用 name="firstName" 访问输入，您可以使用:

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