List and Text Boxes

@RedheadFeb 11.2004

Hi There

I was just wondering if anyone knows how to do this:

I want a list box with several items such as cat, dog, bird, fish and other.

I want a image of an arrow pointing to a new text box to the right and an image of an arrow pointing up and down and an arrow pointing to the left

I want a new text box to the right.

The idea is so the user can use the arrows to go up and down throught the list of pets. and and be able to click the arrow to the right to move cat over to select cat.

I also want to be able to put cat back..

Does this make since. I’m sure you have all seen something lke this i’m just really stuck on how to do this..

Please Help Me…?

to post a comment

JavaScript

3 Comments(s) _↴

@SamFeb 11.2004 — #
I was just wondering if anyone knows how to do this:
[/quote]
Yes

I want a list box with several items such as cat, dog, bird, fish and other.

I want a image of an arrow pointing to a new text box to the right and an image of an arrow pointing up and down and an arrow pointing to the left

I want a new text box to the right.

The idea is so the user can use the arrows to go up and down throught the list of pets. and and be able to click the arrow to the right to move cat over to select cat.

I also want to be able to put cat back..
[/quote]

Perhaps you could show us what you have attempted so far, so we don't assume that you just want some free homework assignments

@RedheadauthorFeb 11.2004 — #Here is my code:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<FORM ACTION="" METHOD="POST" ENCTYPE="application/x-www-form-urlencoded" NAME="WWVM267913">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="22%"><select name="FRM_CONFIGURATOR17DEC.DEFAULT.OPTIONS.01" size="13" onChange="fillList1(this.form); return false;">

<option value="">------- 1. Choose Your -------

<option value="CB&Cheese On Bottom#CT&Cheese On Top#EC&Easy On The Cheese#ES&Easy On The Sauce#YB&Extra Sauce On The Bottom#YT&Extra Sauce On The Top#L&Lightly Done#NC&No Cheese#NS&No Sauce#W&Well Done#WW&Whole Wheat Dough">Cooking

Instructions

<option value="SQ&BBQ Sauce Instead of Pizza Sauce#CP&Chili Peppers#GA&Garlic Powder#HS&Hot Sauce#MU&Mustard#OL&Olive Oil#OR&Oregano#RG&Roasted Garlic Oil#TK&Thick Crust#TN&Thin Crust#SZ&Zesty Sauce Instead of Pizza Sauce">Free

Stuff

<option value="AN&Anchovies#AS&Asparagus#BS&Bacon Strips#B&Bacon Topping#BO&Black Olives#BR&Broccoli#CO&Caramelized Onions#CH&Chicken#E&Eggplant#X&Extra Cheese#XC&Extreme Cheese#FC&Feta Cheese#FM&Fresh Mushrooms#GC&Goat Cheese#GO&Green Olives#GP&Green Peppers#GB&Ground Beef#HP&Hot Peppers#C&Italian Ham#IS&Italian Sausage#JP&Jalapeno Pepper#MM&Montreal Smoked Meat#P&Pepperoni#PI&Pineapple#O&Red Onions#GR&Roasted Garlic#RP&Roasted Red Peppers#SA&Salami#SP&Sauce Pesto#ST&Sliced Tomatoes#S&Spinach#SU&Sun Dried Tomatoes#ZU&Zucchini">Pizza

Toppings </select></td>

<td width="16%"><table width="66%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan="2"><div align="center"><img src="images/up.jpg" width="50" height="50">

</div>

<div align="right"></div></td>

</tr>

<tr>

<td width="25%"><img src="images/back.jpg" width="50" height="50"></td>

<td width="34%"><img src="images/forward.jpg" width="50" height="50"></td>

</tr>

<tr>

<td colspan="2"><div align="center"><img src="images/down.jpg" width="50" height="50"></div></td>

</tr>

</table></td>

<td width="26%"><select name="FRM_CONFIGURATOR17DEC.DEFAULT.AVAILABLE.01" size="13">

<option value="">------- 2. Available Options ------- </select></td>

