JavaScript - How Do You Move A List Of Names From Textbox To Listbox

Hi there. This is my first thread. I'm completely new to javascript. I want to use dreamweaver with javascript to do a litter project in which I want to move value "Saleman" from drop-menu 1 and value "Billy" from drop-down 2 to a list box. The result should be as follows:

dropdown 1
Manager
Salesman (to be selected)
Cleaner

dropdown 2
Billy (to be selected)
Susan
Ivan

--- [Add button]

Listbox
Salesman - Billy


Thank you for your help.

Cheers
Raymond

Hi. Please help in validating both a drop down list and textbox if the other is not empty alert message will pop-up and vice versa. The validation will be such as follows:
1. If each drop down list is selected and the textbox next to it is not equal to 0 or not empty, DO NOTHING.
2. If drop down list is not selected and textbox is empty DO NOTHING.
Below condition will check if both drop down list and textbox if one of the other is empty then message will appear:
3. If drop down list is selected or index is not equal to 0 AND textbox is empty or equal to 0, alert will pop-up.
4. If drop down list is not selected or index is equal to 0 AND textbox is not empty or not equal to 0, alert will pop-up.

I guess with the condition above will validate each drop down list and textboxes show to each other. Below is my code that I use and it doesn't work. Please help making it work. Of course I didn't include the <script tag> but it is oncluded in the original page. Thanks.

Code:

function validation_OK(iRows,iCols) 
{
	var iRows;
	var iCols;
	var desigamt = new Array(iRows);

  desigamt[0] = Number(document.getElementById('i').value); 
  desigamt[1] = Number(document.getElementById('j').value);
  desigamt[2] = Number(document.getElementById('k').value);
  desigamt[3] = Number(document.getElementById('l').value);
  desigamt[4] = Number(document.getElementById('m').value);
  desigamt[5] = Number(document.getElementById('n').value);
  desigamt[6] = Number(document.getElementById('o').value);
  desigamt[7] = Number(document.getElementById('p').value);
  desigamt[8] = Number(document.getElementById('q').value);
  desigamt[9] = Number(document.getElementById('r').value);

  var i; 
  var j; 
 
  for (i=0; i < iRows; i++)
  {
  	desigamt[i] = new Array(iCols);
  iCols[0] = document.getElementById('I').value;
  iCols[1] = document.getElementById('J').value;
  iCols[2] = document.getElementById('K').value;
  iCols[3] = document.getElementById('L').value;
  iCols[4] = document.getElementById('M').value;
  iCols[5] = document.getElementById('N').value;
  iCols[6] = document.getElementById('O').value;
  iCols[7] = document.getElementById('P').value;
  iCols[8] = document.getElementById('Q').value;
  iCols[9] = document.getElementById('R').value;;
	for (j=0; j < iCols; j++)
	{
		if(a[i][j] = "" || a[i][j] != "")
		{
			return true;
		}
		else
		{
			if (a[i].selectedIndex!=0 && a[j].value == "")
			{
				var answer = confirm("Please enter the amount to designate on the selected partner agency. Clicking the CANCEL button will delete the partner agency selected. Do you want to continue?")
				if (answer)
				{
					a[j].focus();
				}
				else
				{
					a[i].selectedIndex=0;
				}
			}
			else
			{
				var answer = confirm('Please select a partner agency to designate the amount you entered. Clicking the CANCEL button will delete the amount you entered. Do you want to continue?')
				if (answer)
				{
             		a[i].focus();
				}
				else
				{
					a[j].value=0;
				}
			}
		}
	
  	}
  } 
	return (desigamt);
}

Below is my html code. FYI: I have lots of function included and this function I am trying to make it work is one of them. Please help!!!!!
Code:

