Note that there are some explanatory texts on larger screens.

plurals
  1. POIncrement the name attribute of each input but keep radio buttons grouped together after using jQuery clone
    primarykey
    data
    text
    <p>I have several different types of input that I am cloning using jQuery clone. Can the number at the beginning of the name attribute be incremented for each input when they are cloned? I have been trying to figure this out while keeping the Radio button's name's the same after each increment so that they remain grouped together. </p> <p>Here is a Fiddle to see the that I am cloning.</p> <p><a href="http://jsfiddle.net/aHA2d/" rel="nofollow">http://jsfiddle.net/aHA2d/</a> </p> <p>Here is my HTML </p> <pre><code>&lt;div class="container"&gt; &lt;input type="radio" name="1_radio" class="some_vechicle" value="cars" /&gt; Cars &lt;input type="radio" name="1_radio" class="some_vechicle" value="bikes" /&gt; Bikes &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="2_text" class="some_name" value="" /&gt; Model Name &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="3_text" class="some_year" value="" /&gt; Year &lt;br /&gt; &lt;br /&gt; &lt;textarea name="4_area" rows="3" cols="10" class="myArea" value=""&gt;&lt;/textarea&gt; &lt;br /&gt; &lt;br /&gt; &lt;input type="radio" name="5_radio" class="some_color" value="cars" /&gt; Blue &lt;input type="radio" name="5_radio" class="some_color" value="bikes" /&gt; Red &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="6_text" class="some_manufacturer" value="" /&gt; Manufacturer &lt;br /&gt; &lt;br /&gt; &lt;input type="button" class="btnAdd" value="Add" /&gt; &lt;/div&gt;​ </code></pre> <p>Here is the JavaScript that I am using to create the clone</p> <pre><code>$(document).ready(function() { $('.btnAdd').click(function() { var c = $('.container:first').clone(true); $('.container:last').after(c); }); });​ </code></pre> <p>Here is an example of the HTML I am trying to create after cloning the div tag once.</p> <pre><code>&lt;div class="container"&gt; &lt;input type="radio" name="1_radio" class="some_vechicle" value="cars" /&gt; Cars &lt;input type="radio" name="1_radio" class="some_vechicle" value="bikes" /&gt; Bikes &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="2_text" class="some_name" value="" /&gt; Model Name &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="3_text" class="some_year" value="" /&gt; Year &lt;br /&gt; &lt;br /&gt; &lt;textarea name="4_area" rows="3" cols="10" class="myArea" value=""&gt;&lt;/textarea&gt; &lt;br /&gt; &lt;br /&gt; &lt;input type="radio" name="5_radio" class="some_color" value="cars" /&gt; Blue &lt;input type="radio" name="5_radio" class="some_color" value="bikes" /&gt; Red &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="6_text" class="some_manufacturer" value="" /&gt; Manufacturer &lt;br /&gt; &lt;br /&gt; &lt;input type="button" class="btnAdd" value="Add" /&gt; &lt;/div&gt;​ &lt;div class="container"&gt; &lt;input type="radio" name="7_radio" class="some_vechicle" value="cars" /&gt; Cars &lt;input type="radio" name="7_radio" class="some_vechicle" value="bikes" /&gt; Bikes &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="8_text" class="some_name" value="" /&gt; Model Name &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="9_text" class="some_year" value="" /&gt; Year &lt;br /&gt; &lt;br /&gt; &lt;textarea name="10_area" rows="3" cols="10" class="myArea" value=""&gt;&lt;/textarea&gt; &lt;br /&gt; &lt;br /&gt; &lt;input type="radio" name="11_radio" class="some_color" value="cars" /&gt; Blue &lt;input type="radio" name="11_radio" class="some_color" value="bikes" /&gt; Red &lt;br /&gt; &lt;br /&gt; &lt;input type="text" name="12_text" class="some_manufacturer" value="" /&gt; Manufacturer &lt;br /&gt; &lt;br /&gt; &lt;input type="button" class="btnAdd" value="Add" /&gt; &lt;/div&gt;​ </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload