CODEWITHSUNDEEP
javascriptjqueryhtml
Idham Choudry
Idham Choudry

Reputation: 629

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

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>

Upvotes: 4

Views: 2403

Answers (3)

backpackcoder
backpackcoder

Reputation: 327

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>

Upvotes: 3

Rahul Patel
Rahul Patel

Reputation: 5246

You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.

Please check below working snippet. In snippet I have changed the label name and ids.

$(function(){
  var _counter = 1;
  $("#cloned_html").on("click",function(){
    var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
    $button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
    
    $button.find("label").html("Quantity-"+_counter);
    var selector = '#attribute-name'
    if(_counter>1){
      selector = '#attribute-name-'+(_counter-1)
    }
    $($button).insertAfter(selector);  
    _counter++;
  });  
});
<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>
<button id="cloned_html">Clone</button>

Upvotes: 2

Edorka
Edorka

Reputation: 1811

You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.

I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl

Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.

Upvotes: 1

Related Questions