CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Brad
Brad

Reputation: 12262

cloning form fields are populated with value from previous fields

This function clones a set of text input fields inside a div, when the user clicks the add button:

function addRows(label, maxRows, minRows) {
  $('.add-' + label).live('click', function() {
    if ($("." + label + "-group").length < maxRows) {
      $('#' + label + '-template')
        .clone()
        .removeAttr('id')
        .insertAfter($(this).closest('.' + label + '-group'))
        .find('.minus')
        .show();
    }
  });
}

When the user fills in a field, then clicks the add button, it displays a new row of fields, but they are populated with the values the user entered in the previous row.

What is the best way to resolve this problem? I am thinking I could empty all input text fields for that instance of rows.

I just don't know how I'll clear the appropriate rows.

The field names are: first_name[], last_name[], phone[]

So when it clones those three fields to a new row, they will have the same name as the fields above.

When the user submits, I'll loop through each value in first_name[], last_name[], phone[]

Upvotes: 0

Views: 341

Answers (1)

Ram
Ram

Reputation: 144689

try this, call val() after other methods like appendTo or insertAfter

$('#' + label + '-template').clone().val("")...

http://jsfiddle.net/pnQhh/

Upvotes: 3

Related Questions