相同的名稱不能在不同的輸入類型

Helli，我開發了一種形式，我通過單擊添加新按鈕來製作一個div的克隆。這個div有一個輸入框和表格。當我點擊AddNew按鈕時，一個新的div將創建哪個是第一個div的克隆，但是我的issuse是相同的，不能在這些divs的輸入框中輸入。我無法實現此驗證。相同的名稱不能在不同的輸入類型

$("#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> 
 
\t 
 
           <div class="copyFromHere portlet-body individual individualDepartmentSectionSub"> 
 
\t \t \t \t \t \t \t \t <label class="label1 col-md-12 individual labelDepartmentName"> Enter Department Name </label> 
 
\t \t \t \t \t \t \t \t <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> 
 
\t 
 
</div>

來源

2017-03-06 Arpit Gupta

我在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> 
 
\t 
 
           <div class="copyFromHere portlet-body individual individualDepartmentSectionSub"> 
 
\t \t \t \t \t \t \t \t <label class="label1 col-md-12 individual labelDepartmentName"> Enter Department Name </label> 
 
\t \t \t \t \t \t \t \t <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> 
 
\t 
 
</div>

來源

2017-03-06 11:19:21 NikhilGoud

This answere does not helpful。我得到相同的部門名稱 –

@ArpitGupta我以爲你只想包括Salary和EmployeeName，現在我更新了代碼以包含所有三個輸入，包括DepartmentName。 – NikhilGoud

先生，我的問題是輸入框輸入部門名稱不能相同。當我點擊addnew按鈕，然後克隆輸入框和表將會出現，但兩個或兩個以上的輸入框的（輸入部門名稱）值不能相同 –

就在的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

像所以你可以添加儘可能多的輸入元素，只要你喜歡同名。

來源

2017-03-06 09:59:59 caramba

哼哼..作品的使用JavaScript/jQuery的 – Weedoze

@Weedoze웃很好，但他會送形成一個服務器的地方，所以PHP只是舉一個例子。主要是使用像'name =「value []」'這樣的方括號，它將與javascript/jquery協同工作，實際上它只是HTML – caramba

的正確使用方式，如果你能爲我提供一個工作小提琴，它將會很棒。 Thanx –

你可以試試下面的代碼：

var names = []; 
 
$("#insert17").click(function(){ 
 
\t var newObject = $(".copyFromHere:first").clone(); 
 
\t var _Name; 
 
\t var thisName = $(".individualDepartmentSectionSub:first>.DepartmentName").val().trim(); 
 
\t var index = $.inArray(thisName, names); 
 
     if(thisName == ''){ 
 
      return 
 
     } 
 
\t if(index <= -1){ 
 
\t \t newObject.appendTo(".test") 
 
\t \t names.push(thisName); 
 
\t } 
 
\t else{ 
 
\t \t alert('Name exist. Try different name'); 
 
\t \t return; 
 
\t } 
 
});

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

來源

2017-03-06 11:38:34 Mamun

這answere是沒有幫助的。我得到相同的部門名 –

嗨Arpit，我沒有做任何修改（修剪輸入值）。你現在可以看一下這個片段嗎？ – Mamun

相同的名稱不能在不同的輸入類型

回答

相關問題