Question

Helli，我已经开发了一个表单，我通过单击添加新按钮来克隆div。这个div有一个输入框和表格。当我点击AddNew按钮时，一个新的div将创建哪个是第一个div的克隆，但是我的issuse是相同的，不能在这些div的输入框中输入。我无法实现此验证。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

只需在name="value[]"

的末尾添加方括号即可

像：

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

就像那样，你将得到empName个输入的数组（）。

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

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

这样你就可以添加任意数量的输入元素。

Answer 2

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

＆＃13;

    $(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';
                        }
                    }
                }
            }
        }

    });

＆＃13;

<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>

＆＃13;

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

2 个答案: