Link to home
Start Free TrialLog in
Avatar of MortenWB
MortenWBFlag for Denmark

asked on

Pass dataset from select option to javascript function

Hi Experts,

I attempt to send a dataset from an asp loop populated <OPTION> list to a javascript function using an onChange event in the <SELECT> tag, but get only "undefined" as output. What do I miss? heres my code:

<script type="text/javascript">

function UpdatecatPopup(){

var d = document.getElementById('EqCatList');
var _EqcID = d.options[d.selectedIndex].dataset['EqcID'];
var _des = d.options[d.selectedIndex].dataset['des'];
var _bet = d.options[d.selectedIndex].dataset['bet'];
var _descr = d.options[d.selectedIndex].dataset['descr'];
	
	
	document.getElementById('EditEqcID').innerHTML = _EqcID;
	document.getElementById('EditDesignation').value = _des;
	document.getElementById('EditBetegnelse').value = _bet;
	document.getElementById('EditDescription').value = _descr;
}

</script>

<body>

<select id="EqCatList" name="EqCatList" onChange="UpdatecatPopup();" >
<%
do while not EqCatList.EOF
%>
<option data-EqcID="<%=EqCatList("EqCatID")%>" data-EqCatDesignation="'<%=EqCatList("EqCatDesignation")%>'" data-EqCatBetegnelse="'<%=EqCatList("EqCatBetegnelse")%>'" data-EqCatDescription="'<%=EqCatList("EqCatDescription")%>'" onMouseOver="this.style.cursor='pointer';" >
<%=EqCatList("EqCatDesignation")%>
</option>

<%
EqCatList.movenext
loop
%>
</select>

<div id="EditEqcID" name="EditEqcID" class="EqCatinput" ></div><br />
<input type="text" id="EditDesignation" name="EditDesignation" class="EqCatinput" ><br />
<input type="text" id="EditBetegnelse" name="EditBetegnelse" class="EqCatinput" ><br />
<input type="text" id="EditDescription" name="EditDescription" class="EqCatinput" ><br />

</body>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
do a right click on the page, choose view source, post it here
Avatar of MortenWB
MortenWB
Flag of Denmark image

ASKER

Hi leakim971,

thanks for responding:) here comes:



<head>
<!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">
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:27.0) Gecko/20100101 Firefox/27.0<br>Firefox<br>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>MBRACe Equipment</title>

<link href="MBRACe.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">

function EditList(f){
	document.getElementById('ManageCat').value = f;
	document.forms.listeditor.submit();
}

function UpdatecatPopup(){
//	alert(EqcID + ' ' + des + ' ' + bet + ' ' + descr); 
var d = document.getElementById('EqCatList');
var _EqcID = d.options[d.selectedIndex].dataset['EqcID'];
var _des = d.options[d.selectedIndex].dataset['des'];
var _bet = d.options[d.selectedIndex].dataset['bet'];
var _descr = d.options[d.selectedIndex].dataset['descr'];
	
	
	document.getElementById('EditEqcID').innerHTML = _EqcID;
	document.getElementById('EditDesignation').value = _des;
	document.getElementById('EditBetegnelse').value = _bet;
	document.getElementById('EditDescription').value = _descr;
	document.getElementById('EditEqCat').style.display = 'block';
}

function UpdateEqc(){
	var EqcID, des, bet, descr
	EqcID = document.getElementById('EditEqcID'); 
	des  = document.getElementById('EditDesignation'); 
	bet  = document.getElementById('EditBetegnelse'); 
	descr = document.getElementById('EditDescription'); 
	alert(EqcID.innerHTML + ' ' + des.value + ' ' + bet.value + ' ' + descr.value); 

}
</script>

<form name="listeditor" action="Equipment.asp" method="post">
<input type="hidden" id="ManageCat" name="ManageCat" value="" />
<input type="hidden" id="EditCat" name="EditCat" />
<input type="hidden" id="CompareCat" name="CompareCat" />
<input type="hidden" id="InsertDesignation" name="InsertDesignation" />
<input type="hidden" id="InsertBetegnelse" name="InsertBetegnelse" />
<input type="hidden" id="InsertDescription" name="InsertDescription" />
<input type="hidden" id="DeleteEqCatID" name="DeleteEqCatID" />
</form>




