How to modify cloned field form value and id inside table row?

Idham Choudry

I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure

<table>
 <tbody>
    <tr id="attribute-name">
      <td class="label"><label for="listing_qty">quantity</label></td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
 </tbody>
</table>

backpackcoder

You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.

function appendClonedFormInput(el,
  newId,
  newInputId,
  newLabelText,
  newName,
  newValue) {
  // Clone and update id
  var $cloned = $(el)
    .clone()
    .attr('id', newId);
  // Update label
  $cloned.find('label')
    .attr('for', newInputId)
    .text(newLabelText);
  // Update input
  $cloned.find('input')
    .attr('id', newInputId)
    .attr('name', newName)
    .val(newValue);
  return $cloned.insertAfter(
    $('input').last().parents('tr'));
}


appendClonedFormInput('#attribute-name',
  'new-attribute-id',
  'new-inp-id',
  'New Label',
  'new_field',
  'new value');


appendClonedFormInput('#attribute-custom',
  'new-custom-id',
  'new-custom-inp-id',
  'New Custom',
  'new_custom',
  'new custom value');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="attribute-name">
      <td class="label">
        <label for="listing_qty">quantity</label>
      </td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
  </tbody>
</table>

Collected from the Internet

Please contact [email protected] to delete if infringement.