JavaScript - Help With Highlighting/selecting Items In Multiple Select Lists

I need help please. I'm trying to validate when a user selects an item from the equipment select list they must select a reason code as to why they are ordering the item. This must work across all rows. Also the field to the left of the equipment select list should allow the user to key in the item # of the part and the select list automatically gets selected with the part. How the heck do I do this. I tried the functions I have included but they suck! Please help me Tracy
Code:

<script>


function validateReason(){
var tr, i=1;
while(tr=document.getElementById('Child'+(i++))){
var txtV=tr.getElementsByTagName('input')[0].value
var selS=tr.getElementsByTagName('select')[0].selectedIndex;
if(txtV.length>0&&selS==0){alert('If you enter a quantity you must select a reason!');return false}
}
}


function change_uids(uid){
var uids = document.getElementById("uids");
for (var i=0; i<uids.options.length; i++){
if (uids.options[i].value == uid.value){
uids.options[i].selected = true;
break;
}
}
}


</script>
<form method="POST" onsubmit="return validateReason(this) ;" action="" name="theForm" >
<table>
<tr id='Child1'>
<td><input type = 'text' MAXLENGTH='3' 
style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
<td><input type = 'text' MAXLENGTH='6' 
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td> <td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
<tr id='Child2'>
<td><input type = 'text' MAXLENGTH='3' 
style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
<td><input type = 'text' MAXLENGTH='6' 
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='num[]' ></td>
<td> 
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td> <td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
<tr id='Child3'>
<td><input type = 'text' MAXLENGTH='3' 
style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
<td><input type = 'text' MAXLENGTH='6' 
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td>
<td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
</table>
<input type="submit" value="SUBMIT" name="submit">
</form>

I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out.

Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.

Here's the code I've got for the Javascript:
Code:

function typeoflisting() {

	var selectform = document.getElementById('propertytype');
	
	if (selectform.options[selectedIndex].value == "sell") {
		document.getElementById('per_week').style.display = 'none';
		document.getElementById('bond').style.display = 'none';
	}
	else {
		document.getElementById('per_week').style.display = 'block';
		document.getElementById('bond').style.display = 'block';
	}	
}

Here's the <select> form:
Code:

<select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()">	
	<option value="lease">I'd like to lease a property to tenants</option>
	<option value="sell">I'd like to sell a property</option>
	<option value="share">I'd like to share a property</option>
</select>

And here's the first div I'm attempting to hide:
Code:

<div id="per_week" style="float: left;"> per week</div>

And the second div I'm attempting to hide:
Code:

<div style="float: left; padding: 20px 20px 0px 0px;" id="bond">
<h3>Bond</h3>
<input type="text" class="text" value="$"/>
</div>

Could anyone please tell me what I'm doing wrong?

Hey guys. I need little bit of help which i know it will be piece of cake for you.

In emp_rota.php , i want the user to select multiple dates (through a calendar) which will be fetched in the php in the next page. everything works except that the calendar script works only on DATE1, when user clicks to add another date then though everything works , except the calendar doesnt come up. help MEE !!

P.s. i am attaching the whole script along with this

http://www.mediafire.com/?ayz7mpiauba4dya

Dependable dropdown lists (4 level)

1 Level dropdown list
2 Level dropdown list
3 Level dropdown list
4 Level dropdown list

Every dropdown list is depends on another dropdown list

For example if I select a value from 1 dropdown list then 2 dropdown list will appear. And then I select a value from 2 dropdown list then 3 dropdown list will appear. And if I select a value from 3 dropdown list then 4 dropdown list

Multiple selection will be enable. It means every dropdown list may have hundreds of values. Thus, In this situation of multiple selection of values I analyze that, use of dropdown isn't suitable because if a dropdown value has 500 related values then these 500 values disturb the page design. So, is there any other better solution for it?

I am looking for a way to add multiple items with a single URL to my shopping cart. any ideas?

cheers,

I have a php web page with a list box. I select 4 items in the list and then submit to another php file to do some processing with those selected items.
Then that script calls the original script - here's my question:

Is there anyway to keep the four items selected when the original page is called again? Right now only one of the items is selected. I was thinking if the itemindex is 'remembered' then maybe the other items can be too? Or no?

Thanks

Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help.

Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards.

I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top.

So my first one is this..

1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this:

Code:

