Custom Submit button with url destination in html block

[DesiLogi]

On a Details form I need to use a custom button to do the Update/Submit- that's not a problem. The issue is that I also need to run some script for that specific button to go to a url after submission, depending on the value of a virtual field. 

The reason I can't put the script for the url destination in the 'Destination and Emails' section is that I have 4 of these buttons, each of which needs to go to a different url if/when clicked. 

Here's sort of the code I need to use- does anyone know how to incorporate the redirect script into the button so it goes to that destination after the form submits? Many thanks- 

 

<div style="text-align: center;">
<input class= "cb_custom_btn" type="submit" value="Activate Product" />

<script>

var v_virt = "[@cbParamVirtual5]";

if(v_virt=="Annual"){
window.location.href='../page1?mstrID=[@authfield:mstrID]';
}
if(v_virt=="Monthly"){
window.location.href = '../page2?mstrID=[@authfield:mstrID]';
}

</script>
</div>

 

[DesiLogi]

I've gotten to this but I still can't get it to work. If someone can take a look that'd be great. 

<div style="text-align: center;">
<input class= "cb_custom_btn" type="submit" onclick="myFunction()" value="Activate Product" />
 
<script>
function myFunction(){ 
var v_virt = "[@cbParamVirtual5]";
 if(v_virt=="Annual"){
window.location.href='../page1?mstrID=[@authfield:mstID]';
}
if(v_virt=="Monthly"){
window.location.href = '../page2?mstrID=[@authfield:mstrID]';
}
}
</script>
</div>

 

[TWIRED]

 

submission will cancel the redirect or vice versa.

Dont put code on the submit button but do it in the onsubmit, secondly return false to stop the submission

function redirect() {
  window.location.replace("login.php");
  return false;
}

using

<form name="form1" id="form1" method="post" onsubmit="return redirect()">  
  <input type="submit" class="button4" name="order" id="order" value="Place Order" >
</form>

Or unobtrusively:

window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    window.location.replace("login.php");
    return false;
  }
}

using

<form id="form1" method="post">  
  <input type="submit" class="button4" value="Place Order" >
</form>

 

use

window.location.replace("login.php");

or simply window.location("login.php");

It is better than using window.location.href =, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.

[DesiLogi]

Thanks for posting this- I need to play around with it to make it applicable to my particular scenario but this is a good place to start. 

[MayMusic]

If you need the same button style as what you have one your DataPage, get the style from your style sheet and apply it here to your custom button:

The class we have in the button code is "cb_custom_btn" so the code below goes to the header of the page

 

<style>
  .cb_custom_btn
{
	/*Submit Button Attributes*/
	color: #FFFFFF;
	font-size: 12px;
	font-family: Arial ;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border-color: #CCCCCC #999999 #999999 #CCCCCC;
	border-style: solid;
	border-width: 1px;
	background-color: #1959C3;
	width: auto;
	height: auto;
	margin: 0px 3px;
	padding: 4px 15px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
}
  .cb_custom_btn:hover{
  color: #1959C3;
	font-size: 12px;
	font-family: Arial ;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border-color: #999999 #CCCCCC #CCCCCC #999999;
	border-style: solid;
	border-width: 1px;
	background-color: #B0C4DE ;
	width: auto;
	height: auto;
	margin: 0px 3px;
	padding: 4px 15px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	cursor: pointer ;
  }
</style>

 

[DesiLogi]

that's great- thanks MayMusic!

[MayMusic]

@DesiLogi You are welcome

[NailDyanC]

Hi, just to add in this post, you may also consider checking the link below about Dynamic Redirects After Form Submission:

https://howto.caspio.com/tech-tips-and-articles/common-customizations/dynamic-redirects-after-form-submission/

[forumjuice]

Thanks for posting this. I'm having a similar issue and this is helping work around.