Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

jQuery clone form increment all attributes of name,class,id,data-id ..etc

Tags:

javascript

jquery

function

forms

clone

Our form contain multiple fields and we need to do by jQuery

  • when cloning fields need increase it's Name, Class, Id,data-id and label for .

How increase IDs like these

block-post-order-1-select

Or names like this

name="xform_demo[block-post-order-1]

You can check this form code at codepen http://codepen.io/earngate/pen/NxPOZz/

HTML

    <table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
    <tr>
    <th scope="row">
    <div class="xform_field_th">
    Block</div>
    </th>
    <td>
    <fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
    <div class="switch-options">
    <label class="cb-enable selected" data-id="switch-fold-1"><span>On</span></label>
    <label class="cb-disable" data-id="switch-fold-1"><span>Off</span></label>
    <input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"></div>
    </fieldset></td>
    </tr>
    <tr class="fold">
    <th scope="row">
    <div class="xform_field_th">
    Text logo</div>
    </th>
    <td>
    <fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
    <input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"></fieldset></td>
    </tr>
    <tr class="fold">
    <th scope="row">
    <div class="xform_field_th">
    </div>
    </th>
    <td>
    <fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
    <div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
    <a href="javascript:void(0)" class="select2-choice" tabindex="-1">
    <span id="select2-chosen-2" class="select2-chosen">first-choise</span><abbr class="select2-search-choice-close"></abbr>
    <span class="select2-arrow" role="presentation"><b role="presentation">
    </b></span></a><label for="s2id_autogen2" class="select2-offscreen">
    </label>
    <input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20">
    <div class="select2-drop select2-display-none select2-with-searchbox">
    <div class="select2-search">
    <label for="s2id_autogen2_search" class="select2-offscreen"></label>
    <input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input"  type="text" size="20">
    </div>
    <ul id="select2-results-2" class="select2-results" role="listbox">
    </ul>
    </div>
    </div>
    <select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
    <option></option>
    <option value="Desc" selected="selected">Lates</option>
    <option value="rand">Random Posts</option>
    </select></fieldset></td>
    </tr>
    <tr style="border-bottom: medium none;" class="compiler fold">
    <th scope="row">
    <div class="xform_field_th">
    Block Style</div>
    </th>
    <td>
    <fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
    <div class="xform-table-container">
    <ul class="xform-image-select">
    <li class="xform-image-select">
    <label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
    <input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"><img src="1-3.png" alt="node" class style=" width: 100%; "></label></li>
    <li class="xform-image-select">
    <label class=" xform-image-select block_type_1_2" for="block_type_1_2">
    <input class=" compiler noUpdate  noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"><img src="1-4.png" alt="nodey" class style=" width: 100%; "></label></li>
    </ul>
    </div>
    </fieldset></td>
    </tr>
    <tr style="display: none;" class="xform-section-indent-start">
    <th scope="row"></th>
    <td></td>
    </tr>
    </table>

jQuery

    $(document).ready(function () {
    $('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');

    $(".add_btn").click(function(e) {
    var avails = $(this).prevAll();
    var cnt = avails.length + 1;

    $('#section-table-section-start1:last').clone().insertAfter("#section-table-section-start1:last").append( $('<input class="del_btn"  type="button" value="Delete this">') );

    $("input.del_btn").css({"float":"right","background-color":"#c00","color":"#fff"});

    e.preventDefault();
    });

    $("body").on('click',".del_btn", function() {
    $(this).parent().remove();
    });

    });

Can you help

like image 369
meno Avatar asked Nov 17 '25 05:11

meno

2 Answers

So the question seems to be "how to increase the number in multiple attributes of multiple nodes." I will narrow it down to increasing the last integer in multiple attributes, to keep it simple.

You can create a simple function to increase the number of one attribute of one node, then repeat it for the elements and attributes you need:

/* Increase the last number for an attribute of an jQuery element, if possible */
function inc ( node, property ) { // .prop does not work with data-id so must use .attr
   var number = node.attr( property ) ? node.attr( property ).match( /\d+(?=\D*$)/ ) : null;
   if ( number === null ) return; // Abort if has no attribute or no number in it
   node.attr( property, node.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
}

var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();

// For each element with any attribute we need, including the cloned table
cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
   var me = $( this );
   // Loop and increment each property
   $.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) { 
      inc( me, property );
   });
});

There are a few ways to do the loop.

  • Here we grab all elements and loop each property on each of them.
  • If you have less properties you can manually call inc for each property instead of $.each.
  • Alternatively you may loop each property first and find the elements, this way you create more jQ objects but check less properties.

You may also notice that I changed your clone code, because with the auto-increasing id you can't pick the last table by id any more.

Here is the full code:

