在動態生成的字段中添加組字段名稱

Question

我想在使用jquery的動態生成字段中的輸入文本中添加組。

我想在這裏形成這樣的數據在clnbox中通過jquery生成。

<form name="frm" method="post" action""> 
    First-name:<input type="text" name="firstname" > 
    <div class="cust_box"> 
     <div id="clonedInput1" class="clonedInput"> 
     Age:<input type='text' name="" data-name="[age]"> 
     Location:<input type='text' name="" data-name="[lcoation]" > 
     </div> 
    </div> 
    <div class="clnbox"> 
     Age:<input type='text' name="data[1][age]" data-name="[age]"> 
     Location:<input type='text' name="data[1][lcoation]" data-name="[lcoation]" > 

     Age:<input type='text' name="data[2][age]" data-name="[age]"> 
     Location:<input type='text' name="data[2][lcoation]" data-name="[lcoation]" > 
    </div> 

    <input type="submit" value="submit" name="datafill"> 
</form> 

下面是用jQuery代碼：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script> 
    jQuery(document).ready(function($){  
     jQuery('.clone').change(function(){ 
      $('.clnbox .clonedInput').remove(); 
      for (var i = 0; i <(this).value ; i++){ 
       var data_attr='data['+i+']'+($(".clonedInput input").attr('data-name')); 
       cncate = data_attr; 
       $(".cust_box > .clonedInput").clone().appendTo(".clnbox"); 
       $(".cust_box input").attr('name',cncate);  
      } 
     }); 
    }); 
</script> 

<select class="clone" name="clone_time"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<form name="frm" method="post" action""> 
    First-name:<input type="text" name="firstname" >  
    <div class="cust_box"> 
     <div id="clonedInput1" class="clonedInput"> 
     Age:<input type='text' name="" data-name="[age]"> 
     Location:<input type='text' name="" data-name="[lcoation]" > 
     </div> 
    </div> 
    <div class="clnbox"></div>  
    <input type="submit" value="submit" name="datafill"> 
</form> 

我需要這樣的陣列輸出：

Array 
(
    [firstname] => lockesh 
    [data] => Array 
     (
      [1] => Array 
       (
        [age] => 
        [lcoation] => 
       ) 

      [0] => Array 
       (
        [age] => 33 
        [lcoation] => virar 
       ) 

     ) 

    [datafill] => submit 
) 

https://jsfiddle.net/b06kc4Lk/3/

Answer 1

你爲什麼要混淆的投入這麼多？做簡單的，這樣說：

$(function() { 
 
    $("#i").change(function() { 
 
    $("ul").attr("class", $(this).val()); 
 
    }); 
 
});

* {margin: 0; padding: 0; list-style: none;} 
 
form ul li {padding: 5px;} 
 
.i1, .i2, .i3 {display: none;} 
 
.one .i1 {display: block;} 
 
.two .i1, .two .i2 {display: block;} 
 
.three .i1, .three .i2, .three .i3 {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <select name="i" id="i"> 
 
    <option value="">Select More</option> 
 
    <option value="one">1 Guests</option> 
 
    <option value="two">2 Guests</option> 
 
    <option value="three">3 Guests</option> 
 
    </select> 
 
    <ul> 
 
    <li> 
 
     <label> 
 
     <strong>First Name</strong> 
 
     <input type="text" name="firstname" /> 
 
     </label> 
 
    </li> 
 
    <li class="i0"> 
 
     <label> 
 
     <strong>Age #1</strong> 
 
     <input type="text" name="age[0]" /> 
 
     </label> 
 
     <label> 
 
     <strong>Location #1</strong> 
 
     <input type="text" name="loc[0]" /> 
 
     </label> 
 
    </li> 
 
    <li class="i1"> 
 
     <label> 
 
     <strong>Age #2</strong> 
 
     <input type="text" name="age[1]" /> 
 
     </label> 
 
     <label> 
 
     <strong>Location #2</strong> 
 
     <input type="text" name="loc[1]" /> 
 
     </label> 
 
    </li> 
 
    <li class="i2"> 
 
     <label> 
 
     <strong>Age #3</strong> 
 
     <input type="text" name="age[2]" /> 
 
     </label> 
 
     <label> 
 
     <strong>Location #3</strong> 
 
     <input type="text" name="loc[2]" /> 
 
     </label> 
 
    </li> 
 
    <li class="i3"> 
 
     <label> 
 
     <strong>Age #4</strong> 
 
     <input type="text" name="age[3]" /> 
 
     </label> 
 
     <label> 
 
     <strong>Location #4</strong> 
 
     <input type="text" name="loc[3]" /> 
 
     </label> 
 
    </li> 
 
    <li> 
 
     <input type="submit" value="Submit" /> 
 
    </li> 
 
    </ul> 
 
</form>