同じ名前を別の入力タイプにすることはできません

Question

Helli、私は新しいボタンを追加することによってdivのクローンを作成するフォームを開発しました。このdivには、1つの入力ボックスとテーブルがあります。 AddNewボタンをクリックすると、新しいdivが作成されますが、これは1番目のdivのクローンですが、私のissuseは同じものです。これらの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> 
 
\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>

Answer 1

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>

Answer 2

同じようname="value[]"

の終わりに角括弧を追加します。あなたはempName入力の配列を（）がありますそのような

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

。

あなたはサーバー側でPHPを使用する場合は、あなたがname="EmpName[]"を使用するときは、この操作を行うときに、あなたが配列を取得し、配列にフォームの入力を変換するために、角括弧構文を使用することができます。

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

のように同じ名前の入力要素を好きなだけ追加することができます。

Answer 3

次のコード試すことができます。

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>