Hitting 'next' button to change page is working erratically

I am getting reports from my users that sometimes the next button in the page break does not function and they cannot get on to the next page.  There are different devices involved: Ipad, Windows7 PC.  

Hi,

I'm sorry to know that. Please try re-embedding the form using our iFrame method: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. If the problem is caused by a script conflict, our iFrame method would help you fix it. A script conflict happens when you embed your form using the default Javascript Method. 

If the issue persists after changing your embed method, please let us know here and don't forget to include the website URL so we can test it.

Thank you!

Thanks Welvin, but this was unsuccessful.  I did have the form embedded as Java.   I replaced it with the iFrame code, and the first 3 pages of the form were fine.  However, page 4 of the form cut off at item 12 of a list of 18, with no way to access the other items or move to the next page.

I have put javascript back as that worked for some, this won't work for anyone.

Any thoughts?

http://form.jotformeu.com/form/40945693057362

Hi,

Thank you for updating us.

Now, you should restore back the iFrame method that was recommended by my colleague Welvin. The fact that you did not see all of the items on the page 4 confirms that there are some script conflicts because the default iFrame embed method adjusts its size according to the jotform, but requires that second <script> </script> part that is outside of the iframe and is in turn susceptible to conflicts.

What I would suggest is to do next:

Grab the iFrame code. Remove the <script></script> part so that you only have <iframe></iframe> and then set the height of iframe to 825px (this is only a guess since we must see it on the website to know exact size).

OK, so to demonstrate:

original iframe embed code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40945693057362" frameborder="0" style="width:100%; height:350px; border:none;" scrolling="no"></iframe>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

We will now strip the <script></script> part so we stay with <iframe></iframe> part only, like so:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40945693057362" frameborder="0" style="width:100%; height:350px; border:none;" scrolling="no"></iframe>

OK, so this is what we want, now just to adjust the height to 825px:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/40945693057362" frameborder="0" style="width:100%; height:825px; border:none;" scrolling="no"></iframe>

That is it.

If the jotform has more space than needed on the 4th page, or if it is missing a few pixels, just alter the height accordingly and re-embed your jotform.

This should work for you now, but do let us know how it goes.

Best Regards,
Ben

Thanks Ben.  That worked a treat.

We are glad that the solution provided by our colleague worked for you. It's our pleasure to assist you. 

Please do not hesitate to get in touch with us if you have any other questions. We will be happy to help.

Thank you for using JotForm.