Submit form information and navigate to a different webpage without using AJAX

I need help with creating a form that redirects to another page without sending AJAX data for the current page in the action attribute. Is this possible, or is it related to PHP?

const formElem = document.getElementById('form');

        formElem.addEventListener('submit', function(e) {
            //e.preventDefault();

            window.location.replace('https://dhge.org/pay/{{ uuid }}/');
        })  
    <form method="post" action="https://www.tfaforms.com" class="hintsBelow" id="form" role="form">
      <div class="jForm__row jForm__row-margin" id="tfa_1-D">
      <label id="tfa_1-L" class="jForm__label" for="tfa_1">First Name<span> *</span></label>
      <div class="jForm__field">
      <input type="text" id="tfa_1" name="tfa_1" required value="" title="First Name " data-dataset-allow-free-responses="" class="jForm__input">
      </div>
      </div>
    </form>

Answer №1

To perform a redirection, simply utilize document.location.href

document.location.href= 'https://website.com/redirect/{{ item_id }}/' 

Answer №2

Utilize ajax to transmit information to a php controller which will deliver the data in JSON format. Upon receiving this data, you can either redirect to the subsequent page or trigger a redirection directly from the php file using the header function pointing to the designated destination page.

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

Tips for resolving the issue of the '$interval is not a function' error in AngularJS

When I click on the up/down arrows, I am attempting to continuously increase/decrease a value using AngularJS $interval function. However, I keep encountering an error message that says "TypeError: $interval is not a function." Can someone please help me s ...

``I am having trouble getting the Bootstrap carousel to start

I am having trouble getting the Bootstrap Carousel to function as expected. Despite including all the necessary code, such as initializing the carousel in jQuery.ready, the images are stacking on top of each other with navigation arrows below them instea ...

Long taps do not activate the context menu in the mobile interface, as noted in the Google Maps API

During the development of my project, I encountered an issue with the Google Maps API not functioning correctly on mobile devices. I am utilizing GMaps.js, but even that example does not properly support right-click (long tap event). Here is a snippet of ...

Guide on incorporating a texture file (.mtl) onto a model (.obj) with three.js

I've managed to successfully display a .obj file using three.js by adapting code I found online for my project. However, I'm now facing challenges when trying to incorporate the .mtl material file. Despite attempting various solutions, nothing s ...

AngularJS experiencing issues with deleting function implementation

Here is my JavaScript code: camListApp.controller("Hello", function($scope, $http, $uibModal){ $scope.del=function(data){ var result=confirm('are you sure?'); if(result==true){ var index=getSelectedIndex(data); ...

What is the reason behind the lack of preservation of object state when using Promises?

Here is a code snippet to consider: class ClientWrapper { private client: Client; constructor() { this.client = new Client(); } async connect() : Promise<void> { return this.client.connect(); } async isConne ...

The problem with Ajax NSURLCache persists and continues to receive an undefined response

After researching online and attempting all suggested solutions, I am still encountering issues with an undefined error in my code. const NSString *kAppHost = @"myApp.example.org"; - (NSCachedURLResponse *)cachedResponseForRequest:(NSURLRequest *)request ...

Tips for adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

Hover shows no response

I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected. I've considered replacing the i tag with an a, and have also tried using both display: none and display: bloc ...

Working with Dynamic Forms Validation in Vue.js

I am struggling to include Validations:{} in the dynamic form I'm creating with VueJs. Within my data(), there is an array called employees[] <input type="email" for='email' id='email' class="form-control ...

Strategies for restricting user input within a datalist

I have a project in which I am creating a webpage that displays a list of flights that can be filtered by destination, origin, price, and more. To achieve this, I have categorized each flight within a div element using its specific properties as classes. F ...

Unique shader customized to achieve the desired phong effect

I am looking to develop a simple, yet effective shader for my terrain mesh. This shader should utilize different diffuse and normal textures based on the color of the world map image, and should be able to receive shadows and interact with lighting. The d ...

Displaying the Variable Product Options in WooCommerce

I have been working on creating a query to showcase products along with relevant information, but I am facing some challenges. Specifically, I am struggling with displaying the variable product options for all products and implementing an add to cart butt ...

Encountering a window undefined error while using React-leaflet

I'm currently working on creating a map using react-leaflet and server-side react. To tackle the "ReferenceError: window is not defined" issue, I've implemented a map component and experimented with utilizing the useEffect hook for dynamic loadin ...

What could be causing the getElementById() function to malfunction?

Currently in the learning process, I am attempting to make a button perform an action - specifically displaying a message using the alert function. However, it seems that the method getElementById is not functioning as expected and I am unsure of the reaso ...

Access cookie information within a Vue application by reading it within the router or component

There is a url (*/webapp/callback) in my vue.js app that gets redirected (http 302) from another application, bringing along some cookies. I'm trying to figure out how I can read these cookies when the component mounts and then store them in vuex stat ...

Obtain the alternative attribute value from the adjacent element and save it to a variable using jQuery

I'm a beginner with jquery and am trying my hand at creating a simple drag and drop game using the following HTML structure: <div class="set-text"> <div class="text">cinema</div> <div class="text">post-office</div> ...

Encountering this error for the first time - Uncaught Error displayed in the Console

I have been working on a ToDo list and it is almost complete. However, I have encountered an unfamiliar error in the console that is preventing me from creating the list. The error message reads as follows: OPTIONS http://localhost:4000/cpds/add net::E ...

The ngCordova FileTransfer is not providing the HTTP status code when retrieving a file from an FTP server

I am attempting to retrieve a file from an FTP server using Cordova. To accomplish this, I have installed the ngCordova and Filetransfer plugins. Below is the snippet of code I am working with: angular.module('TestApp', ['ionic', &apos ...

Is it possible to use require() to read a .json file from a dependent library?

Is it possible to access a .json file within one of my dependent libraries? I'm hesitant to use fs to read ./node_modules/somelib/properties.json because the library could have been installed globally. Is there a way to achieve this using require in ...