Question

I want to add two dynamic text box to enter “IP Range From” to “IP Range To” and one add more button to insert new IP Range plus validations to test those ranges.

Please suggest the code.

Waiting for your early response.

Thanks in Advance
Tanu

Answer 1

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.

Here is the part of code :

<div id="iprange_list">


</div>
<a href="#" id="new_iprange"><img src="images/plus.png" alt="new ip range image"/></a>

Then just add a .click() event on the id new_iprange 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.

After few clicks, your div would look like that :

<div id="iprange_list">
<span class="linecontainer" title="1"><input type="text" id="tbxfrom1" /><input type="text" id="tbxto1" /></span>
<span class="linecontainer" title="2"><input type="text" id="tbxfrom2" /><input type="text" id="tbxto2" /></span>
<span class="linecontainer" title="3"><input type="text" id="tbxfrom3" /><input type="text" id="tbxto3" /></span>
</div>
<a href="#" id="new_iprange"><img src="images/plus.png" alt="new ip range image"/></a>

Finally when you validate your form just use the jquery selecter to retrieve every line in your Div, and use a .each() to iterate between your lines :

$.each($( "#iprange_list .linecontainer" ), function(i, item) {
    var currentID = $(item).attr("title");
    alert( $( "#tbxfrom" + currentID ).val() );
    alert( $( "#tbxto" + currentID ).val() );
});

That’s just an idea, i let you do the rest 😉 !