jquery form advance form cloning

问题

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

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>

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

回答1:

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

take a look at here

its allows to add and delete row dynamically.

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

above two also have callback function.

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

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
});

来源：https://stackoverflow.com/questions/15061473/jquery-form-advance-form-cloning