<table>
      	<tr>
        	<td>
       <select id="I" name="I" size="1" style="overflow-x:scroll; width:380px; " onchange="return validation_OK();"> 
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['I']); ?> value="<?php echo $prompt; ?>"><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       
       </td>
      <td>
       $<input id="i" name="i" class="text" type="text" value="<?php safeEcho($form['i'])?>" style="width:90px;" onChange="CalculateTotal();return validation_OK();" />
       <?php helper_error('i');?> 
       	</td>
       </tr>
       <tr>
       	 <td>
       <select id="J" name="J" size="1" style="overflow-x:scroll; width:380px; " onchange="return validation_J();">
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['J']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       
       </td>
      <td>
       $<input id="j" name="j" class="text" type="text" value="<?php safeEcho($form['j'])?>" style="width:90px;" onChange="CalculateTotal();return validation_J();" />
       <?php helper_error('j');?> 
       	</td>
       </tr>
       <tr>
        	<td>
       <select id="K" name="K" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['K']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="k" name="k" class="text" type="text" value="<?php safeEcho($form['k'])?>" style="width:90px;" onChange="CalculateTotal()" />
       	<?php helper_error('k');?> </td>

       </tr>
       <tr>
        	<td>
       <select id="L" name="L" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['L']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="l" name="l" class="text" type="text" value="<?php safeEcho ($form['l'])?>" style="width:90px;" onChange="CalculateTotal()" />
       	<?php helper_error('l');?> </td>

       </tr>
       <tr>
        	<td>
       <select id="M" name="M" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['M']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="m" name="m" class="text" type="text" value="<?php safeEcho($form['m'])?>" style="width:90px;" onChange="CalculateTotal();" />
       	<?php helper_error('m');?> </td>

       </tr>
       <tr>
        	<td>
       <select id="N" name="N" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['N']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="n" name="n" class="text" type="text" value="<?php safeEcho($form['n'])?>" style="width:90px;" onChange="CalculateTotal();" />
       	<?php helper_error('n');?> </td>

       </tr>
       <tr>
        	<td>
       <select id="O" name="P" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['O']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="o" name="o" class="text" type="text" value="<?php safeEcho($form['o'])?>" style="width:90px;" onChange="CalculateTotal();" />
       	<?php helper_error('o');?> </td>
       </tr>
       <tr>
        	<td>
       <select id="P" name="P" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>

         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['P']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="p" name="p" class="text" type="text" value="<?php safeEcho($form['p'])?>" style="width:90px;" onChange="CalculateTotal();"/>
       	<?php helper_error('p');?> </td>
       </tr>
       <tr>
        	<td>
       <select id="Q" name="Q" size="1" style="overflow-x:scroll; width:380px; " >
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['Q']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="q" name="q" class="text" type="text" value="<?php safeEcho($form['q'])?>" style="width:90px;" onChange="CalculateTotal();" />
       	<?php helper_error('q');?> </td>
       </tr>
       <tr>
        	<td>
       <select id="R" name="R" size="1" style="overflow-x:scroll; width:380px; ">
	<option>Click to select...</option>
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option <?php echo helper_selected($descode == $form['R']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       $<input id="r" name="r" class="text" type="text" value="<?php safeEcho($form['r'])?>" style="width:90px;" onChange="CalculateTotal();" />
       	<?php helper_error('r');?> </td>
       </tr>
            </table>

I hope you can help me. Thanks a lot.

Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be?

Code:

<form name="signup" action="javascript:void(0);" method="post">

<table>
	<tr>
		<td>Date Of Birth:</td>
		<td>
		<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
		<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
		<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
	</tr>
	<tr>
		<td></td>
		<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
	</tr>
</table>
</form>

<script type="text/javascript" language="javascript">
<!--
	document.signup.DOBmonth.value="MM";
	document.signup.DOBday.value="DD";
	document.signup.DOByear.value="YYYY";

function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
	{
		if ('document.signup.DOBmonth.value = ""')
			{
				document.signup.DOBmonth.value = "MM";
				// alert(document.signup.DOBmonth.value);
			}
	}

//-->
</script>

Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code:

var a = document.form.textbox.value;
a = blue;

does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks!

Hi,

I have an application wherein for one page I want to display a Listbox on selection of a radio button.
There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options.

Can anybody pls help me with this as I'm a beginner to JS..


Many thanks
Pooja.

Hi,
Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="script.js"></script>
<body onload="fillCategory();">
<form id="drop_list" name="form1" method="post" action="">
  <label>
    <select name="Category" id="Category">
    </select>
  </label>
</form>
</body>
</html>

and my script.js:
Code:

function fillCategory(){ 
addOption(document.form1.Category, "Fiji", "Fiji", "");
addOption(document.form1.Category, "Australia", "Australia", "");
addOption(document.form1.Category, "New Zealand", "New Zealand", "");
}

I'm probably not allowed to request something like this, but since this is a small amount of code I think I should do it anyways :P

Okey, so I have two listboxes and I want a tickbox to enable one listbox and disable one listbox as you tick a checkbox.

I want one listbox disabled by default and the other enabled and then vice-verca the disable when you tick the box.

If someone could supply me with that code I would be really greatful, butyou don't need to bother with the HTML, I should figure it out from the JS.

Thanks in advance
<3

I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same

Code:

var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
                        traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
                    }

This works fine for me.
But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox.

Can anyone please advice me with an better solution?

Hi there, I have a listbox and an Edit button. The user will need to click on the email address in the listbox before clicking on the button to edit. But then, the email address will be displayed on the prompt box's textbox, and even without editing it, the user can get scot-free.

