Checking for duplicate entries in select box

Dev Shed Forums Sponsor:

January 28th, 2013, 04:01 PM

Jason_Kelly

Registered User

Join Date: Nov 2012

Posts: 23

Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0

Checking for duplicate entries in select box

Hello,

I need your help,

The following function below, will dynamically add a new option value into a selectbox. Great feature, but it does not account and check for duplicate entries before adding new options into the select box. How can the code be modified such that it will alert the user that a duplicate entry has been found and to abort adding the same option value:

Code:

function addref() {

var value = document.getElementById('refdocs').value

    if (value != "") {

        var select = document.getElementById('refdocs_list');

        var option = document.createElement('option');

        option.text = value

        select.add(option,select.option)

        select.selectedIndex = select.options.length - 1;
    }//end of if

}//end of function

January 28th, 2013, 07:02 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 41 m 29 sec
Reputation Power: 4192

You would need to loop through all of the existing options and check if you had a match. The loop would be added before your if condition and if a match was found, so you would notify the user somehow, e.g. with alert(), and then execute a "return" statement.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

January 28th, 2013, 10:31 PM

Jason_Kelly

Registered User

Join Date: Nov 2012

Posts: 23

Time spent in forums: 2 h 20 m 59 sec
Reputation Power: 0

Thanks very much for the post. But how on earth would you go about the process that you described. Sorry, I am a complete newbie still.

Jay

January 29th, 2013, 03:17 AM

tiwariankit

Registered User

Join Date: Jan 2013

Posts: 5

Time spent in forums: 1 h 5 m 43 sec
Reputation Power: 0

Quote:

Originally Posted by Jason_Kelly

Thanks very much for the post. But how on earth would you go about the process that you described. Sorry, I am a complete newbie still.

Jay

Hi,

try the below code :-

Code:

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
<script type = "text/javascript">
function addref() 
{
	var value = document.getElementById('refdocs').value
    if (value != "") 
    {
        var select = document.getElementById('refdocs_list');
        var option = document.createElement('option');
	var flag = 0;
	for(var i = 0; i < select.length; i++)
	{
		if(select[i].value == value)
		{	
			flag = 1;
		}
	}
	if(flag == 1)
	{
		alert('Duplicate value, Please enter a new one.');
	}
	else
	{
		option.text = value;
		select.add(option,select.option);
		select.selectedIndex = select.options.length - 1;
	}
	
    }
}
</script>
</HEAD>
<BODY>
<div>
	<input type = "text" name = "refdocs" id = "refdocs" style = "width:80px;"/>
	<input type = "button" name = "addValues" id = "addValues" value = "AddValues" onClick = "addref();"/>
	</br>
	<select id = "refdocs_list">
	<option value = "1">1</option>
	<option value = "2">2</option>
	</select>
</div>
</BODY>
</HTML>

Let me know if you get any problem.

Last edited by Kravvitz : January 29th, 2013 at 03:35 AM. Reason: changed the doctype to a current one and added code tags