CODEWITHSUNDEEP
jqueryduplicatesrowdefault
Rocket
Rocket

Reputation: 1093

Jquery - Duplicate DropDown without copying set value

I have the following code which duplicates a form row including the dropdown lists and input fields. This code which works perfectly, apart from one slight issue.

http://jsfiddle.net/8kvesskv/6/

What ever values are entered into the first row are duplicated to the new rows.

Is there anyway to duplicate the row, but have the values of the inputs and drop downs on the new row be default. ie: no item selected in the drop down and the inputs empty.

I have tried chaging this:

$newRow.find('#BoxName').val($("#TemplateRow").find('#BoxName').val());
            $newRow.find('#BoxComparison').val($("#TemplateRow").find('#BoxComparison').val());
            $newRow.find('#BoxVal').val($("#TemplateRow").find('#BoxVal').val());

To this:

 $newRow.find('#BoxName').val($("#TemplateRow").find('#BoxName').val(''));
        $newRow.find('#BoxComparison').val($("#TemplateRow").find('#BoxComparison').val(''));
        $newRow.find('#BoxVal').val($("#TemplateRow").find('#BoxVal').val(''));

That resulted in the new being defaulted, but also the first row !

Any ideas how I can do this ?

Upvotes: 0

Views: 536

Answers (2)

Danilo
Danilo

Reputation: 2686

With this code you can clone the row and reset the field values:

  var $newRow = $('#TemplateRow').clone(true).removeAttr('id');
  $newRow.find('#BoxName').val('');
  $newRow.find('#BoxComparison').val('');
  $newRow.find('#BoxVal').val('');    
  $newRow.find('input[name="DeleteBoxRow"]').prop('checked', false); //Example: search by name

See here: http://jsfiddle.net/8kvesskv/9/

Upvotes: 1

whiterabbit25
whiterabbit25

Reputation: 277

Why not just store the row in a variable when the page loads, something like:

    newRow = "<tr>" + $("#TemplateRow").html() + "</tr>";

Then all you need do in your click function is add that newRow before the button like you're already doing.

Upvotes: 0

Related Questions