<html>
	<head>
		<script language="javascript">
			function generateLogs (form)
			{
				TW_Logger.tickDoc.value = TW_Logger.name.value;
			}
		</script>
	</head>
	<body>
		<form name="TW_Logger">
			<label for="name_id">Name: </label>
			<input type="text" name="name" id="name_id"/><br /><br />
			<label for="logs_id">Ticket Documentation: </label><br />
			<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">       
			</textarea><br /><br />
			<label></label> 
			<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
		</form>
	</body>
</html>

I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks!

I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser.
Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/
implements a tooltip for multiple select drop down menu.Can you modify the code for single select

<html>
<script language="javascript">
function foo()
{
var mainDiv = document.getElementById("my");
var div = document.createElement("div");
for(j=0;j<5;j++)
{
var select = document.createElement("select");
for(i=0;i<5;i++)
{
var option = document.createElement("option");
option.text = "hmm";
select.appendChild(option);
}
div.appendChild(select);
}
mainDiv.appendChild(div);
}

</script>
<body>
<select onchange="foo()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option selected>-----Select------</option>
</select>
<div id="my"></div>
</body>
</html>


I stuck ... but I got the solution
now I want to reset on every selection
?

hi,
i am totally new to JS and was wondering if anyone could just suggest me a JS code, "THAT WOULD SELECT MULTIPLE LINKS ON MOUSE CLICK"

<div id="container">
<ul id="seatplan">
<li class="seat_01 A"><a href="#row_01" title="01A">01A</a></li>
<li class="seat_02 A"><a href="#row_02" title="02B">02A</a></li>
<li class="seat_03 A"><a href="#row_03" title="03C">03A</a></li>
</ul></div>

Presently, i can select ONE.
these codes are assigned to images, if selected they change color. But i just want help on MULTIPLE SELECTION.

thanks

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

Hi,

I am using a multiple select with javascript to update the navigation bar <li> depending on which single option is selected and it's working well.
The only problem however, is when multiple are selected, I want all a class to be added to all the <li> but it's not working.

if (document.getElementById("status_advanced").value == "1"){
$('.moduleTitle').html("<h2>Enquiries</h2><span class='utils'>&nbsp;&nbsp;<a id='create_image' href='index.php?module=AOS_Invoices&amp;action=EditView&amp;return_module=AOS_Invoices&amp;return_ac tion=DetailView' class='utilsLink'><img src='custom/themes/default/images/create-record.gif?v=9FuiS_EWfdVgVhHTU4vK3g' alt='Create'></a><a id='create_link' href='index.php?module=AOS_Invoices&amp;action=EditView&amp;return_module=AOS_Invoices&amp;return_ac tion=DetailView' class='utilsLink'>Create</a></span>");
$("#enquiries-nav").addClass("currentTab");
$("#jobs-nav").removeClass("currentTab");
}
else if (document.getElementById("status_advanced").value == "2"){
$('.moduleTitle').html("<h2>Jobs</h2>");
$("#jobs-nav").addClass("currentTab");
$("#enquiries-nav").removeClass("currentTab");
}
else if (document.getElementById("status_advanced").value == "3"){
$('.moduleTitle').html("<h2>Clearance</h2>");
$("#clearance-nav").addClass("currentTab");
$("#jos-nav").removeClass("currentTab");
}
else if ((document.getElementById("status_advanced").value == "1") && (document.getElementById("status_advanced").value == "2")){
$('.moduleTitle').html("<h2>All</h2>");
$("#enquiries-nav").addClass("currentTab");
$("#jos-nav").addClass("currentTab");
}

Any suggestions?





Reply With Quote




01-20-2015, 01:56 PM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

Suggest you have a select option "All".

Use this example:-


Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form id="InventoryList" method="post" action="">
<select id="SelBranch" class="class1" size="5" multiple="multiple">
<option value="All Branches">All Branches</option>
 <option value="001 London">001 London</option>
 <option value="002 Birmingham">002 Birmingham</option>
 <option value="003 Manchester">003 Manchester</option>
 <option value="004 Nottingham">004 Nottingham</option>
 <option value="005 Bradford">005 Bradford</option>
 <option value="006 Newcastle">006 Newcastle</option>
 </select>

 <input type="button" id ="ViewReport" value="View" class="class1" onclick="GetInventory();">

 </form>

