establish headers when sending form data

When making an ajax call for form submission, it is possible to set headers before sending the request to the server. But what if you are using a specific action "URL" to send data to the server? How can you set any header for that request?

Case 1:

<form onsubmit="somefn()">
<input type="text">
<input type="file">
<input type="submit">
</form>

In Case 1, you can make an ajax call in "somefn()" and set request headers before sending the form data.

Case 2: (Addressing IE9 issue)

 <form action="/someurl">
    <input type="text">
    <input type="file">
    <input type="submit">
    </form>

In this scenario, the form will be submitted to the specified action URL. How do you set headers for this request when no ajax call is involved? It's a normal form submit process.

The actual situation involves file upload in IE 9 using an "iframe" for submission. However, an "authtoken" needs to be sent along with the request. While other browsers use http requests where setting the "authtoken" is straightforward.

How can this be achieved? Any assistance would be appreciated.

Answer №1

Unfortunately, the browser does not provide a built-in feature to set custom HTTP Request Headers when submitting forms, clicking links, or loading images unless you are using the XMLHttpRequest or fetch APIs.


Here are some alternatives:

  • Send the request to a server-side script under your control and add the header there before sending it along.
  • Modify your API to accept standard form data instead of requiring an HTTP header.
  • It's time to move on from IE9 as Microsoft has ended support for it over a year ago. Continuing to use IE9 puts users at risk of malware infections since it no longer receives security updates.

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

How to efficiently import Xlsx and csv files using AngularJS

I am looking for a way to extract data in json format from each line of xlsx and csv files using AngularJS. Currently, I am utilizing the angular-file-upload library to access the file as shown below: $scope.LatLongUploader = new FileUploader({ //url ...

Tips for calculating the canvas-relative mouse position on a CSS 3D transformed canvas

Recently decided to challenge myself by experimenting with drawing on 3D transformed canvases. After some trial and error, I managed to get it partially working. const m4 = twgl.m4; [...document.querySelectorAll('canvas')].forEach((canvas) =& ...

Utilizing the variable's value as a parameter in a jQuery selector

I am having trouble replacing $('#divy a:lt(3)') with the variable instead of a hard-coded number like $('#divy a:lt(count)'). Check out this Fiddle for more information. var timerId, count = 0; function end_counter() { $('# ...

Separate the string by using a comma to create new lines

I'm trying to figure out how to split a string by commas and create new lines. I tried using the split and join functions, but it's only removing the commas without actually creating new lines. string='Lorem Ipsum,Lorem Ipsum,Lorem Ipsum&ap ...

Displaying a page with dynamic data fetched from the server-side to be utilized in the getInitialProps method of

As a newcomer to next.js, my goal for my project is to connect to a database, retrieve data, process it using express, and then utilize it on the client side of my application. I plan to establish a connection to the database within the express route han ...

Issues with setting the variable correctly while implementing form validation using jQuery and AJAX

Currently, I am in the process of validating a form using a combination of Javascript and jQuery. Once the validation function is completed, an AJAX call is made to check if a particular entry already exists in a SQL database. The AJAX call works perfectl ...

How come these functions continue to be executed asynchronously even when the Async module is being utilized?

My decision to utilize the Async module aimed at populating a mongodb collection according to a specific order proved to be quite challenging. Despite the fact that the code worked without Async, it failed to insert documents in the desired sequence: func ...

Methods to Maintain Consistent HTML Table Dimensions utilizing DOM

I am facing an issue with shuffling a table that contains images. The table has 4 columns and 2 rows. To shuffle the table, I use the following code: function sortTable() { // Conveniently getting the parent table let table = document.getElementById("i ...

Troubleshooting a GetStaticProps problem in Next.js

I'm currently facing an issue with retrieving posts from my WordPress site. After running tests on the URL endpoint, it seems to be functioning properly with client-side rendering. However, when I attempt to utilize the getStaticProps function, the re ...

What is the best way to modify a constant array in Angular?

Hello team, I'm fresh to working with angular and I have a TypeScript file that contains a list of heroes: export const HEROES: Hero[] = [ { id: 11, name: 'Dr Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombas ...

What is the best way to display two cards while concealing a third one using a "show more"

Is there a way to hide certain cards by default and only show them when the user clicks on a "View more" button? I have multiple cards, but I want to hide the last one initially and reveal it when the button is clicked. I would really appreciate any assis ...

sending parameters into a regex within a function

Struggling to pass a variable into a robust regex, managing to make it work outside the function but unable to figure out how to get it working within a function. Not sure why match[1] is returning null or how to find words after a keyword. Here's wh ...

A step-by-step guide on constructing this JSON using PHP

Having an issue with my PHP code for sending a push notification as my JSON object is not formatting correctly... I am aiming for my JSON to be structured like this: { "to": ["xxx"], "data": { "title": "dw", "body": "dw", ...

Handle cross-domain failures by using ExtJS to send an Ext.Ajax.request

Hello, I understand that this may be an older issue. I have consulted this source, but unfortunately, the solution provided did not work for me. Upon using Chrome, the following error message is displayed: XMLHttpRequest cannot load target url. No &apos ...

Incorporating Dynamic Component Imports in Vue.js Data and Computed Properties

I have a component called 'Page' that needs to display another component retrieved via props. Currently, I am able to successfully load my component by hardcoding the path in the data like this: <template> <div> <div v-if=" ...

Is there a way to save a collection of audio samples as a wav file using Node.js?

In my JavaScript code, I am developing an oscillator that generates a sweep (chirp) between different sine wave frequencies. To test this functionality, I would like to save the samples (which are in floating point format) to a WAV file. Can anyone provi ...

When transitioning between different node.js apps, the URL localhost:3000 remains constant

As I was launching a fresh node.js application (referred to as app 2), an unexpected and puzzling phenomenon occurred. I decided to run app 2 after spending some time working on another application earlier in the day (app 1). With the previous app, there w ...

Identifying instances where the AJAX success function exceeds a 5-second duration and automatically redirecting

Greetings! I have created a script that allows for seamless page transitions using Ajax without reloading the page. While the script functions perfectly, I am seeking to implement a feature that redirects to the requested page if the Ajax request takes lo ...

Tips for submitting a form using JavaScript without the button causing a page refresh

I am trying to submit a simple form using Ajax, but no matter what I do, the form keeps refreshing the page. My goal is to submit the form with a GET request using JavaScript so that I can receive a JavaScript response from the server. <div id='f ...

Enhancing the building matrix with JavaScript (or jQuery)

I have created a custom Javascript function for extracting specific data from a matrix. The main purpose of the function is to retrieve data based on dates within a given range. Here's how it works: The matrix[0][i] stores date values I need to extr ...