[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Not allow redundant value in the mutiple list box.

Posted on 2010-09-22
5
Medium Priority
?
214 Views
Last Modified: 2012-05-10
Hi experts,
In the multiple list box, I can add a value into it.  But the problem is how to make sure it not add the redundant value. Below is the code for add, but it accept duplicate value.
function addCountry(){

var elSel = document.getElementById("learnCountry1");
var elSel2 = document.getElementById("learnCountry2");
var alrmsg;
var boolFlag=false;
var country;


 if(elSel2.options[0].selected==true)
  {
	alrmsg="<%=ScriptAlert("Please select a country to add.")%>";
		alert(alrmsg);
  }
  else{
  boolFlag=true;
  var elOptNew = document.createElement('option');
  elOptNew.text = document.frm.learnCountry2.value;
  elOptNew.value = document.frm.learnCountry2.value;
  
if(document.frm.learnCountry.value.length == 0)
  {
  country=document.frm.learnCountry2.value;
  }
  else{
  country=document.frm.learnCountry.value+','+document.frm.learnCountry2.value;
  }
  document.frm.learnCountry.value=country;
  
  try {
    elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
	
  }
  catch(ex) {
    elSel.add(elOptNew); // IE only
  } 

}

Open in new window

0
Comment
Question by:sitijaafar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 14

Accepted Solution

by:
sam2912 earned 2000 total points
ID: 33732238
You will need to loop through all options in the target select field and check if the options already exist.
var exists = false;
for(i=0; i<elSel.options.length; i++) {
   if(elSel.options[i].value == country) {
      exists = true;
   }
}

if(!exists) {
   try {
      elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
   }
   catch(ex) {
      elSel.add(elOptNew); // IE only
   }
}

Open in new window

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33732245
check this test page
<html>
<head>
<script type="text/javascript">
var allOptionValues = new Array();
function getDistinctOptions()
{
    var alloptions = document.getElementById("mySelect").options;
    for (i=0;i<alloptions.length;i++)
    {
	  // alert(allOptionValues.indexOf(alloptions[i].value));
       if (allOptionValues.indexOf(alloptions[i].value) == -1)
       {
             allOptionValues[ allOptionValues.length ] =  alloptions[i].value;
       }
    }

    alert("distinct options are: " + allOptionValues.join(",") );
}

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(needle) {
        for(var i = 0; i < this.length; i++) {
            if(this[i] === needle) {
                return i;
            }
        }
        return -1;
    };
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option value="Apple">Apple</option>
  <option value="Apple">Apple</option>
  <option value="Orange">Orange</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Banana">Banana</option>
</select>
<br /><br />
<input type="button" onclick="getDistinctOptions()" value="Output all options">
</form>
</body>
</html>

Open in new window

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33732263
i have taken this approach since from your previous questions i knew that you are taking the value from select box setting it in a hidden field and then submitting it.

you can also just check it before adding, as @sam2912 is suggesting
0
 
LVL 14

Expert Comment

by:sam2912
ID: 33732265

function addCountry() {
   var elSel = document.getElementById("learnCountry1");
   var elSel2 = document.getElementById("learnCountry2");
   var alrmsg, country, boolFlag = false;

   if (elSel2.options[0].selected == true) {
      alrmsg = "<%=ScriptAlert("Please select a country to add.")%>";
      alert(alrmsg);
   }
   else {
      boolFlag = true;
      var elOptNew = document.createElement('option');
      elOptNew.text = elSel2.value;
      elOptNew.value = elSel2.value;
      if (elSel.value.length == 0) {
         country = elSel2.value;
      }
      else {
         country = elSel.value + ',' + elSel2.value;
      }
      elSel.value = country;
      
      var exists = false;
      for (i = 0; i < elSel.options.length; i++) {
         if (elSel.options[i].value == country) {
            exists = true;
         }
      }
      if (!exists) {
         try {
            elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
         }
         catch (ex) {
            elSel.add(elOptNew); // IE only
         }
      }
   }
}

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33732275
Something like this?

(Would  help to see the html and then onChange)

You need to call it with
onClick="addCountry(this.form)"

I took the liberty to change the code to only use forms access. It is not good practice to mix DOM and forms access.
Also my code needs the fields to all have name="..." instead or as well as id="..."

<script>
function addCountry(theForm){
  var elSel  = theForm.learnCountry1;
  var elSel2 = theForm.learnCountry2;
  var alrmsg;
  var boolFlag=false;
  var country;

  if(elSel2.selectedIndex <1) { // nothing selected
	  alrmsg="Please select a country to add.";
		alert(alrmsg);
  }
  else{
    boolFlag=true;
    var val = theForm.learnCountry2.value;
    for (var i=0;i<elSel.options.length;i++) {
      if (val == elSel.options[i].value) return; // already there
    }
    country = theForm.learnCountry.value;
    theForm.learnCountry.value = country+((country.length==0)?",":"")+val
    elSel.options[elSel.options.length] = new Option(val,val)
}
</script>

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question