Is there a way to redirect user to a different page based on radio button selection? I am wondering if this is a built in functionality or will i have to do some JS magic?
For example: User is presented with two options, yes and no. If they choose "yes" then presses Submit, form works as designed. If a user chooses "no" then presses Submit, form instead of working as designed, simply redirects user to a different page without executing form.
Here's a bit of sample JavaScript code that should send you in the right direction:
document.querySelector("body").addEventListener("formulate: validation: success", function(e) {
var form = e.target, data = e.detail, fields = data.fields;
data.cancelSubmit = true;
console.log({form, data, fields, e});
var firstField = fields[0], firstFieldData = {};
firstField.setData(firstFieldData, {rawDataByAlias: true});
console.log({firstFieldData});
});
You should change that quite a bit. Here are some pointers:
This is assuming you are using the plain JavaScript template for Formulate (rather than the AngularJs one).
Don't do document.querySelect("body") to get the form element. Do something more intelligent that will get an element that wraps the form to ensure you aren't responding to events from multiple forms on the page.
Add in your conditions (e.g., cancel the submit based on the field value rather than all the time).
Make sure your fields have an alias (otherwise setData won't work how you expect it).
Remove the console.log statements (they're just there to help you debug).
What this script is doing right now is grabbing the value out of the first field and has a couple console.log statements to help guide you. I'm guessing you can figure it out from here.
I got it working by doing the following inside JS file
var radioButton = document.getElementById("id-of-radiobutton").checked;
if (radioButton == true) {
window.location = "/url/";
}
else {
window.location = "/aother-url/";
}
I did this inside wrapper.addEventListener("formulate form: submit: success", function (e) { *... code ...* }); since I needed this redirect on form success.
Keep in mind that the ID's on the elements are dynamic (e.g., if you toss another form on the page, change the field order, or change any fields, that ID may be different).
Glad to hear you found a solution that works for your situation though.
That is actually a very good info! Something that I actually encountered and was able to overcome by changing classes for form wrapper, creating a new JS files as needed that reference my wrapper and then targeting my elements based on that new form class as well.
If you would like me to remove that or to modify the attribution in any way, don't hesitate to let me know. I can be reached here or on my contact page: http://www.nicholaswestby.com/contact
Redirect to Page if Radio Button Selection Has Specific Value
(Posting as a new thread on behalf of another user to avoid cluttering up another thread: https://our.umbraco.com/packages/backoffice-extensions/formulate/formulate-questions/96504-change-email-recipients-based-on-the-dropdown-selection-plain-javascript-template#comment-305204)
Is there a way to redirect user to a different page based on radio button selection? I am wondering if this is a built in functionality or will i have to do some JS magic?
For example: User is presented with two options, yes and no. If they choose "yes" then presses Submit, form works as designed. If a user chooses "no" then presses Submit, form instead of working as designed, simply redirects user to a different page without executing form.
Quick note until I can write a proper response: https://github.com/rhythmagency/formulate/blob/master/src/formulate.frontend/responsive.plain-javascript/steps/render-forms.js#L76-L80
Formulate has a "formulate: validation: success" that allows for a
cancelSubmitproperty to be set and that seems to contain the form field data.Can probably do something with that.
Here's a bit of sample JavaScript code that should send you in the right direction:
You should change that quite a bit. Here are some pointers:
document.querySelect("body")to get the form element. Do something more intelligent that will get an element that wraps the form to ensure you aren't responding to events from multiple forms on the page.setDatawon't work how you expect it).console.logstatements (they're just there to help you debug).What this script is doing right now is grabbing the value out of the first field and has a couple
console.logstatements to help guide you. I'm guessing you can figure it out from here.Here are some links that may help:
Hi Nicholas,
You can use something like below:-
If($('.class of radiobutton').prop("checked")==true && $('.class of radiobutton').val()=="No") { var href = '@Url.Action("Index", "Controller")?Maps=' + Maps; window.location.href = href; }
I got it working by doing the following inside JS file
I did this inside
wrapper.addEventListener("formulate form: submit: success", function (e) { *... code ...* });since I needed this redirect on form success.Note: This is for Plain JS template.
Keep in mind that the ID's on the elements are dynamic (e.g., if you toss another form on the page, change the field order, or change any fields, that ID may be different).
Glad to hear you found a solution that works for your situation though.
That is actually a very good info! Something that I actually encountered and was able to overcome by changing classes for form wrapper, creating a new JS files as needed that reference my wrapper and then targeting my elements based on that new form class as well.
Thank you for your help. Formulate truly rocks!
Thanks for saying so, Denis! I hope you don't mind, but I've added that as a testimonial here: http://www.formulate.rocks/testimonials
If you would like me to remove that or to modify the attribution in any way, don't hesitate to let me know. I can be reached here or on my contact page: http://www.nicholaswestby.com/contact
is working on a reply...