use window.location to open 2 urls on submission

[DesiLogi]

Hello,

I have some js in the Destination part of a submission form, for after the Submit happens (I do this in js because there are 3 different sets of options to go to after submission, depending on what the user selected in the submission fields). 

I'm using window.location instead of window.open because of popup restrictions.

I need to do 2 things on form submission: 1) have the existing window go to a url with parameters like a normal Caspio form can do and 2) open a different url  in a new tab. So basically, the user clicks Submit, the existing window refreshes to a new page and a new tab opens to a different url. Is this possible? 

Something like:

window.location.href = '[@field:First_URL]';

window.location.href = '[@field:Second_URL]', '_blank'; 

I don't know how to get it to run the code for the 2nd url before it updates to the first, as well as get the 2nd url to open a new tab. 

[Vitalikssssss]

Hi @DesiLogi,

You can use window.open() function for your second URL and setTimeout for the first URL in order to refresh the page after the second URL opens.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

window.open('[@field:Second_URL]');

setTimeout(function(){ window.location.href = '[@field:First_URL]'; }, 3000); 

});
</script>

Please note that pop-ups are blocked by the default in most commonly used web-browser and a user must allow pop-ups prior it will be opened by JS.

Hope this helps.

Regards,

vitalikssssss

[DesiLogi]

Hi vitalikssssss, thanks for the help on this. This is a good way to do it, if I notify the user to enable popups for my site.

I didn't know how your code would integrate with the existing code I'm using to parse a virtual field value so I just tried putting in the window.open clause without the timer or EventListener and it seems to work.

The last question I have is, how do you put a message like "Success" to show in the background while the page is updating after submission. Even without the timer the datapage refreshes for about 2-3 seconds before it goes to URL 1 and opens URL 2 in a new tab. During that time it's just white space and the user might be confused about what's happening. I'd like to show a message like "Success" during that refresh, if possible. Is that doable within this code? If not I'll just leave it as it is since it seems to work. Thanks again for your insight. 

The code I have right now, in the Destination section is: 

<script>
var v_virt = "[@cbParamVirtual5]";

//if Add More button is clicked, load the same form
if(v_virt=="AddMore"){
window.location.href = 'mysamepage';
}
if(v_virt=="SaveClose"){
window.location.href = '../mynewpage';
}
if(v_virt=="SaveBuy"){

window.open('[@field:Second_URL]');
window.location.href = '[@field:First_URL]';
  
}

</script>

 

Edited September 17, 2019 by DesiLogi
found out code works as posted

[Vitalikssssss]

Hi @DesiLogi,

Perhaps you can add a simple alert("Success") function to notify the user that submission was successful.

Regards,

vitalikssssss  

[DesiLogi]

Hi Vitalikssssss , thanks for the suggestion. Was thinking about that but an alert is a popup and a little raw looking. I'd wanted to put something a bit more polished on the page itself, with more text. I used the word "success" to shorten this question but would need to put a detailed message in reality. I'll play around with the alert in the meantime. Thanks again for your help on this thread (and others). 

[fostercarly]

On 9/17/2019 at 10:17 PM, DesiLogi said:

window.location.href = '../mynewpage';

window.location.replace('http://example.com');

It’s better than using window.location.href = ‘http://example.com’;

Using replace() is better because it does not keep 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 window.location.href

If you want to simulate an HTTP redirect, use window.location.replace

You can use assign() and replace methods also to javascript redirect to other pages like the following:

Quote

location.assign("http://example.com");

The difference between replace() method and assign() method(), is that replace() removes the URL of the current document from the document history, means it is not possible to use the “back” button to navigate back to the original document. So Use the assign() method if you want to load a new document, andwant to give the option to navigate back to the original document.