Possible to sort and omit duplicates in a list using javascript

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Laphan - 03 Feb 2008 20:00 GMT

Hi All

I need to provide a function on my site whereby a user can enter a number of
ip addresses (one per line) so that I can submit this en masse to string
holding space in my db.

My problem is that I want to keep this list sorted as they enter the ip
addresses and I want to check for duplicates so that they don't enter the
same ip addresses twice.

I was going to do this as a simple form submit and add each entry as a
database row so that I could ORDER BY to get the sort and check for
duplicates on the submit, but this client/server submit really slows the
whole process. It would be great if I could order by and duplicate check on
the client side so that once done all I'm doing is one client/server 'post'
to the db.

Is this feasible?

Thanks

Reply to this Message

McKirahan - 04 Feb 2008 03:59 GMT

> Hi All
>
[quoted text clipped - 14 lines]
>
> Is this feasible?

Will this help? Watch for word-wrap. Save as "ip.htm" and test as-is.

It's a ".htm" file (not.".asp") and uses JavaScript on the client-side
to allow entry, validation (format and uniqueness), and sorting of
one or more IP addresses which would be submitted to an ASP page.
A textbox is used for entry and a select list displays all accepted.

I'll probably get a lot of grief from those who know JavaScript
better than I do.... However, this works well as far as I can tell.

<html>
<head>
<title>ip.htm</title>
<script type="text/javascript">
var ips = new Array();
function insertIP() {
var ipa = document.getElementById("IPA").value;
if (ipa == "") return;
var rex =
/\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0
-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-
9][0-9]?)\b/;
if (!rex.test(ipa)) {
alert("IP address invalid!");
return;
}
for (var i=0; i<ips.length; i++) {
if (ips[i] == ipa) {
alert("IP address exists!");
return;
}
}
ips.push(ipa);
ips.sort();
var sel = document.getElementById("sele");
sel.length = 0;
var opt;
for (var j=0; j<ips.length; j++) {
opt = document.createElement("OPTION");
opt.text = ips[j];
opt.value = ips[j];
sel.options.add(opt);
}
sel.size = ips.length;
document.getElementById("IPA").value = "";
document.getElementById("INS").focus();
}
function removeIP() {
var sel = document.getElementById("sele");
if (sel.length == 0) return;
var idx = sel.selectedIndex;
var ipa = sel.options[idx].value;
if (ipa == "") return;
var ipx = new Array();
var k = 0;
for (var i=0; i<ips.length; i++) {
if (ips[i] != ipa) ipx[k++] = ips[i];
}
ips.length = 0;
sel.selectedIndex = 0;
sel.length = 0;
sel.size = ipx.length;
var opt;
for (var j=0; j<ipx.length; j++) {
opt = document.createElement("OPTION");
opt.text = ipx[j];
opt.value = ipx[j];
sel.options.add(opt);
ips.push(ipx[j]);
}
}
function submitIP() {
var sel = document.getElementById("sele");
if (sel.length != 0) return true;
alert("IP address missing");
return false;
}
function noEnter() {
return !(window.event && window.event.keyCode == 13);
}
</script>
<style type="text/css">
td { font-family:Arial; font-size:8pt }
.butt { background-color:white; width:80px }
.wide { width:200px }
</style>
</head>
<body>
<form action="ip.asp" method="post" onsubmit="return submitIP()">
<table border="0" width="600">
<tr valign="top">
<td>
<b>IP Address</b><br>
<input type="text" name="IPA" id="IPA" size="15" maxlength="15"
class="wide" value="" onkeypress="return noEnter()">
<input type="button" id="INS" class="butt" value="Insert"
onclick="insertIP()">
</td>
<td>
<b>IP Addresses</b>       (click to remove)<br>
<select name=""sele id="sele" class="wide" onclick="removeIP()">
</select>
<input type="submit" class="butt" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>

Reply to this Message

Anthony Jones - 05 Feb 2008 10:24 GMT

> Hi All
>
[quoted text clipped - 12 lines]
> the client side so that once done all I'm doing is one client/server 'post'
> to the db.

Take a gander at this:-

<html>
<head>
<title>Enter IPs</title>
<script type="text/javascript">

var masIPs = {}

function cmdAdd_onclick()
{
var rgxIP =
/^(((\d{1,2})|(1\d{2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{2})|(2[0-4
]\d)|(25[0-5]))$/
var sIP = document.getElementById("txtIP").value
if (rgxIP.test(sIP))
{

masIPs[sIP] = true

var arr = []
for (var sIP in masIPs) arr.push(sIP)
arr.sort()
document.getElementById("txtIPs").value = arr.join("\r\n")
document.getElementById("txtIP").value = ""
}
}
</script>
</head>
<body>
<form action="test.asp" method="post">
<label>IP Address: </label>
<input id="txtIP" type="text" value="" />
<input type="button" value="Add" onclick="cmdAdd_onclick.call(this)"
/><br />
<textarea id="txtIPs" name="txtIPs">
</textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>

It uses a Javascript object as an associative array which ensures that the
IPs are unique.

However you might need to consider the sorting. Is alphanumeric sorting of
IP addresses expected. e.g would you expect 20.67.39.4 to appear in the
list after 192.168.34.2 ?

If not then you need to enhance the sorting. Add this function to the
Javascript:-

function compareIPs(vsIP1, vsIP2)
{
var asIP1 = vsIP1.split(".")
var asIP2 = vsIP2.split(".")

var i = 0
var retVal = 0
while (!retVal && i<4)
retVal = fnCompareOctet(asIP1[i], asIP2[i++])

return retVal

function fnCompareOctet(vs1, vs2)
{
var l1 = parseInt(vs1)
var l2 = parseInt(vs2)
return l1 < l2 ? -1 : l1 > l2 ? 1 : 0
}

}

now change the array sort line to:-

arr.sort(compareIPs)

This makes use of javascript arrays sort method accepting a comparator
function.

How about being able to delete an IP address from the list and should the
textarea be editable? I'll leave that as an exercise ;)

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Laphan - 12 Feb 2008 18:23 GMT

Hi Guys

Can't thank you enough for this.

It is very much appreciated.

Rgds

> Hi All
>
> I need to provide a function on my site whereby a user can enter a number

> ip addresses (one per line) so that I can submit this en masse to string
> holding space in my db.
[quoted text clipped - 7 lines]
> duplicates on the submit, but this client/server submit really slows the
> whole process. It would be great if I could order by and duplicate check

> the client side so that once done all I'm doing is one client/server

'post'

> to the db.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Webmaster Forum / ASP / Database Access / February 2008

Possible to sort and omit duplicates in a list using javascript