Linking from within a form element (please help)

1

I would like to make a drop down list from within a form (option) that is linkable to my scene.

THIS WORKS for normal web links - however I want to link:

<form name="jump">
<select name="menu">
<option value="#">List --></option>
<option value="http://www.macrumors.com">Macrumors</option>
<option value="http://www.apple.com">Apple</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>

however I want to link to my scene pages in hype - can’t figure this out:-(

<form name="jump">
<select name="menu">
<option value="#">List --></option>
<option value="WHAT CODE GOES HERE?">Dogs</option>
<option value="WHAT CODE GOES HERE?">Cats</option>
<option value="WHAT CODE GOES HERE?">Birds</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>

My scene names(pages)
Dogs
Cats
Birds

I got it to work in a menu using this code… but I like to do this in a from linking to my scenes.

Putting this in my header

<head>
	 <script>


  function myCallback(hypeDocument, element, event) {
    window.myhypedocument = hypeDocument;
  }
  
  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
  
 </script>

</head>

This works this way

<div class="scrollmenu"> 
  <a href="#" onclick="window.myhypedocument.showSceneNamed('Dog');">Dog</a>
  <a href="#" onclick="window.myhypedocument.showSceneNamed('Cat');">Cat</a>
</div>

But I want to do this via a form with the <options>.

1 Like
2

You are half way there…

<form name="jump">
<select name="menu">
<option value="#">List --&gt;</option>
<option value="Dogs">Dogs</option>
<option value="Cats">Cats</option>
<option value="Birds">Birds</option>
</select>
 
<input type="button" onclick="window.myhypedocument.showSceneNamed(document.jump.menu.options[document.jump.menu.selectedIndex].value);" value="GO">
</form>

formJump.hype.zip (44.7 KB)

3 Likes
3

you may even skip the submit-button by listening for onchange of the menu-element (run it on sceneload)…

menu.onchange =  function(e){
hypeDocument.showSceneNamed(e.target.value)
	}
2 Likes