Issue with JavaScript redirecting to another page

I have been working on a WordPress website that utilizes the contact form 7 plugin. My goal is to redirect the page to a thank you page while appending the form ID to the URL. However, I have encountered an issue where it keeps redirecting me to the home page instead of the desired thank you page. I am utilizing the wpcf7mailsent DOM event for this purpose.

Despite spending several hours searching for a solution, I have attempted various methods of redirection with no success:

window.location("/thankyou?submission="+formID);
document.location = 'https://example.com/thankyou'+formID;
document.location.href = '/thankyou?submission='+formID;
window.location.assign('https://example.com/thankyou'+formID);
window.location.replace('https://example.com/thankyou'+formID);
jQuery(location).attr('href','example.com/thankyou'+formID);

The following code snippet illustrates my current approach:

var nr_wpcf7Elm = document.querySelector( '.wpcf7' );

nr_wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
    var inputs = event.detail.inputs;
    var formID = event.detail.contactFormId;
    window.location.href = '/thankyou?submission='+formID;
}, false );

In conclusion, I am seeking assistance in successfully redirecting users to a thank you page while ensuring the inclusion of the form ID in the URL.

Answer №1

Consider implementing the wpcf7submit event.

var nr_wpcf7Elm = document.querySelector( '.wpcf7' );

nr_wpcf7Elm.addEventListener( 'wpcf7mailsubmit', function( event ) {
    var inputs = event.detail.inputs;
    var formID = event.detail.contactFormId;
    window.location.href = '/thankyou?submission='+formID;
}, false );

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

Best practices for showcasing well-formatted JSON data retrieved from a RESTful API using React

I've managed to integrate data from an API (Lambda/Node JS) into my React app. Now, I'm looking for a way to display line breaks and possibly include HTML elements like <ul><li></li></ul>. I've tried using \n for ...

AngularJS iu.mask is a powerful tool for validating user input, especially when

Currently, I am learning Angular and have created an input field with type 'text' to display a date in the format "99/99/9999" using ui.mask. I have also implemented validation in the module to prevent submission (unblocking button) if the entere ...

What is the proper method for setting up handlers in functional React components?

My knowledge of JavaScript tells me that there are three different ways to define functions. Let's take a look at them: 1. Declaration function handleEvent(e) {} 2. Assignment var handleEvent = function(e) {} 3. Arrow var handleEvent = (e) => ...

Retrieve the properties from within a closure function in a functional component

I have developed a simple React application using create-react-app. The app consists of a single component that takes in a value and an onClick callback. When the callback is triggered, the value increments. import React, { useState } from 'react&apos ...

"Discover the simplicity of customizing Bootstrap 5 with an easy-to-use online tool

When I was using Bootstrap 3, there was a convenient tool that allowed me to customize which features I wanted in the minified CSS/JS files to improve loading time. Now, as I delve into the documentation for Bootstrap 5, I find myself struggling to unders ...

Incorporate a globally imported class inside a Vue 3 component by utilizing the provide function

In the process of developing an application using Vue 3, I have created an api class specifically for handling API calls: import axios from 'axios' export default class { /** * Send GET Request * @param {string} url * @retur ...

What is the best way to implement validation for ngModelCtrl based on user input within a directive?

I have created a unique directive and I am looking to incorporate the validators from an input field used within this directive template. Is there a way to expand ngModelCtrl validators with the input validators? This is my custom directive implementation ...

What is the best way to save nested lists in a MYSQL database?

I am trying to figure out the best way to store this list of lists in MySQL, but I'm not sure how to go about it. list[x][y] contains items structured as {li:[{x:x,y:y}] , pos:{x:y}} list[x][y].li[z].x list[x][y].li[z].y list[x][y].pos.x list[x][y]. ...

Click the button in Javascript to add new content

I am currently experimenting with JavaScript to dynamically add new content upon clicking a button. Although I have successfully implemented the JavaScript code to work when the button is clicked once, I would like it to produce a new 'hello world&ap ...

Do attributes from our Angular app's <head> and <meta> tags get inherited by asynchronously pulled in HTML?

Within an Angular application, our index.html file contains a <head> tag where we define the charset: <head> <meta charset="utf-8"> </head> When a user navigates to a specific page, the component of that page makes an ...

After removing old elements and replacing them, videos in newly generated elements fail to play

In my game, I use div elements to represent characters, with each div containing a video child element that plays in a loop to animate the character. Whenever something happens on the screen, I delete all the character divs and recreate them for each chara ...

Warning: MaxListenersExceededNotification may occur during the installation or creation of Node.js projects on macOS

Encountering a warning message while attempting to set up or generate Node.js projects on macOS (darwin): (node:80101) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxList ...

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

Utilizing ASP.Net Core version 3 to effortlessly send a POST request to the controller

I am having difficulty with my POST request to an ASP.NET Core 3 server because the number always seems to be 0. Is there something specific in ASP.NET Core 3 that I might be missing? Using the [FromBody] parameter has not resolved the issue. Even passing ...

Can a browser still execute AJAX even if the window.location is altered right away?

Here is the situation I am facing: <script> jQuery.ajax{ url : 'some serverside bookkeeping handler', type : post, data : ajaxData }; window.location = 'Some new URL'; </script> Scenario: I n ...

The issue with React Testing using Jest: The domain option is necessary

I've recently developed a React app that implements Auth0 for Authentication. Right now, I'm working on setting up a test suite using Jest to test a specific function within a component. The function I want to test is createProject() in a React ...

The AJAX request I'm making is not behaving as I anticipated when returning JSON data

I'm currently working on building an ajax call to compare my database and automatically update a div if any changes are detected. JavaScript is still quite new to me, especially when it comes to dealing with JSON data. I suspect the issue lies in ho ...

In order to manage this file type properly, you might require a suitable loader, such as an arrow function within a React

Currently, I am in the process of creating an npm package and have encountered a difficulty with the following code: You may need an appropriate loader to handle this file type. | } | | holenNummerInSchnur = Schnur => { | if (this.beurte ...

JSON Date Format

I'm facing an issue where I am unable to retrieve the current date using new Date() because it is in JSON format. This particular code was written using MVC C#. The date appears as \/Date(1531364413000)\/. The dates stored in the database ...

Why am I receiving a 404 error when trying to access an Angular 9 route within a subfolder

I am facing an issue with my Angular 9 app that is hosted in a domain subfolder. The problem lies in the index.html base tag, shown below: <base href="/subfolder/"> Everything works perfectly fine when the app is run locally without the ba ...