Switching page upon submission while utilizing iFrames

I am facing a challenge on my website with an iFrame element that contains a form. After users answer some questions and submit the form, I want the page to automatically redirect to a thank you page. Unfortunately, I'm having trouble making this work.

Is there a way to detect when the form has been successfully submitted? I have tried using onsubmit and onload functions but they don't seem to be effective. If needed, I can share the code later as I am currently using my mobile device.

My website is built using vue.js

Thank you for your assistance!

htmlcssvue.jsiframenuxt.js

Answer №1

Here is a possible solution that may address your inquiry. Below is a code snippet in JavaScript that allows you to load multiple pages within an iframe. Please note that I am currently using a mobile device and unable to test this code, so there may be room for adjustments.

HTML:

<button onclick="loadNextPage(frameSource)">Load Page</button>
<iframe class="myFrame" src="" id="theIframe" scrolling="no"></iframe>

JavaScript:

function loadNextPage(frameSource){
     document.getElementById("theIframe").src = frameSource;

}

function selectPages(){
     var chosenPage = pageName + ".html";
     loadNextPage(chosenPage);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using HTML5's getCurrentPosition function with Meteor

Attempting to utilize the html5 geolocation api within Meteor. Executing: navigator.geolocation.getCurrentPosition(handle_geolocation_query); in my javascript code but encountering issues - suspect it could be tied to the restrictions on timing ( ) enfo ...

htmlgeolocationmeteor

Can the route.meta property be accessed from outside the component?

I've encountered an issue with using the route.meta property in my Vue 3 project. Initially, I had it working inside a Vue component, but when I moved the code into a .ts file, it stopped functioning and an error appeared in the browser. Here is my . ...

javascriptvue.jsvue-componentvue-router

numbered navigation jquery plugin

Can anyone recommend a jQuery plugin or alternative solution for creating a navigation system for comments similar to YouTube? Here is the link for reference: Thank you in advance. ...

javascriptjqueryhtmlcss

Converting a Multidimensional Array from Jquery to HTML

In an attempt to arrange pieces on the board in a specific order, I have shared the following code. The idea is to move the pieces by clicking the buttons below the board, with a total of eight moves. I plan to implement fast-forward and rewind buttons as ...

jqueryhtmlcss

Comparing `height: calc(100vh);` to `height: 100vh;` in CSS can reveal a few

Currently tackling a project where the previous developer utilized: .main-sidebar { height: calc(100vh); } Unfortunately, I can no longer reach out to them, and I am curious about the variance (if any) between the two approaches. (Am I in the approp ...

htmlcssuser-interfacecross-browser

Impress.js functions properly within a Vue component, however, the 'visibility:hidden;' style is not consistently overridden in standard HTML

Recently purchased a commercial license and attempting to follow the documentation, but encountering issues with getting the animation to function My setup includes Laravel 5.4 and Vue 2 <head> <link rel="stylesheet" href="/css/animate.min.cs ...

vue.jswow.js

top-sticky and logo visibility

Struggling with an issue related to displaying a logo in a sticky header. The menu works, but need the logo to shrink when header is sticky. https://i.sstatic.net/jDNsb.png This is what I need: https://i.sstatic.net/szzRC.png My current code snippet: ...

htmlcssbootstrap-4

Changing the HTML page in Django based on form submission

I want my HTML page to display a message once the form is submitted by the user, instead of showing the form again. I tried using the registration date to determine if the form has been submitted or not, but encountered an error when the form was not submi ...

pythonhtmldjango

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron

The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...

htmlcss

Horizontal scrolling alone is proving to be ineffective

My current HTML code includes a table that is integrated with PHP Laravel. The data is being pulled from Admin.php to populate the table, resulting in it being wider than the screen window. To address this, I added a horizontal scroll bar for navigation pu ...

javascriptphpjqueryhtmlcss

What is the reason for the unexpected JQuery attribute in my FORM element?

Using a combination of Approval Tests and WatiN to test the integration of ASP.NET MVC2 pages has been efficient. WatiN launches IE to access the provided URL and captures the browser's HTML response in a variable. Approval Tests then facilitate compa ...

jqueryhtmlinternet-explorer

I am looking to use selenium to separate functions based on css selectors - how can this be achieved

I am attempting to modularize my script by breaking it down into various functions for easier reuse. However, when I do so, selenium seems to have trouble locating CSS selectors. Here is my folder structure: Startup.py Webdriver folder Contains init.p ...

csspython-2.7seleniumfirefox

Optimize your texture loading process by dynamically swapping out low resolution textures with high resolution ones to enhance overall visual quality

In my current ThreeJS project, I have encountered an issue when trying to swap one texture with another. The problem arises when the UV's become completely distorted after the texture switch. Below is the snippet of code that showcases how I am attemp ...

javascripthtmlthree.jsgltf

Navigating to a Website Based on the Selected Option in a Drop-Down Menu

I am currently working on a form that includes options for selecting a city and social networking site. The goal is to collect information about both the selected city and social network so that it can be stored for future reference. Upon submitting the fo ...

javascripthtmlcss

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

Issues with modals appearing improperly after transitioning to NG-Bootstrap 15 and Bootstrap 5 upgrade

UPDATED following a thorough examination: In the process of upgrading our application from NG-Boostrap v11 with bootstrap 4 to NG-Boostrap v15 with Bootstrap 5 and Popper, we also made the switch from Angular 15 to Angular 16. Despite successfully resolvi ...

cssangularbootstrap-5ng-bootstrap

Having trouble retrieving the value of the hidden field using ng-model

Hello, I'm currently learning AngularJS and facing some challenges with accessing hidden field values using ng-model. Specifically, I am working on an editing modal where I need to retrieve the ID for each record. Below is my controller code snippet: ...

javascripthtmlangularjs

Selecting a webpage from a dropdown list to display its specific content within an iframe

I have a dropdown menu similar to this: <form name="change"> <SELECT NAME="options" ONCHANGE="document.getElementById('frame1').src = this.options[this.selectedIndex].value"> <option value="">Choose</option> <opti ...

javascripthtmliframedropdowngetelementbyid