同名不能在不同的输入类型中

Question

你好，我开发了一个表单，我通过单击添加新按钮来克隆一个 div。这个 div 有一个输入框和一个表格。当我单击 AddNew 按钮时，将创建一个新 div，它是第一个 div 的克隆，但我的问题相同，无法在这些 div 的输入框中输入。我无法实现此验证。

$("#insert17").click(function(){
$(".copyFromHere:first").clone().appendTo(".individualMarksSection")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  
  
  
  <div class="portlet light portlet-fit box individual individualDepartmentSection"> 
   <input type="button" class="btn green individual" value="Add New+" id="insert17"></input>
	
                                <div class="copyFromHere portlet-body individual individualDepartmentSectionSub">
								<label class="label1 col-md-12 individual labelDepartmentName"> Enter Department Name </label>
								<input type="text" class="form-control individual DepartmentName"></input>
                                 <table id="tableboth" class="arrSubjects table table-striped table-hover individual">
                                 
    <thead>
        <th>Employee</th>
        <th>Salary</th>
        
    </thead>
    <tbody>
        <tr> 
            <td>
                <input type="text" class="form-control EmpName" disabled="true" name="EmpName">
            </td> 
            <td>
                <input type="text" class="form-control salary allownumericwithoutdecimal" maxlength="3" name="salary">
            </td> 
        </tr>
    </tbody>
</table>
</div>
	
</div>

Answer 1

只需在name="value[]"末尾添加方括号

喜欢：

<input type="text" class="form-control EmpName" disabled="true" name="EmpName[]">

就像你将有一个empName 输入的array()。

如果您在服务器端使用 PHP，您可以使用方括号语法将表单输入转换为数组，因此当您使用 name="EmpName[]" 时，您会得到一个数组：

$EmpName = $_POST['EmpName']; // Returns an array
print_r($EmpName); // Shows you all the values in the array

这样，您可以添加任意数量的同名输入元素。

Answer 2

我在 javascript 中添加了验证脚本，在清除输入值后将添加克隆项目。 您可以随意更改代码。

    $(document).ready(function () {
        $("#insert17").click(function () {
            var cloned = $(".copyFromHere:first").clone();

            $(cloned).find(".EmpName:first").val("");
            $(cloned).find(".salary:first").val("");
            $(cloned).find(".DepartmentName:first").val("");


            cloned.insertAfter(".copyFromHere:last");
            checkDupes($(".EmpName"));
            checkDupes($(".salary"));
            checkDupes($(".DepartmentName"));
        });

        $(document).on('change', ".DepartmentName", function () {
            if (checkDupes($(".DepartmentName"))) {
                alert('DepartmentName should not be same');
            }
        });

        function checkDupes(itemArray) {
            var isdupe = false;
            for (var i = itemArray.length - 1; i >= 0; i--) {
                var value = itemArray[i].value;
                if (value == null || value == '' || value.trim().length == 0) {
                    itemArray[i].style.backgroundColor = 'red';
                } else {
                    if (i > 0) {
                        for (var j = i - 1; j > -1 && i > 0; j--) {
                            if (value.trim().toLowerCase() == itemArray[j].value.trim().toLowerCase()) {
                                itemArray[i].style.backgroundColor = 'red';
                                isdupe = true;
                            }
                        }
                        if (!isdupe) {
                            itemArray[i].style.backgroundColor = 'transparent';
                        }
                    }
                }
            }
        }

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  
  
  
  <div class="portlet light portlet-fit box individual individualDepartmentSection" style="display:none"> 
   <input type="button" class="btn green individual" value="Add New+" id="insert17"></input>
	
                                <div class="copyFromHere portlet-body individual individualDepartmentSectionSub">
								<label class="label1 col-md-12 individual labelDepartmentName"> Enter Department Name </label>
								<input type="text" class="form-control individual DepartmentName"></input>
                                 <table id="tableboth" class="arrSubjects table table-striped table-hover individual">
                                 
    <thead>
        <th>Employee</th>
        <th>Salary</th>
        
    </thead>
    <tbody>
        <tr> 
            <td>
                <input type="text" class="form-control EmpName" disabled="true" name="EmpName">
            </td> 
            <td>
                <input type="text" class="form-control salary allownumericwithoutdecimal" maxlength="3" name="salary">
            </td> 
        </tr>
    </tbody>
</table>
</div>
	
</div>