Question

Copying Table Rows with Dropdown Field Values

Forms

Updated February 16, 2015

asked on February 16, 2015

Hi.

I have a form with a dynamic table in which users can add blank rows and fill them in or they can clone rows. When the fields in each row were all text fields, my code worked fine. However, the customer wants dropdown lists in all but one column. The same code that clones the row with all text fields now clones the row, but has blank values for all the cells with dropdown lists. The one cell that is still a text field is copied though.

The code I'm using to do this is:

$(document).on('click', '.copy', function(event) {

$(event.target).closest('tr').clone().appendTo($(event.target).closest('tbody'));

)}

I've tried using clone(true) instead of clone().

}

Thanks for any help you can offer!

0 0

Replies

replied on February 16, 2015

This is a limitation of the jQuery clone() function. Check the documentation here:

http://api.jquery.com/clone/

In the yellow note box partway down the page, it says that clone doesn't copy the dynamic state of a "select" or "textarea" element. You'll have to add some additional code to handle these settings. I'd recommend you store the cloned row as a variable, then loop over all the select elements in it and set each one to match the value from the original row.

0 0

replied on February 16, 2015

I found that for each value I wanted to copy, I had to find the closest row to the copy button selected, and within that row, find the field container, and then get the input area and the value in it.

It's not pretty, but here's what I came up with:

$(event.target).closest('tr').find('.fieldclass').find($('select[id^=Field461]')).val();

There may be a more elegant way to derive the value, but this works. Now I just need to plug it into the row that got created. That should be easy.

Thanks for the response!

0 0

You are not allowed to follow up in this post.

Question

Question

Copying Table Rows with Dropdown Field Values

Replies

Sign in to reply to this post.