JavaScript - Highlighting Multiple Options In A Multiselect Box

Hello,
I have a regular expression that returns multiple matches. For e.g. If the user types a string "980ee,34223,werw" in a textbox, the regular expression match returns "ee" and "werw".
I would like to highlight both "ee" and "werw" in the textbox. How can I achieve this?
Thank you.

I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box.

So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists.

My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box.

I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked.

I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list.

I can post code if it is helpful.

Thanks,
Taylor

Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some.

After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have.

So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose.

Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea.

Code:

<label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
            <select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, matchtype FROM matchtypes';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
                }
                ?>
            </select>

<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, `character` FROM characters ORDER BY `character`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
                }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>

Hello! coding forums pals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next row down after the previous row has been filled? basically what logic and programming structure do I need in my function that will know when the first row in the invoice is filled. I'm struggling at the part where when the "add to invoice" button is clicked. some data is added to the invoice, and if the user wants to book another trip, the second trip should be appended in the second row of the invoice. what is happening in mine is that whenever I book another trip, the first one gets overwritten when in fact it should be left intact and the data should get appended in the next row down.
Code:

<html>
<head>
</head>
<script type="text/javascript">
function addit()
{
	
	var f = document.myform;
	var cost = 0;
	var percentage = 0;
	
	if(f.destination.selectedIndex == -1)
	{
		alert("please select a trip from the list");
		return false;
	}
		
	if((f.travelers[0].checked == false) && (f.travelers[1].checked == false) && (f.travelers[2].checked == false) && (f.travelers[3].checked == false) && (f.travelers[4].checked == false) && (f.travelers[5].checked == false))
	{
		alert("please specify the number of people traveling")
		return false;
	}
		
	if(f.accomodation.selectedIndex == -1)
	{
	 alert("please specify your place of stay")
	 return false;
	}
	
	switch(f.destination.selectedIndex)
	{
		case 0:
			document.myform.trip1.value="Mt. Kilimanjaro";
			cost="2600";
			break;
		case 1:
			document.myform.trip1.value="Denali";
			cost="2000";
			break;
		case 2:
			document.myform.trip1.value="Mt. Everest";
			cost="3500";
			break;
		case 3:
			document.myform.trip1.value="Maui";
			cost="2700";
			break;
		case 4:
			document.myform.trip1.value="Machu-Pichu";
			cost="3100";
			break;
	}
	for(i=0;i<f.travelers.length;i++)
	{
	if(f.travelers[i].checked)
	f.num1.value=f.travelers[i].value;
	}
	
	f.cost1.value=parseInt(f.num1.value) * parseInt(cost);


	switch(document.myform.accomodation.selectedIndex)
	{
		case 0:
			percentage="0.00";
			break;
		case 1:
			percentage="0.05";
			break;
		case 2:
			percentage="0.15";
			break;
		case 3:
			percentage="0.22";
			break;
	}
	
	f.accom1.value=f.cost1.value * parseFloat(percentage);
	
	f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value);
}

function deleteit()


{
	var f = document.myform;
	var txtbox = document.getElementsByClassName("text");
	var rad = document.getElementsByClassName("rad");
	
	f.destination.selectedIndex=-1;
	f.accomodation.selectedIndex=-1;
	
	for(j=0;j<txtbox.length;j++)
	{
		txtbox[j].value="";
	}
	
	for(x=0;x<rad.length;x++)
	{
		rad[x].checked=false;
	}
}

function submitform()
{
	document.myform.submit();
}
</script>
<body>
<form name="myform">
<table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0">
<tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr>
<tr><td align="center"><select name="destination" id="Select1" size="4">
	<option>Mt. Kilimanjaro</option>
	<option>Denali</option>
	<option>Mt. Everest</option>
	<option>Maui</option>
	<option>Machu-Pichu</option>
</select></td>
<td align="center">1<input type="radio" name="travelers" value="1" class="rad"></br>2<input type="radio" name="travelers" value="2" class="rad"/></br>3<input type="radio" name="travelers" value="3" class="rad"/></br>4<input type="radio" name="travelers" value="4" class="rad"/></br>5<input type="radio" name="travelers" value="5" class="rad"/></br>6<input type="radio" name="travelers" value="6" class="rad"/></td>
<td align="center">
<select name="accomodation" id="Select2" size="3">
<option value=0>Tents</option>
	<option>Yurts</option>
	<option>Hostels</option>
	<option>Hotels</option>
</select></td>
<td><table width="90%" align="center" cellpadding="2">
<tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr>
<tr><td><input type="text" name="trip1" class="text" readonly></td><td><input type="text" name="num1" size="1" class="text" readonly></td><td><input type="text" name="cost1" class="text" readonly></td><td><input type="text" name="accom1" class="text"  readonly></td><td><input type="text" name="total1" class="text"  readonly></td></tr>
<tr><td><input type="text" name="trip2" class="text" readonly></td><td><input type="text" name="num2" size="1" class="text" readonly></td><td><input type="text" name="cost2" class="text"  readonly></td><td><input type="text" name="accom2" class="text"  readonly></td><td><input type="text" name="total2" class="text"  readonly></td></tr>
<tr><td><input type="text" name="trip3" class="text" readonly></td><td><input type="text" name="num3" size="1" class="text" readonly></td><td><input type="text" name="cost3" class="text"  readonly></td><td><input type="text" name="accom3" class="text"  readonly></td><td><input type="text" name="total3" class="text"  readonly></td></tr>
<tr><td><input type="text" name="trip4" class="text" readonly></td><td><input type="text" name="num4" size="1" class="text" readonly></td><td><input type="text" name="cost4" class="text"  readonly></td><td><input type="text" name="accom4" class="text"  readonly></td><td><input type="text" name="total4" class="text"  readonly></td></tr>
</table></td></tr>
</tr>
<tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear" onclick="deleteit()"/></td><td><input type="button" value="Buy Now" onclick="submitform()"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr>
</table></form>
</body>
</html>

I am creating a recipe cookbook program. On the main page, I have a top frame (named "nav") and bottom frame (named "recipe_layout"). There is a listbox in the BOTTOM frame containing the recipe names, and a "View Recipe" button in the TOP frame. The user would select a recipe and then click the button to view the recipe in the bottom frame. I believe that I need to insert the code to make this work with the button (?), and I think my problem is that I'm not accessing the bottom frame correctly:

CURRENT CODE FOR LISTBOX IN BOTTOM FRAME

<form name="recipe_form" style="margin-top:30">
<select name="name_dropdown" multiple size="2">
<option selected="selected">Search byName</option>
<option value="applepie.html">Apple Pie</option>

CURRENT CODE FOR BUTTON IN TOP FRAME

<input type="button" value="View Recipe" onclick="parent.recipe_layout.location.href='recipe_form.name_dropdown.options[selectedIndex].value'">

Thank you so much in advance!!