<!-- OPEN RECORDSETS -->


<!-- REQUEST PARAMETERS -->


</head>

<body onLoad="focusEqCatInput();">

<!-- EQUIPMENT CATEGORY UPDATE LIST -->
<div id="UpdateEqCat" style="position:absolute; top:100px; left:20px; display:block;"><h3>Update Equipment Category</h3>

					<select id="EqCatList" name="EqCatList" size="20" class="submitLink" onChange="UpdatecatPopup();" style="text-align:left; width:165px; height:275px; background-color:#CCFFFF;">
						
					<option data-EqcID="27" data-EqCatDesignation="'Adapter'" data-EqCatBetegnelse="'Adapter'" data-EqCatDescription="'Accessorie'" onMouseOver="this.style.cursor='pointer';" >
					Adapter
					</option>

						
					<option data-EqcID="23" data-EqCatDesignation="'Admission'" data-EqCatBetegnelse="'Adgangskort'" data-EqCatDescription="'Access'" onMouseOver="this.style.cursor='pointer';" >
					Admission
					</option>

						
					<option data-EqcID="6" data-EqCatDesignation="'AppleAccessory'" data-EqCatBetegnelse="'AppleTilbehør'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					AppleAccessory
					</option>

						
					<option data-EqcID="5" data-EqCatDesignation="'AppleUnit'" data-EqCatBetegnelse="'AppleEnhed'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					AppleUnit
					</option>

						
					<option data-EqcID="8" data-EqCatDesignation="'AudioMonitor'" data-EqCatBetegnelse="'Højttaler'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					AudioMonitor
					</option>

						
					<option data-EqcID="10" data-EqCatDesignation="'AudioRecorder'" data-EqCatBetegnelse="'Lydoptager'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					AudioRecorder
					</option>

						
					<option data-EqcID="12" data-EqCatDesignation="'AVcombi'" data-EqCatBetegnelse="'AVoptager'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					AVcombi
					</option>

						
					<option data-EqcID="21" data-EqCatDesignation="'BluRayUnit'" data-EqCatBetegnelse="'BluRayEnhed'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					BluRayUnit
					</option>

						
					<option data-EqcID="28" data-EqCatDesignation="'Cable'" data-EqCatBetegnelse="'Kabel'" data-EqCatDescription="'Accessorie'" onMouseOver="this.style.cursor='pointer';" >
					Cable
					</option>

						
					<option data-EqcID="14" data-EqCatDesignation="'CassetteDeck'" data-EqCatBetegnelse="'Casetteudstyr'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					CassetteDeck
					</option>

						
					<option data-EqcID="20" data-EqCatDesignation="'CD-DVDenhed'" data-EqCatBetegnelse="'CD-DVDenhed'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					CD-DVDenhed
					</option>

						
					<option data-EqcID="18" data-EqCatDesignation="'CDunit'" data-EqCatBetegnelse="'CDenhed'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					CDunit
					</option>

						
					<option data-EqcID="7" data-EqCatDesignation="'ComputerMonitor'" data-EqCatBetegnelse="'Computerskærm'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					ComputerMonitor
					</option>

						
					<option data-EqcID="38" data-EqCatDesignation="'CopyPrinter'" data-EqCatBetegnelse="'KopiPrinter'" data-EqCatDescription="'Tool'" onMouseOver="this.style.cursor='pointer';" >
					CopyPrinter
					</option>

						
					<option data-EqcID="32" data-EqCatDesignation="'Dimmer'" data-EqCatBetegnelse="'Lysdæmper'" data-EqCatDescription="'Music'" onMouseOver="this.style.cursor='pointer';" >
					Dimmer
					</option>

						
					<option data-EqcID="39" data-EqCatDesignation="'DiscPrinter'" data-EqCatBetegnelse="'DiskPrinter'" data-EqCatDescription="'Tool'" onMouseOver="this.style.cursor='pointer';" >
					DiscPrinter
					</option>

						
					<option data-EqcID="19" data-EqCatDesignation="'DVDunit'" data-EqCatBetegnelse="'DVDenhed'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					DVDunit
					</option>

						
					<option data-EqcID="42" data-EqCatDesignation="'EffectMachine'" data-EqCatBetegnelse="'Effektmaskine'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					EffectMachine
					</option>

						
					<option data-EqcID="48" data-EqCatDesignation="'Ergonomics'" data-EqCatBetegnelse="'Ergonomi'" data-EqCatDescription="'Mousetrappers, pen tablets aso.'" onMouseOver="this.style.cursor='pointer';" >
					Ergonomics
					</option>

						
					<option data-EqcID="26" data-EqCatDesignation="'HandTool'" data-EqCatBetegnelse="'Håndværktøj'" data-EqCatDescription="'Tool'" onMouseOver="this.style.cursor='pointer';" >
					HandTool
					</option>

						
					<option data-EqcID="36" data-EqCatDesignation="'Inventory'" data-EqCatBetegnelse="'Inventar'" data-EqCatDescription="'Locale'" onMouseOver="this.style.cursor='pointer';" >
					Inventory
					</option>

						
					<option data-EqcID="22" data-EqCatDesignation="'Key'" data-EqCatBetegnelse="'Nøgle'" data-EqCatDescription="'Access'" onMouseOver="this.style.cursor='pointer';" >
					Key
					</option>

						
					<option data-EqcID="25" data-EqCatDesignation="'LabelPrinter'" data-EqCatBetegnelse="'Labelprinter'" data-EqCatDescription="'Tool'" onMouseOver="this.style.cursor='pointer';" >
					LabelPrinter
					</option>

						
					<option data-EqcID="2" data-EqCatDesignation="'Laptop'" data-EqCatBetegnelse="'Bærbar'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					Laptop
					</option>

						
					<option data-EqcID="30" data-EqCatDesignation="'LightingConsole'" data-EqCatBetegnelse="'Lyspult'" data-EqCatDescription="'Stage'" onMouseOver="this.style.cursor='pointer';" >
					LightingConsole
					</option>

						
					<option data-EqcID="3" data-EqCatDesignation="'Mac'" data-EqCatBetegnelse="'Mac'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					Mac
					</option>

						
					<option data-EqcID="4" data-EqCatDesignation="'Macbook'" data-EqCatBetegnelse="'Macbook'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					Macbook
					</option>

						
					<option data-EqcID="31" data-EqCatDesignation="'MixingConsole'" data-EqCatBetegnelse="'Mixerpult'" data-EqCatDescription="'Music'" onMouseOver="this.style.cursor='pointer';" >
					MixingConsole
					</option>

						
					<option data-EqcID="40" data-EqCatDesignation="'MultiFunctionPrinter'" data-EqCatBetegnelse="'MultiFunktionsPrinter'" data-EqCatDescription="'Tool'" onMouseOver="this.style.cursor='pointer';" >
					MultiFunctionPrinter
					</option>

						
					<option data-EqcID="41" data-EqCatDesignation="'MusicInstrument'" data-EqCatBetegnelse="'MusikInstrument'" data-EqCatDescription="'music'" onMouseOver="this.style.cursor='pointer';" >
					MusicInstrument
					</option>

						
					<option data-EqcID="1" data-EqCatDesignation="'PC'" data-EqCatBetegnelse="'PC'" data-EqCatDescription="'IT'" onMouseOver="this.style.cursor='pointer';" >
					PC
					</option>

						
					<option data-EqcID="24" data-EqCatDesignation="'Printer'" data-EqCatBetegnelse="'Printer'" data-EqCatDescription="'Access'" onMouseOver="this.style.cursor='pointer';" >
					Printer
					</option>

						
					<option data-EqcID="35" data-EqCatDesignation="'Projector'" data-EqCatBetegnelse="'Projektor'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					Projector
					</option>

						
					<option data-EqcID="44" data-EqCatDesignation="'Safety'" data-EqCatBetegnelse="'Sikkerhed'" data-EqCatDescription="'Diverse'" onMouseOver="this.style.cursor='pointer';" >
					Safety
					</option>

						
					<option data-EqcID="37" data-EqCatDesignation="'Scanner'" data-EqCatBetegnelse="'Skanner'" data-EqCatDescription="'Tool'" onMouseOver="this.style.cursor='pointer';" >
					Scanner
					</option>

						
					<option data-EqcID="13" data-EqCatDesignation="'SoundCard'" data-EqCatBetegnelse="'Lydkort'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					SoundCard
					</option>

						
					<option data-EqcID="29" data-EqCatDesignation="'StageFixtures'" data-EqCatBetegnelse="'TeaterInventar'" data-EqCatDescription="'Stage'" onMouseOver="this.style.cursor='pointer';" >
					StageFixtures
					</option>

						
					<option data-EqcID="34" data-EqCatDesignation="'StageTechnique'" data-EqCatBetegnelse="'Scenemateriel'" data-EqCatDescription="'Stage'" onMouseOver="this.style.cursor='pointer';" >
					StageTechnique
					</option>

						
					<option data-EqcID="17" data-EqCatDesignation="'TapeRecorder'" data-EqCatBetegnelse="'Båndoptager'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					TapeRecorder
					</option>

						
					<option data-EqcID="33" data-EqCatDesignation="'TheaterLamp'" data-EqCatBetegnelse="'Teaterlampe'" data-EqCatDescription="'Stage'" onMouseOver="this.style.cursor='pointer';" >
					TheaterLamp
					</option>

						
					<option data-EqcID="9" data-EqCatDesignation="'TVmonitor'" data-EqCatBetegnelse="'TVskærm'" data-EqCatDescription="'Audio'" onMouseOver="this.style.cursor='pointer';" >
					TVmonitor
					</option>

						
					<option data-EqcID="15" data-EqCatDesignation="'VHSplayer'" data-EqCatBetegnelse="'VHSafspiller'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					VHSplayer
					</option>

						
					<option data-EqcID="16" data-EqCatDesignation="'VHSrecorder'" data-EqCatBetegnelse="'VHSoptager'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					VHSrecorder
					</option>

						
					<option data-EqcID="11" data-EqCatDesignation="'VideoCam'" data-EqCatBetegnelse="'Videokamera'" data-EqCatDescription="'AV'" onMouseOver="this.style.cursor='pointer';" >
					VideoCam
					</option>

						
                    </select>
