URL Specified/Prompted Message

I’m working on a project where I would like to always keep the user engaged on one page. So, instead of having a separate success page or prompt box I would like to have hidden messages already on the same page as the form and are only prompted to show with URL’s like:

Where #thankyou will call to the ID of the hidden div.

I’m sure this is simple enough through; JS / CSS / XHTML and that there are plenty of how-to’s for this but it became a keyword game with Google and I just couldn’t find the right sequence of keywords to find a relevant result on the subject.

Thanks, Bryan

The reason why it’s a not a good idea, which is also why it’s hard for you to find, is that your technique can not work in a non-scripted environment.

The best advice that you can be given regarding this is to retain the separate page for the form to link to, and then to use javascript to change the form action to be that of the current page (location.href) with the thankyou fragment identifier ( + ‘#thankyou’).

The page can have the thank you message normally hidden, with a class name of on it of “hidden”. It’s bad to have pages with hidden content, but in this case the hidden thank you message is only for when scripting is available.

When the page loads with the fragment identifier (you can check for it from location.search) you can then remove the hidden class from the thank you message.

Right, thanks for the tips and I do understand web accessibility thoroughly, but I’m still going to pursue my original need on this specific project if you could point me in the right direction.

Reason being is that this website is intended for a more modern tech/savvy audience that has a modern standard compliant setup, I’m not worried about having the messages setup the way I desire because the user likely couldn’t or shouldn’t be using the website in the first place anyways if they didn’t have a supported setup.

Unfortunately, I can’t show you the project to give you a better perspective.


It is better to build the message on the fly and show it that to have it hidden all the time. The reason for this is pure logic, you shouldn’t have any element that you are not sure you will use just lying there on the website even if it is hidden. It really makes no sense to load it if it will be not used all the time.

Now, just to point you on the right direction, this is what you will have to do:

first, you will have to catch the form’s submit event or click event in case you are working with links. The href attribute or action attribute has been setup in advance for example:

<form action=“#thankyou” />

when you catch the event, check for the action/href attribute in this case you will find that it is “#thankyou”, so modify the url

document.location.href = document.location.href + “#thankyou

The build the message or get the elem with the correspondign id and show it to the user.

It is pretty straight forward procedure and shouldn’t give you much trouble.

I’m not a programmer, I wonder if it would be appropriate if I could ask for example code or a link to an example or tutorial?