How to add a button that submits the form and redirects me to another datapagae?

[aquintanilla]

Hi, I want to add a button on my submission data page that when I clic it, it submits the actual form and redirects me to another data page. I don't want to use the actual caspio submit button because I will use that to redirect to data page#1, and I want this new HTML button to redirect me to  datapage #2.

[Johnny]

Hi @aquintanilla

Let me try to help you out.

Lets say, you have a site and a page www.example.com/home_page.html on it. This page has a DataPage (Submission Form) that you have deployed. From here, we have two options to solve your task:

1) While making settings to your DataPage, the very last step will be "Web Form Wizard - Destination and Messaging". You will see "Same Page" in "Destination Options" field. Please open it and select Go to a DataPage.  

Then, you will be able to select the DataPage you need to open.

 

2) Lets say now, that you second page on your site with the address www.example.com/Second_Page.html  . And you want to place your second DataPage here. In order to redirect to another HTML page - simply select "Go to a new Page" and put the address here.

After that - you will be redirected to another page that you will enter. By the way, you should enter it like "http://" or "https://".

 

Hope it helps,

 

Regards,

John

[aquintanilla]

Hi John, thank you! This worked, but the issue is that I need another button that allows me to submit and redirect me to other page, this is because I need to have 2 buttons that depending on which is clicked it will submit the information and redirect me.

[Vitalikssssss]

Hi @aquintanilla,

Here is possible way how you can achieve the desired functionality.

1. Add Virtual field to the form and set a default value URL to which user will be re-directed after submit.

2. Add the following snippet in Datapage Header.

Make sure you make changes in lines with comment ***Change 

<script type="text/javascript">

document.addEventListener('DataPageReady', creatBtn);

//
function creatBtn () {
// Hides the Virtual field
const link = document.querySelector("#cbParamVirtual1"); //***Change Virtual1 if needed
link.style.display = 'none';
//Create a button element
const Btn = document.createElement('input');
Btn.type = 'submit';
Btn.name = 'customBtn';
Btn.classList.add('cbSubmitButton');
Btn.value = 'Custom Button'; //***Change the name of the button here
Btn.style.background = '#f51212d9'; //***Change color of the button here
Btn.addEventListener('click', function() { changeURL(link)});
//Add button next to the default Submit button
document.querySelector("div.cbSubmitButtonContainer").appendChild(Btn);

}

function changeURL(link){
//Changes URL link in Virtual field if the user clicks custom button
link.value = 'https://google.com'; //***Change URL here

}

</script>

3. Set an action to go to New page after record submit and use Virtual field as a parameter:

 

Hope this helps.

Regards,

vitalikssssss