I would want to remove the email address on the prompt box's textbox, and also to check for null entries. If it is null, it will display an alert message. Else, it will check if it is a valid email address.

My code is as follow:



Code:

function editItem()
{
    var listbox = document.getElementById('listBox'); // listbox control id
    var newValue = lst.value;
    if(newValue != "")
    {
        var newItem = prompt("Enter the new email address",newValue);
        if(newItem == "")
        {   
            alert("Please key in an email address into the textbox.");
            return false;
        }
        
        else
        {
            listbox.options[listbox.selectedIndex] = new Option(newItem,newItem,false,false);
            return false;
            arrTexts = new Array();
            
            validRegExp =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/

            // search email text for regular exp matches
            if (arrTexts.value.search(validRegExp) ==-1 )
            {
              alert('A valid e-mail address is required.\nPlease try again.');
              return false;
            }
            
            else
            {
                for(i=0; i<listbox.length; i++) 
                {
                    arrTexts[i] = lst.options[i].text;
                }

                arrTexts.sort();

                for(i=0; i<listbox.length; i++) 
                {
                    listbox.options[i].text = arrTexts[i];
                    listbox.options[i].value = arrTexts[i];
                }                    
            }
        }
    }
    else
    {
        alert('Select Item From The List To Edit ');
    }
}

HTML



Code:

select id="lstBxEmail" name="listBoxEmail" size="6" style="width: 580px;">                                          <option>figFruit@msn.com</option>                                                                                <option>apple@hotmail.com</option>                                          <option>cherry@yahoo.com</option>                                          <option>banana@hotmail.com</option>                                          <option>elephantApple@ymail.com</option>                                          <option>durian@gmail.com</option>                                                                          </select>   
<select id="listBox" name="listBox" size="3" style="width: 580px;">

 <option>hello@msn.com</option>                                      

<option>wowAmusers@hotmail.com</option>

<option>yrulikethis@yahoo.com</option>                         

 </select>

Hi, I've been working on a company directory page where a listbox called "People" in a form called "people_form" contains 400 employee names. I made the box "multiple" just so I could have it big and easier to find names but I decided a search box would be really useful. I've looked up a few such search scripts but so far the two I've tried haven't worked. The latest one when it's installed on the page, nothing happens when you type characters into it (it's supposed to jump to an entry matching the first few letters). Although if I backspace then it selects EVERY name in the list

Here's the current form with the input tag being the search box (oh the options are populated by java script):

<form name="people_form">

<input type="text" id="realtxt" onkeyup="searchSel()"></input>

<select onchange="display(this.value); return false;" multiple="multiple" id="People" name="People" style="border-style: none; height:198px; width:220px;">
<option value="">Loading</option>
</select></form>



And here's the actual search function in the head of the page in the script tags:

function searchSel() {
var input=document.getElementById('realtxt').value.toLowerCase();
var output=document.getElementById('People').options;
for(var i=0;i<output.length;i++) {
if(output[i].value.indexOf(input)==0){
output[i].selected=true;
}
if(document.forms[0].realtxt.value==''){
output[0].selected=true;
}
}
}


If you know of a script that will work properly I'd appreciate it. For convenience I'm looking for one that jumps to selections inside the listbox as opposed to one where you click a search button and get results somewhere else.

hello

I have a listbox full of names on a PHP website and was wondering if there was a way to grab the value during a double click to bring me to another form to display the name and information?

Hello, I'm trying to fill an array with the values of a listbox from a SQL query but somehow I can only get the first word of each registry

Code:

var arrayX=[];
			
function getValue(){
	var x=document.getElementById("combo_color");
	for (var i = 0; i < x.options.length; i++) {
		if(x[i].value!=''){
			arrayX.push(x[i].value);
		}
	}
}

for example, with the color Green Karanka I only get Green inside the array, the same happens with any color with more than one word, any ideas? Thanks.

Essentially, I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side.

Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox.

I'm very new to JavaScript, so ff someone can provide an example or pseudo code, I would greatly appreciate it.

I have a page with three identical listbox containing items in the same order. When an element is selected from any of the three lists, the script should search for the occurrence of the same element in other two lists and remove them on the fly from all the three lists.

How can this be achieved? A script to achieve this is welcomed.

Hi there, I would like to do the following:

When I click on a button, it will set the item in the listbox to be bold. But this will only happen when the user clicks on the desired item to be bold and presses the button. An alert message will occur when he/she presses the button without clicking on the item, stating that the user will need to click on the item. How shoukld I do it in javascript?