Link to home
Create AccountLog 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

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

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
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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
Right on the spot!