JS jump to another scene in the same document

Using JavaScript with Hype
1

I have an issue with simple form in Hype.
I’d like to redirect the user after pressing Enter on keyboard (instead of Submit button) to another scene in the same Hype document.
Also I’d like to store the value from the form and use it later.

I explained my issue better in the attached Hype document. I’d really appreciate if you could take a look at it.

website.hype.zip (40.0 KB)

Thanks!

2

There’s a few things to note:

  • when you make a function in Hype, it is not added to the global scope. So you can’t just call toHello() and have it work. You need a reference to the hypeDocument, and then can call hypeDocument.functions().toHello().
  • secondarily to this, functions defined in Hype like your toHello() expects three arguments, a hypeDocument, element, and event. Thus if you plan to use the hypeDocument element in your code you need to supply it.
  • In the context of your Inner HTML, you don’t have easy access to the hypeDocument. The easiest way would be to assign it to a global from some place that you do have it, like the on scene load handler. Then you can have access later. Alternatively it is defined in HYPE.documents, but is keyed on the document name. This makes it a little hard since previews are always called “index” (HYPE.documents["index"].functions().toHello()) but exported documents will be named based on your export filename.
  • If you want a form to not go to a URL, you need to use the current event’s preventDefault() method.

So given all of that, I would suggest that the easiest way to do this is to give your form an ID, and then in an On Scene Load handler, just setup the onsubmit handler for it.

So the inner HTML would look like:

<form id="nameForm">
	<input type="text" value="" placeholder="r00t" id="yourName">
</form>

And then javascript in an On Scene Load handler would just need to be:

	var nameForm = hypeDocument.getElementById("nameForm");
	nameForm.onsubmit = (function (e) {
		e.preventDefault();
		hypeDocument.showSceneNamed("hello");
	});

In this scenario, you do not need toHello() anymore, or you could replace the showSceneNamed call in onsubmit with a call to that emthod.

3 Likes
3

Thanks so much @jonathan!

1 Like