在动态生成的字段中添加组字段名称

时间:2015-06-22 09:38:49

标签: jquery input clone

我正在尝试使用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/

1 个答案:

答案 0 :(得分:1)

为什么这么多让输入混乱?这样做很简单:

    LetterTransaction sendTransactionInstance = LetterTransaction.get(params.long("transactionId"))
    LetterTransaction receiveTransaction=new LetterTransaction()
    receiveTransaction.action=ActionEnum.RECEIVE
    receiveTransaction.letter=Letter.get(sendTransactionInstance.letter.id)
    receiveTransaction.status=TransactionStatus.DONE
    receiveTransaction.relatedTransaction=sendTransactionInstance
    receiveTransaction.party=InternalDepartment.findByCoreId(session.departmentId)
    receiveTransaction.dateTime=new Date()
    receiveTransaction.sequence=params.long("sequence")
    receiveTransaction.targets=[sendTransactionInstance?.party]
    receiveTransaction.notes = params.comments
    receiveTransaction.archiveStructure = ArchiveStructure.get(params.long("archiveStructure.id"))

    if(!receiveTransaction.hasErrors() && receiveTransaction.save(flush: true,failOnError: true)){
        sendTransactionInstance.letter.addToTransactions(receiveTransaction)
        sendTransactionInstance.letter.save(flush: true,failOnError: true)
        //copy all scans to the new folder
        manageService.copyLetterScansFromOrganization(sendTransactionInstance, sendTransactionInstance?.party?.coreId,null, getCurrentUser())
        render "OK"
    }else{
        def errors=g.renderErrors(bean: receiveTransaction)
        render errors
    }
$(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;}