Menu icon Foundation
Closing an alert box jumps down to form with ID

Basically I want to jump down from an alert box to the start of a form that has an ID.

What I would like:

1. A form is filled in
2. Missing fields are displayed in an alert dialogue box
3. Clicking on the 'X' closes the dialogue box and jumps back down to the form for the user to amend

What is happening:

1. A form is filled in
2. Missing fields are displayed in an alert dialogue box (the appearance of the box always resets to the page to the top, away from where the form is)
3. Clicking on the 'X' closes the dialogue box and that's it.

I read this page, but the example is very basic (http://foundation.zurb.com/docs/components/alert_boxes.html)

My code is below, I know it is wrong, but essentially this is the starting point.

It's important to me, as on a mobile there is contact information above the contact form. Which is why I'd like the user to jump back down to the form after submitting a form with errors and closing the alert box.

Cheers
G

$(document).on('close.fndtn.alert', function (event) {
    $('html, body').animate({
		scrollTop: $("#CForm").offset().top
	}, 2000);
});

alert boxesanimateforms

Basically I want to jump down from an alert box to the start of a form that has an ID.

What I would like:

1. A form is filled in
2. Missing fields are displayed in an alert dialogue box
3. Clicking on the 'X' closes the dialogue box and jumps back down to the form for the user to amend

What is happening:

1. A form is filled in
2. Missing fields are displayed in an alert dialogue box (the appearance of the box always resets to the page to the top, away from where the form is)
3. Clicking on the 'X' closes the dialogue box and that's it.

I read this page, but the example is very basic (http://foundation.zurb.com/docs/components/alert_boxes.html)

My code is below, I know it is wrong, but essentially this is the starting point.

It's important to me, as on a mobile there is contact information above the contact form. Which is why I'd like the user to jump back down to the form after submitting a form with errors and closing the alert box.

Cheers
G

$(document).on('close.fndtn.alert', function (event) {
    $('html, body').animate({
		scrollTop: $("#CForm").offset().top
	}, 2000);
});
Rafi Benkual about 4 years ago

I think that looks right to scroll to an id of the form input.

I don't have your example to work with.. What was your result?

Glynn Williams about 4 years ago

Hi Rafi. I've just emailed you a link. G