How to start timeline after a from is submited?

1

I am trying to simulate a sign-up form (email capture) in a prototype for user testing. I’d like to start a timeline after the form is submitted. The confirmation would display instructions for the next step in the user flow. I’ve tried onsubmit=myfunction() with
function myfunction(hypeDocument, element, event) {
hypeDocument.startTimelineNamed(‘submit’,
hypeDocument.kDirectionForward);
return false;}. When I submit the form it just reloads the page. Tried using a regular button but then the form has no validation. Which could impact the user test. I am not really a developer. So I am kinda stuck on this.

2

Probably the simplest way is to use a normal Hype button to simulate the submit button.

This example the button switches scene and the on scene load runs javascript to get the values and display them.

Form_Value_timeline.hypetemplate.zip (20.5 KB)

3

Unfortunately that would take away the form validation meaning the user could just click the from and advance without entering an email. Tried testing that before and it effected the test. Tried to validate with JavaScript but I can’t get it to work.

Thanks

4

Sorry I read what you were after wrong… :dizzy_face:

The ‘return false’ should work to prevent the page reloading. But it maybe that because the code before it is wrong it does not get to that part. It just fails and reloads so you do not see the errors.

There are a few ways to go about this.

Normally you can only access the hypeDocument from inside a form. by using code similar to this.

HYPE.documents[‘index’].startTimelineNamed(‘timeline2’, HYPE.documents[‘index’].kDirectionForward)

** index** being the name of the hype document.

When you use preview the name will always be ‘index’

But once exported you need to make sure that the name is what you actually name the export.

We have used many tricks to get around this. Especially when we want to preview and export without writing the name again. Normally this involves code in the Head file.

But I just figured a way of doing it without too much messing around. Now I have not tested this massively and if anyone see an issue with this please speak up

But it occurred to me that when we use HYPE.documents[‘index’] we must be accessing an associated array.
i.e {key: value}

So all we actually need to do is either get the key or value.

New code.

Object.values(HYPE.documents)[0]

This returns the hypeDocument object which is what we are after.

So to further simplify things in the code I push that to a var named hypeDocument and we can then do this.

<form name="form1" onsubmit="var hypeDocument=Object.values(HYPE.documents)[0];hypeDocument.startTimelineNamed('timeline2', hypeDocument.kDirectionForward);return false">

<input type="text" id="email" placeholder="email" name="email" style="font-size: 30px; border-style: none; background-color: lightyellow; color: black; padding: 5px;" size="9" fontsize:30px="">
<input id="submit" name="submit" type="submit" value="Send" class="button">
</form>

I will post this in Tips & tricks

formSubmit_newHypeDocumentAccess.hype.zip (16.4 KB)

1 Like
5

Thanks so much I really appreciate it. I’ll play around with it.

6

This works really great in chrome. However, for some reason in internet explore the page just reloads instead of starting the time line.

Thanks again