Forum Moderators: open
I'd like to get a text input to be updated via a multi select list box, i know how to add elements to the text box with an onchange event but how to communicate the Other way round?
I mean get elements from a listbox selected based on the text box value?
List box style :
<select name="country"....>
<option value="1">blabla</option>
<option value="2">blabla bla</option>
</select>
Text box:
<input name="Tags" value=" country:1 country:2....">
Any Idea would be greately appreciated
Cheers
Gaouzief
You need to loop over the entries, and use the split() function to seperate them out, and then the split function again to split each entry into the country name and the value.
I've included example code below. The first section of code is for the html file, the second is for the script.js file the html refers to.
Hope this helps!
Tom
Index.html:
<html>
<head>
<title>Fill example</title>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form>
<input id="countries" value="England:1 France:2 USA:3">
<br />
<select id="country">
</select>
<br />
<a href="javascript:collectCountryInfo();">Do it!</a>
</select>
</form>
</body>
</html>
Script.js:
var countries = Array();
var values = Array();
function collectCountryInfo()
{
var countriesSelectBox = document.getElementById('country');
var countriesTextBox = document.getElementById('countries');
var entries = countriesTextBox.value.split(' ');
var thisEntry, newOption, optionName;
for ( entry in entries ) {
alert(entries[entry]);
thisEntry = entries[entry].split(':');
newOption = document.createElement('option');
newOption.setAttribute("value", thisEntry[1]);
var optionName = document.createTextNode(thisEntry[0]);
newOption.appendChild(optionName);
countriesSelectBox.appendChild(newOption);
}
}
var resultStr = "";
for(var i = 0; i < selectbox.options.length; i++ )
{
if( selectbox.options[i].selected )
{
// Copy this option
resultStr += (selectbox.options[i].text + ":" + selectbox.options[i].value);
}
}
// Insert resultStr into text box
Here are the main two funnctions triggered by events on the input and list box (onchange, on blur whatever...)
function selectOptionsFromInput(selectID, inputID, keyString){
selectObject = document.getElementById(selectID);
inputObject = document.getElementById(inputID);var splitter = new RegExp("[ ]*[,;][ ]*", "g");
//reset select box options
for(var i = 0; i < selectObject.options.length; i++ ){
selectObject.options[i].selected = false;
}
//get keyword elements
keywords = inputObject.value.split(splitter);
//lookup key in keywords array
for(var i = 0; i < keywords.length; i++ ){
//look for matches
if(keywords[i].match(keyString)){
tagArray = keywords[i].split(':');
//update Listbox
for(var j = 0; j < selectObject.options.length; j++ ){
if (selectObject.options[j].value == tagArray[1]){
selectObject.options[j].selected = true;
}
}
}
}
}
function updateInputFromSelect(selectID, inputID, keyString){
selectObject = document.getElementById(selectID);
inputObject = document.getElementById(inputID);var splitter = new RegExp("[ ]*[,;][ ]*", "g");
//first we need to remove matching tags from input
//get keyword elements into an array
keywords = inputObject.value.split(splitter);
//sanity check to avoid duplicate commas
if (!inputObject.value) keywords = new Array();
cleanKeywords = new Array();
for(var i = 0; i < keywords.length; i++ ){
if (!keywords[i].match(keyString)) cleanKeywords.push(keywords[i]);
}
//Get selected options and attach them to keywords
for(var i = 0; i < selectObject.options.length; i++ ){
if (selectObject.options[i].selected == true){
cleanKeywords.push(keyString + ':' +selectObject.options[i].value);
}
}
//join and write back to input
inputObject.value = cleanKeywords.join(', ');
}
this is usefull in a tag like environment where you have an input box actually holding the data) and lisbox(es) allowing multiple selects to add special tags into the input box
example html
<input name="MainInput" value="Country:3,City:1,normal keyword..."><select name="Country">
<option value="1">USA</option>
<option value="2">CANADA</option>
</select><select name="City">
<option value="1">New York</option>
<option value="2">Boston</option>
</select>
Cheers
