IP Range From and IP Range To - Dynamic Text Box

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 ;) !

Answer 2

To validate the IpAddress you need a regular expression to do this.

• See here sample regular expression to validate the IpAddress.

Then to check the range you need to compare the two textbox value

if(textbox1.value > textbox2.value){...

To add additional IpRange, you need to create new element using DOM.

var newField = document.createElement('input');

To summarize all this see a working sample here in jsfiddle

Note: This might not be the exact things you want, its your part to do the rest.

UPDATE CODE:

SCRIPT

var ipIndex = 1;
var validIp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;

function addIpRange(){

    var ipDiv = document.getElementById('ipRange');
    var newDiv = document.createElement('div');

    ipIndex++;
    newDiv.innerHTML = ipIndex + '. From: <input type="text" name="ipfrom" /> To: <input type="text" name="ipto" /><input type="button" onClick="validate(\'ipRange' + ipIndex + '\');" value="Validate">'
    newDiv.setAttribute('id', "ipRange" + ipIndex);
    ipDiv.appendChild(newDiv);

}

function validate(id){

    var divToCheck = document.getElementById(id);

    var ipAdress = divToCheck.getElementsByTagName('input');
    var ipFrom = document.getElementById(id).childNodes[1].value;
    var ipTo = document.getElementById(id).childNodes[3].value;

    if(validIp.test(ipFrom)){
        if(validIp.test(ipTo)){
            if(ipFrom > ipTo){
                alert("Invalid Ip Range");
            } else {
                alert("Valid Ip Range");
            }
        } else {
            alert("Invalid Ip Address [To]");
        }
    } else {
        alert("Invalid Ip Address [From]");
    }       

}

HTML

<form name="ipAddress">
<div id="ipRange">
    <div id="ipRange1">
        1. From: <input type="text" name="ipfrom" /> To: <input type="text" name="ipto" /><input type="button" onClick="validate('ipRange1');" value="Validate">
    </div>
</div>
    <input type="button" value="Add" onClick="addIpRange();"/>
</form>