Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Asuming you use jQuery, if i were you, i would create a DIV with the "textbox-list" and just after the div, a button to add new textbox in the above div.</p> <p>Here is the part of code :</p> <pre><code>&lt;div id="iprange_list"&gt; &lt;/div&gt; &lt;a href="#" id="new_iprange"&gt;&lt;img src="images/plus.png" alt="new ip range image"/&gt;&lt;/a&gt; </code></pre> <p>Then just add a <code>.click()</code> event on the id <code>new_iprange</code> to dynamically add a line which contains 2 input with unique ID (static text + increment a var). I suggest you to define general span with a class for each line, such as "linecontainer", and then just add a "title" property to your span with the increment var used above.</p> <p>After few clicks, your div would look like that :</p> <pre><code>&lt;div id="iprange_list"&gt; &lt;span class="linecontainer" title="1"&gt;&lt;input type="text" id="tbxfrom1" /&gt;&lt;input type="text" id="tbxto1" /&gt;&lt;/span&gt; &lt;span class="linecontainer" title="2"&gt;&lt;input type="text" id="tbxfrom2" /&gt;&lt;input type="text" id="tbxto2" /&gt;&lt;/span&gt; &lt;span class="linecontainer" title="3"&gt;&lt;input type="text" id="tbxfrom3" /&gt;&lt;input type="text" id="tbxto3" /&gt;&lt;/span&gt; &lt;/div&gt; &lt;a href="#" id="new_iprange"&gt;&lt;img src="images/plus.png" alt="new ip range image"/&gt;&lt;/a&gt; </code></pre> <p>Finally when you validate your form just use the jquery selecter to retrieve every line in your Div, and use a <code>.each()</code> to iterate between your lines :</p> <pre><code>$.each($( "#iprange_list .linecontainer" ), function(i, item) { var currentID = $(item).attr("title"); alert( $( "#tbxfrom" + currentID ).val() ); alert( $( "#tbxto" + currentID ).val() ); }); </code></pre> <p>That's just an idea, i let you do the rest ;) !</p>
    singulars
    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.
    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