Nick Kemp 11/17/2022 6:39:23 PM My solution, while not pretty, works. You have two options, pass the redirect url via url parameter or, via a hidden HTML element. The former is simpler,
but the later is probably better if you are redirecting to long urls with user GUIDs etc. That's what I'm going to run with today.
In essence, the challenge is that embed.js is loaded async and we have no way of knowing when it's done. So, we monitor the DOM for changes which will allow us to catch changes embed.js makes once loaded. We can then read in the hidden vars and do stuff!
1. Create an XHTML-Formula field (I call mine HTML:Variables) for your webform. Formula:
<span id="formVars" data-redirect="<%[Your redirect URL field or formula here]%>" hidden="hidden"></span>
2. Add [HTML:Variables] to the form and set it to visible on edit.
3. Edit the web-to-record settings for your table and select message, not redirect. In the message but a string that will tell our script that the form has been submitted.
In this example I have used "!redirect", but because the user will see this for a moment, try something nicer like "Redirecting...". Just ensure
that the text doesn't appear on your form anywhere else. If you do your form will just break for everyone.
4. Add the following to he <head> section of the HTML page where you embed your form. DO NOT put this block in the body.
<script>
var formVars;
var redirectString = "!redirect"; // Set this to the conent of
var observer = new MutationObserver((mutations) => {
// Attempt to refence the elenements we need (only if we don't have them yet)
if (formVars == undefined) formVars = document.getElementById('formVars');
// If we have our formVars we can do stuff
if(formVars?.dataset !== undefined) {
// If we have the redirect directive, redirect
if(document.body.innerHTML.indexOf(redirectString) !== -1){
if(formVars.dataset.redirect !== undefined) {
window.location.href = formVars.dataset.redirect;
}
}
}
});
</script>
5. Add the following after the opening <body> tag:
<script>
observer.observe(document.body, {
characterDataOldValue: true,
subtree: true,
childList: true,
characterData: true
});
</script>
Thats it team, enjoy your new forms :)
Nick
bridgepoint.nz
| 