$( function () {
   function inc ( element, property ) {
      var number = element.attr( property ) ? element.attr( property ).match( /\d+(?=\D*$)/ ) : null;
      if ( number === null ) return;
      element.attr( property, element.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
   }

   $('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');

   $(".add_btn").click(function(e) {
      var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();
      cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
         var me = $( this );
         $.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) {
            inc( me, property );
         });
      });
      cloned.insertAfter( last );
      if ( ! cloned.find( '.del_btn' ).length ) {
         cloned.append( 
            $( '<input class="del_btn"  type="button" value="Delete this">' )
               .css({"float":"right","background-color":"#c00","color":"#fff"})
         );
      }
      e.preventDefault();
   });

   $("body").on('click',".del_btn", function() { $(this).parent().remove(); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
   <tr>
      <th scope="row">
         <div class="xform_field_th">
            Block</div>
      </th>
      <td>
         <fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
            <div class="switch-options">
               <label class="cb-enable selected" data-id="switch-fold-1">
                  <span>On</span>
               </label>
               <label class="cb-disable" data-id="switch-fold-1">
                  <span>Off</span>
               </label>
               <input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"/>
            </div>
         </fieldset>
      </td>
   </tr>
   <tr class="fold">
      <th scope="row">
         <div class="xform_field_th">
            Text logo</div>
      </th>
      <td>
         <fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
            <input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"/>
         </fieldset>
      </td>
   </tr>
   <tr class="fold">
      <th scope="row">
         <div class="xform_field_th">
         </div>
      </th>
      <td>
         <fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
            <div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
               <a href="javascript:void(0)" class="select2-choice" tabindex="-1">
                  <span id="select2-chosen-2" class="select2-chosen">first-choise</span>
                  <abbr class="select2-search-choice-close"/>
                  <span class="select2-arrow" role="presentation">
                     <b role="presentation">
                     </b>
                  </span>
               </a>
               <label for="s2id_autogen2" class="select2-offscreen">
               </label>
               <input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20"/>
               <div class="select2-drop select2-display-none select2-with-searchbox">
                  <div class="select2-search">
                     <label for="s2id_autogen2_search" class="select2-offscreen"/>
                     <input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input"  type="text" size="20"/>
                  </div>
                  <ul id="select2-results-2" class="select2-results" role="listbox">
                  </ul>
               </div>
            </div>
            <select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
               <option/>
               <option value="Desc" selected="selected">Lates</option>
               <option value="rand">Random Posts</option>
            </select>
         </fieldset>
      </td>
   </tr>
   <tr style="border-bottom: medium none;" class="compiler fold">
      <th scope="row">
         <div class="xform_field_th">
                        Block Style</div>
      </th>
      <td>
         <fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
            <div class="xform-table-container">
               <ul class="xform-image-select">
                  <li class="xform-image-select">
                     <label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
                        <input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"/>
                        <img src="1-3.png" alt="node" class style=" width: 100%; "/>
                     </label>
                  </li>
                  <li class="xform-image-select">
                     <label class=" xform-image-select block_type_1_2" for="block_type_1_2">
                        <input class=" compiler noUpdate  noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"/>
                        <img src="1-4.png" alt="nodey" class style=" width: 100%; "/>
                     </label>
                  </li>
               </ul>
            </div>
         </fieldset>
      </td>
   </tr>
   <tr style="display: none;" class="xform-section-indent-start">
      <th scope="row"/>
      <td/>
   </tr>
</table>
like image 130
Sheepy Avatar answered Nov 18 '25 21:11

Sheepy

Before talking about a possible solution, I'll try to paraphrase to confirm that my understanding of the problem statement is correct...

  1. You have some HTML that will be cloned to append on a container
  2. A button will trigger append
  3. Counter in multiple attributes on the cloned HTML must be incremented

Neither OP nor my suggested solution considers other common possible situations:

  1. What must happen when an element is deleted:
    • Will the counters be recalculated?
    • Are gaps in counters allowed?
    • etc...

Anyway, now talking about the solution, I'll not use the code given in OP. Instead, I'll offer a general approach and leave actual implementation as a homework:

HTML:

<!-- Container which will hold your elements -->
<div class="container">
    <!-- Original element, this block will be duplicated -->
    <div class="element">
        <input id="input1id" class="input1class" name="input1name" />
    </div>
</div>
<button type="button" id="trigger">Append Copy</button>

jQuery:

    $(document).ready(function(){
        // HTML to copy. Used an uncommon string (@@) as place holder for actual counter
        var elementCopy = '<div class="element">'+
'       <input id="input@@id" class="input@@class" name="input@@name" />'+
'   </div>';

        $('#trigger').on('click', function() {
            var count = $('.element').length;   // number of elements with class "element"
            var counter = count + 1;    // Counter to use for new element(s)
            var clone = elementCopy.replace(/\@\@/g, counter);      // Substitute counter for all @@ in elementCopy; note the 'g' switch (global) in regex
            $('.container').append(clone);  // Finally append new HTML
        })
    });

Check this fiddle.

like image 43
Fr0zenFyr Avatar answered Nov 18 '25 19:11

Fr0zenFyr
Sign in to Comment

Related questions

Javascript communication with Selenium (RC)
Telerik RadComboBox javascript API problem
Why does the in operator return false for a Proxy property, but the property is still accessible in JavaScript?
How can I check for browser support for a specific value of an HTML attribute?
Can I use a variable index in a useSelector call?
Modifying document.head has no effect, but document.body does
Emit attempted before Angular Webpack plugin initialization after webpack5 build
Why and how should the promise() method be used?
bundle.js not found with webpack
RegEx JS extract string matching criterias from another string
ActionCable registers user multiple times
Need good HTML content editor for ASP.NET
Using .sort() and .data() to sort HTML elements in IE11 and Edge
how to pass javascript variable value to views.py function in django?
Count JavaScript object value in array for duplicates
Can you update a label with javascript?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!