<script type = "text/javascript">
function GetInventory()       {
var sel  = document.getElementById("SelBranch");
var count = 0;
var SelBranchVal = [];
for (x=0; x<sel.length; x++)  {
if (sel[x].selected)    {
SelBranchVal[count] = sel[x].value;
count++;
}
}
alert(SelBranchVal);
}

</script>
</body>
</html>

Quizmaster: Which word for a spring or town with thermal or mineral waters used for drinking or bathing takes its name from
a town in Belgium which is famed for its supposedly curative waters?
Contestant: Volvic

I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated.

Code:

function details(val)
{
	var info = val.split("|");
	
	document.getElementById('num').value = info[0];
	document.getElementById('price').value = info[1];
	document.getElementById('package_name').value = info[2];
}


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>

Hope some one can assist me

Below is my code which works fine.

I need to be able to select more than one of the options at the same time. The code at the moment will only select one option rather than all my options.

Any advice would be great.

<HTML>
<HEAD>
<title>MDT Role and Application Selection Application - Gen-i</title>


<!-- Example of the multiple selections

Sub RunScript
For i = 0 to (Dropdown1.Options.Length - 1)
If (Dropdown1.Options(i).Selected) Then
strComputer = strComputer & Dropdown1.Options(i).Value & vbcrlf
End If
Next
Msgbox strComputer
End Sub
-->



<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}



if (chosen == "1") {
selbox.options[selbox.options.length] = new
Option('Microsoft Project','Microsoft Project selected');
selbox.options[selbox.options.length] = new
Option('Microsoft Visio','Microsoft Visio selected');
selbox.options[selbox.options.length] = new
Option('Cognos Application','Cognos Application selected');
}




if (chosen == "2") {
selbox.options[selbox.options.length] = new
Option('Microsoft Project','Microsoft Project selected');
selbox.options[selbox.options.length] = new
Option('Microsoft Visio','Microsoft Visio selected');
selbox.options[selbox.options.length] = new
Option('Cognos Application','Cognos Application selected');
selbox.options[selbox.options.length] = new
Option('Oracle Discoverer','Oracle Discoverer selected');
selbox.options[selbox.options.length] = new
Option('At Risk 5.55','At Risk 5.55 selected');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new
Option('Microsoft Project','Microsoft Project selected');
selbox.options[selbox.options.length] = new
Option('Microsoft Visio','Microsoft Visio selected');
selbox.options[selbox.options.length] = new
Option('Vulcan 8','Vulcan 8 selected');
selbox.options[selbox.options.length] = new
Option('Autocad Lite 2010 Lite','Autocad Lite 2010 Lite selected');
selbox.options[selbox.options.length] = new
Option('Autocad Lite 2010 Full','Autocad Lite 2010 Full selected');
selbox.options[selbox.options.length] = new
Option('Aquire','Aquire selected');
selbox.options[selbox.options.length] = new
Option('WellCad','WellCad selected');
selbox.options[selbox.options.length] = new
Option('ArcGis','ArcGis selected');
selbox.options[selbox.options.length] = new
Option('QuickMap','QuickMap selected');
}
}
</script>

<HTA:APPLICATION
border="thin"
borderStyle="normal"
caption="yes"
maximizeButton="yes"
minimizeButton="yes"
showInTaskbar="no"
innerBorder="yes"
navigable="yes"
scroll="auto"
scrollFlat="yes" />

<script LANGUAGE="VBScript">
Sub Window_onLoad
window.resizeTo 600,720
End Sub
</script>

</head>

<body style="{background-image:url('bg2.jpg'); background-repeat:no-repeat;}">
<CENTER>
<img src="logo.gif" />
<h2 style="font-size: 12pt; font-family: Arial; color: #000">Please select the required role - Gen-i</h2>
<div style="font-size: 10pt; font-family: Arial; color: #298FFF">
<form name="myform"><div align="center">
<b>Select a Role:</b> <br /> <select name="optone" size="1"
onchange="setOptions(document.myform.optone.options
[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">General</option>
<option value="2">Technical</option>
<option value="3">Finance</option>
</select>
<br /><br /><b>Select Applications:</b> <br />
<select name="opttwo" size="10" multiple>
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<p></p>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options
[document.myform.opttwo.selectedIndex].value);">
</div></form>
</body>
</html>