jQuery表单高级表单克隆 [英] jquery form advance form cloning

问题描述

如何制作表单，可以在单击添加行"链接时在其中添加行，并在单击删除"时将其删除.我的表单中还有一个下拉列表，其中包含以下选项 1. ---选择---默认情况下 2.资产 3.没有资产

How to make a form where it can be added rows on clicking the ADD ROW link and can be deleted while click remove. Also i have a dropdown list in my form which has following options 1. ---Select--- by default 2. Asset 3. No Asset

现在，当用户选择资产"时，动态表单显示将出现在当前行的正下方. 动态框应具有此字段 1.资产类型:一个下拉列表(其值应填充ajax) 2.名称:一个简单的输入文本字段 3.序列号:文本字段 4.说明:文本字段

Now when a user selects Asset a dynamic form show appear right below the current row. The dynamic box should have this fields 1. Asset Type: One dropdown list (whose values should be populated with ajax) 2. Name: A simple input text field 3. Serial No: Text field 4. Description: Text field

此表单应具有添加和删除的选项，即使对于那些添加的行，也应生成动态表单框.

This form should have option to added and remove and even for those added rows dynamic form box should be generated.

 <table id="expense_table" class="">
            <thead>
                <tr>
                <th>Sl. No</th>
                <th>Particulars</th>
                <th>Type</th>
                <th>Qty</th>
                <th>Rate</th>
                <th>Amount</th>
                <th>Action</th>
            </tr>
           </thead>
    <tbody>
            <tr id="row_1">
                <td>1</td>
                <td><input type="text" name="particulars" /></td>
                <td>
                    <select id="expense_type" name="expense_type" class="exp_type span2">
                        <option value="">---Select---</option>
                        <option value="asset">Asset</option><!---when Asset is selected a dynamic box with some fields should appear---->
                        <option value="non_asset">Non Asset</option>
                    </select>
                </td>
                <td><input type="text" name="qty" class="input-small" /></td>
                <td><input type="text" name="rate" class="input-small"  /></td>
                <td><input type="text" name="amount" class="input-small"  /></td>
                <td>X</td>
            </tr>
            <tr id="asset_details_1"><td colspan="7"> <!----- here should be the dynamic box with the fields---->
</td></tr>
    </tbody>
</table>

我已经进行过表单克隆，但是当我没有下拉列表时却可以使用它，但是在使用dropdownlist和dynamic box时我无法这样做，我如何才能在php中接收服务器中的数据.请帮帮我.我不希望为我编写整个代码，但我想向我们提供正确方向的指导.谢谢

I have worked with form cloning and i got it working in when i dont have the dropdown list but with dropdownlist and dynamic box i m unable to do so how can i receive the data in server in php. Help me please. I dont want the whole code to be written for me but ur guidance in right direction is wt i want. Thanks

推荐答案

好的jQuery.addRow插件将帮助您克隆选择框.

Well jQuery.addRow plugin will help you do clone select box.

在此处

它允许动态添加和删除行.

its allows to add and delete row dynamically.

$(".addRow").btnAddRow();
$(".delRow").btnDelRow();

以上两个还具有回调功能.

above two also have callback function.

选择框及其克隆也具有expense_type id，并且一个以上的dom不能有相同的id.

You have expense_type id for select box and its cloning too and there must not be same id for more than one dom.

现在您动态添加的选择框没有分配事件，因此请使用.on

now your dynamically added select box do not have events assigned to it so use .on

$('select[name="name="expense_type""]').on('change',function(){
   //write code
});

这篇关于jQuery表单高级表单克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！