Form wizard click next auto scroll to top of page năm 2024

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confindential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

I am working on a website where we're trying to develop quality of life questionnaire for patients. This question as usually quite long often containing more than 40 questions. one of the ways in which responder burden can be decreased is by allowing the wizard page to automatically advance to the next question once all the required questions have been answered.

I understand JavaScript can be used to achieve this functionality. However the users I am looking at will be doctors who will have limited ability to code such JavaScript. hence I would like this to be either a module or an option with the webform module.

The function I am looking at is like this. 1. Person creates webform with wizard pages. Each wizard page may have one or more questions. Usually for our purposes we prefer that a single question is presented to the user in one page. 2. Selects an option in the submit button section which makes the next button move to next page (? With ajax) once all required questions are or fillled and answer is validated and any conditional fields displayed. 3. User can move back if he/she desires to change the answer. 4. In pages with a mix of required and non required questions this behaviour is not triggered.

Support from Acquia helps fund testing for Drupal

Form wizard click next auto scroll to top of page năm 2024

I am trying to get my form to go to the top when the next part of the form is re-rendered. For some reason window.scrollTo(0, 0), doesn't work.

Please advise...

What is expected?

Scroll to the top

What is actually happening?

Not Scrolling to the top. The form is displayed on the position which the next button was clicked.


Solution

Additional comments

The text was updated successfully, but these errors were encountered:

Hi Manu,

To simulate the problem in fiddle, i have to upload the whole library i bought.

It is apparently a behavior exhibited by the [Wizard component]. You can recreate this by effect by adding 10 [text input] in [/Forms/WizardSteps/Step1.js]. After which, when you click the next button after filling the first page, the form will be displayed outside the visible area and I have to manually scroll up.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

If I add an anchor at the point of the form, then off course this works: http://smvhs.org/building-fund

form

Where do I need to hack the code such that URLs of this form,

http://smvhs.org/building-fund?chronoform=buildingFund&event=submit

Become:

http://smvhs.org/building-fund

form?chronoform=buildingFund&event=submit

thanks, JC

I tried the fix shown in this post: http://www.chronoengine.com/forums/posts/f5/t90853.html

I added this code to a Load Javascript action in the On Submit:

  
window.addEvent('domready', function() {  
$('chonoform_form_name').scrollIntoView();  
});  

This didn't work.

JC

Forgot to mention... in the code above, I replaced "form_name" with the form name. This javascript appears to have no affect on submit.

JC

Hi jcalvert,

Try it onLoad, first before the Html render and if won't work, after it.

If either not work, we'll something else😉

BN

Hello again JC,

I just found this FAQ, take a look, looks exactly what you need😉

BN

in v5 you may use this code in a "load javascript" action:

  
jQuery(document).ready(function($){  
$('html, body').animate({  
        scrollTop: $("
# form_id_here").offset().top  
    }, 1000);  
});  

Regards, Max

Max ChronoForms developer... Did you try ChronoMyAdmin for managing your Joomla database tables ?

FYI, I am using verson 5.0 RC4.1.

Max: I tried your code and can't get it to work. First I tried in the Load Javascript as first action in On Submit. Then I tried same in On Load. Where you have "

form_id_here" I tried both the form name and the form's numeric id. For both, I kept the "#" as the prefix.

Addition of this code didn't change the behavior after the submit – the browser still is showing the top of the page and doesn't scroll down.

thanks, JC

Hi JC,

Did you take a look on the Faq I had suggest?

BN

Hi JC,

You can see the form ID by looking at the form HTML - it is inside the

tag and normally is set to chronoform-form_name so it is not the same as the form name, nor the ID in the Forms Manager. So Max's code would be like
jQuery(document).ready(function($){  
$('html, body').animate({  
        scrollTop: $("
# chronoform-form_name").offset().top  
    }, 1000);  
});

Bob

One more note, if you want to scroll to a thanks message after the form is submitted, then the form will not be present, you need to display the message inside a "div" element, and assign an id for that div and use it.

Regards, Max

Max ChronoForms developer... Did you try ChronoMyAdmin for managing your Joomla database tables ?

BN: Thanks, but I don't see how to make the FAQ code work for my case.

I am waiting for a response from Max.

JC

GreyHead and Max: Thanks for suggesting the jQuery code.

I have found a solution ... works like a charm for both cases of the form submitted without error, and with error (e.g. bad Re-Captcha). What I actually needed was to place an HTML anchor just above the form, and then have the jQuery code placed in the On Submit, Load Javascript. The jQuery code makes the page scroll to the point just above the form.