Jump to content
  • 0
aquintanilla

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

Question

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.

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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.  

image.png.ea62aef53303935befd80b0635a527f6.png

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.

image.png.ad93ec661b78d51c282f484a4bfcf3e7.png

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

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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.

1dwFGs2.png

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:
s57Ygdf.png

 

Hope this helps.

Regards,

vitalikssssss

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...