</div>

<div id="EditEqCat" style="position:absolute; top:145px; left:220px; display:none;">

<label class="EqCatinput" style="left:-15px; width:100px; text-align:right;">Category ID</label>
<div id="EditEqcID" name="EditEqcID" class="EqCatinput" style="text-align:left; left:100px;	color:#0066FF;">ID</div><br /><br />

<label class="EqCatinput" style="left:-15px; width:100px; text-align:right;">Category designation</label>
<input type="text" id="EditDesignation" name="EditDesignation" class="EqCatinput" onKeyUp="CompareEqc();" style="text-align:left; width:165px;  left:100px; color: #0066FF;
"><br /><br />

<label class="EqCatinput" style="left:-15px; width:100px; text-align:right;">Kategori betegnelse</label>
<input type="text" id="EditBetegnelse" name="EditBetegnelse" class="EqCatinput" style="text-align:left; width:165px; left:100px;"><br /><br />

<label class="EqCatinput" style="left:-15px; width:100px; text-align:right;">Category Description</label>
<input type="text" id="EditDescription" name="EditDescription" class="EqCatinput" style="text-align:left; width:165px; left:100px;"><br /><br />

<input type="button" id="InsertButton" class="EqCatinput" value="Click when ready" onClick="UpdateEqc();" style="text-align:center; width:165px; left:100px; display:block;"><br />


</div>





</body>

</html>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
why do you have the form inside the head section?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of MortenWB
MortenWB
Flag of Denmark image

ASKER

Hi again, leakim971

fantastic! works like a charm, allowing the page to work even in IOS Safari (where onclick within the <option> tag did'nt do the trick as it does in other browsers).

And to your question  "why do you have the form inside the head section? " - well, I use it solely for populating hidden fields with assorted javascript functions - so I figured it was not nessecary in the body - are there any considerations I should know about?

But thanks for speedy help :)

Regards
MortenWB
Avatar of MortenWB
MortenWB
Flag of Denmark image

ASKER

Right on the spot!