<td width="22%"><table width="66%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan="2"><div align="center"><img src="images/up.jpg" width="50" height="50">

</div>

<div align="right"></div></td>

</tr>

<tr>

<td width="25%"><img src="images/back.jpg" width="50" height="50"></td>

<td width="34%"><img src="images/forward.jpg" width="50" height="50"></td>

</tr>

<tr>

<td colspan="2"><div align="center"><img src="images/down.jpg" width="50" height="50"></div></td>

</tr>

</table></td>

<td width="14%"><select name="FRM_CONFIGURATOR17DEC.DEFAULT.SELECTED.01" size="13">

<option value="">------- 3. Your Selections ------- </select></td>

</tr>

<tr>

<td colspan="5"><font style="font-family:Arial; color:#FA3C32; font-size:9pt; " ><b>To Add<input type="BUTTON" name="FRM_CONFIGURATOR17DEC.DEFAULT.RIGHT_HALF.01" value="Right Half" onClick="move(this.form, '/', ' Right Half');return false; do_event(this.form,this.name,1,'ON_CLICK','');">

<input type="BUTTON" name="FRM_CONFIGURATOR17DEC.DEFAULT.LEFT_HALF.01" value="Left Half" onClick="move(this.form, '$', ' Left Half'); return false; do_event(this.form,this.name,1,'ON_CLICK','');">

<input type="BUTTON" name="FRM_CONFIGURATOR17DEC.DEFAULT.WHOLE.01" value="Whole" onClick="move(this.form, '.', '');

return false; do_event(this.form,this.name,1,'ON_CLICK','');">

</b></font></td>

</tr>

<tr>

<td colspan="5"><font style="font-family:Arial; color:#FA3C32; font-size:9pt; " ><b>To Remove </b> <b>

<input type="BUTTON" name="FRM_CONFIGURATOR17DEC.DEFAULT.REMOVE.01" value="Remove" onClick="remove(this.form);return false; do_event(this.form,this.name,1,'ON_CLICK','');">

</b></font></td>

</tr>

</table>

</FORM>



<SCRIPT LANGUAGE="JavaScript">

document.forms[0].elements[30].style.backgroundColor="#FFEEEE";

document.forms[0].elements[30].style.color="black";

document.forms[0].elements[30].style.fontWeight="normal";

document.forms[0].elements[25].style.backgroundColor="#FFEEEE";

document.forms[0].elements[25].style.color="black";

document.forms[0].elements[25].style.fontWeight="normal";

document.forms[0].elements[26].style.backgroundColor="#FFEEEE";

document.forms[0].elements[26].style.color="black";

document.forms[0].elements[26].style.fontWeight="normal";

document.forms[0].elements[27].style.backgroundColor="#FFEEEE";

document.forms[0].elements[27].style.color="black";

document.forms[0].elements[27].style.fontWeight="normal";

document.forms[0].elements[28].style.backgroundColor="#FFEEEE";

document.forms[0].elements[28].style.color="black";

document.forms[0].elements[28].style.fontWeight="normal";

function getElementNum(elementName,form) {

for (var i=0;i<100;i++) {

var nm = form.elements[i].name.split(".");

if (nm[2] == elementName) {

break;

}

}

return i;

}

function fillList1(form) {

var oBoxElmtNum = getElementNum("OPTIONS",form);

var aBoxElmtNum = getElementNum("AVAILABLE",form);

if (form.elements[oBoxElmtNum].selectedIndex == 0) {

ClearOptions(form.elements[aBoxElmtNum]);

} else {

var si = form.elements[oBoxElmtNum].selectedIndex;

var fldstr = form.elements[oBoxElmtNum].options[si].value.split("#");

var elmtstr;

var no;

ClearOptions(form.elements[aBoxElmtNum]);

for(var k=0; k< fldstr.length;k++){

elmtstr = fldstr[k].split("&");

no = new Option();

no.value = elmtstr[0];

no.text = elmtstr[1];

form.elements[aBoxElmtNum].options[k+1] = no;

}

}

}

function move(form, signChar, label) {

var fBoxElmtNum = getElementNum("AVAILABLE",form);

var tBoxElmtNum = getElementNum("SELECTED",form);

if (form.elements[fBoxElmtNum].selectedIndex == 0) {
   alert("Please select item(s) from Available Options");
  } else {
 
   for(var i=0; i<form.elements[fBoxElmtNum].options.length; i++) {
   if(form.elements[fBoxElmtNum].options[i].selected && form.elements[fBoxElmtNum].options[i].value != "t") {
   var no = new Option();
   no.value = signChar+form.elements[fBoxElmtNum].options[i].value + "#" + form.elements[fBoxElmtNum].options[i].text;
   no.text = form.elements[fBoxElmtNum].options[i].text+label;
   form.elements[tBoxElmtNum].options[form.elements[tBoxElmtNum].options.length] = no;
   }
   }
  }

}

function remove(form) {

var tBoxElmtNum = getElementNum("SELECTED",form);

if (form.elements[tBoxElmtNum].selectedIndex == 0) {
   alert("Please select item(s) from Your Selections");
  } else {
   for(var i=1; i<form.elements[tBoxElmtNum].options.length; i++) {
   if(form.elements[tBoxElmtNum].options[i].selected) {
   form.elements[tBoxElmtNum].options[i].value = "";
   form.elements[tBoxElmtNum].options[i].text = "";
   }
   }
   BumpUp(form.elements[tBoxElmtNum]);
  }

}

function BumpUp(box) {

for(var i=1; i<box.options.length; i++) {

if(box.options[i].value == "") {

for(var j=i; j<box.options.length-1; j++) {

box.options[j].value = box.options[j+1].value;

box.options[j].text = box.options[j+1].text;

}

var ln = i;

break;

}

}

if(ln < box.options.length) {

box.options.length -= 1;

BumpUp(box);

}

}

function ClearOptions(OptionList) {

// Always clear an option list from the last entry to the first

for (x = OptionList.length; x >= 1; x--) {

OptionList[x] = null;

}

}

function createList(form) {

var hListElmtNum = getElementNum("ERROR_MESSAGE",form);

var sBoxElmtNum = getElementNum("SELECTED",form);

var str = new String();

for (var x = 1; x < form.elements[sBoxElmtNum].options.length; x++) {

str = str + form.elements[sBoxElmtNum].options[x].value + "@";

}

form.elements[hListElmtNum].value = str;

}

// new code

var slci = 0;

var emtNo = getElementNum("OPTIONS", document.forms[0]);

slci = document.forms[0].elements[emtNo].selectedIndex;

if (slci != -1) {

document.forms[0].elements[emtNo].options[slci].selected = true;

fillList1(document.forms[0]);

}

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

{

document.forms[0].elements[14].style.visibility="hidden";

document.forms[0].elements[24].style.visibility="hidden";

document.forms[0].elements[29].style.visibility="hidden";

document.forms[0].elements[33].style.visibility="hidden";

}

</SCRIPT>

This works and i'm just not sure how to get time image to work and how to have the list box automaticaled selected.

@RedheadauthorFeb 11.2004 — #
Perhaps you could show us what you have attempted so far, so we don't assume that you just want some free homework assignments [/QUOTE]

Well I guess there is nothing i can say to prove to you i'm NOT A STUDENT LOOKING FOR SOMEONE TO DO MY HOMEWORK! I dont know if that happens alot i'm dont have a clue. All i can tell you is that i'm someone trying to learn on my own and thougth this was a great spot to ask for help and advice.

Anyway last night i was changing my ideas around and after reviewing my notes and etc i chose to change it a bit.. My favorite food is pizza and was wondering how they would create boxes for ordering your selection on pizza (THIS IS NOT A SCHOOL ASSIGNMENT) I do this so i can learn...

Also in #JavaScript _↴

Y2K date problem '&' symbol or better way?noob question

Success!

Help @Redhead spread the word by sharing this article on Twitter...

Tweet This

List and Text Boxes

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

List and Text Boxes

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