"Trouble encountered when submitting data to an external system by writing the image source - issues with Firefox and

I've been diving deep into various online resources to find a solution for an issue I'm encountering. My familiarity with Javascript is limited, so please bear with me.

Whenever I click on the next button during checkout, a script runs to submit the data to our ecommerce system. I've also incorporated a script that sends the data to an email marketing platform we utilize. The script checks if a checkbox is selected. Regardless of whether it's checked or not, I'm using the code below to insert an image where the src carries the data.

This process works seamlessly in Chrome and Safari, but Firefox and IE seem to stall loading the next page as they wait for the image response (which doesn't exist). However, the data is effectively transmitted to the external marketing system.

I'd greatly appreciate any guidance as this situation is causing quite some stress.

document.getElementById("idBtnNext").addEventListener("click", AddContact, false);

function AddContact(){
    //Variable declarations
}

if (document.getElementById('idINVOICEPRIVACY').checked == false) {
        //Action for unchecked privacy box
        return true;
    }

else if (document.getElementById('idINVOICEPRIVACY').checked == true){
        //Action for checked privacy box
        return true;
    }   
}

Answer №1

When considering the behavior caused by how an HTML element is written into a page, there may be a better approach for your needs:

To start, you can include an img element that is not visible:

<img src="" id="hiddenImg" width="1" height="1" border="0" alt="" style="visibility:hidden">
<!-- You could also use display:none; -->

The next step involves modifying your JavaScript code:

function AddContact()
{
    ... lines omitted ...

    var targetUrlStr = "";
    if (document.getElementById('idINVOICEPRIVACY').checked == false)
    {
     targetUrlStr = 'https://app.bronto.com/public/<url cut here>';
    } else if (document.getElementById('idINVOICEPRIVACY').checked == true) {
     targetUrlStr = 'https://app.bronto.com/public/<url cut here>';
    }
    document.getElementById("hiddenImg").src = targetUrlStr;
    return true;
 }

I hope this suggestion proves helpful.

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

Grunt Pokes at XML to Set a Variable Destination Name

When using grunt-xmlpoke to update an XML file, the path of the XML file is provided as a parameter. The issue arises when the first WebConfigPath (key) in the files section is interpreted as a string. This results in updating a local copy of the XML fil ...

How do I specify a unique directory for pages in Next.js that is not within the src or root folders?

I'm currently facing an issue when trying to set a custom directory in Next JS. Although the default setup dictates that the pages directory should be located at the root or within the src directory, this arrangement doesn't fit my requirements ...

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

Having trouble with the functionality of expanding rows in Kendo grid

I am facing an issue with my Kendo grid that is populated from a SQL database. The expand feature works perfectly and displays a different Kendo grid in the expanded row when the program is first launched. However, if I perform a new search and get differe ...

Strategies for resolving the problem of null values from getParameter() being passed from AJAX to servlet

After reading numerous answers on Stack overflow, I have tried various solutions to fix this issue without success. My goal is to send a JavaScript variable to a servlet using AJAX within an else statement in JS. However, I keep receiving null in the alert ...

The JQuery mobile navigation menu effortlessly appears on your screen

I am experiencing an issue with a JQuery mobile navigation that is designed for screens @979 pixels wide. The problem arises when the screen is resized to 979px - the menu pops up fully extended and covers the content of the web page. I suspect that this ...

Error in React Native JS: Cannot call the `map` function on variable `l`

Recently diving into the world of Js and React, I am tasked with creating an application for Macronutrients in my second semester project. The challenge I'm facing is incorporating a Pie Chart that displays the values from my state. To implement the ...

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

The value 'true' was returned for an attribute 'exact' that is not of boolean type

How can I resolve this warning? Sample Code const Main = (header, navigation) => { return ( <> <div> {navigation !== false && <Navigation />} </div> </> ) } I attempted this soluti ...

Error: THREE.FileLoader does not exist as a constructor

Having difficulty implementing a framework with three.js for an assignment. After cloning this repository and running npm install to download dependencies, the server displays TypeError: THREE.FileLoader is not a constructor. The issue appears to be relat ...

Creating a custom Angular filter that leverages the power of $http - a

I want to make a retrieval request using $http in AngularJS and then display the obtained result on the front-end. To achieve this, I'm using {{ URL-STRING | iframely }}. 'use strict' angular.module( 'iframely', [] ).filter( &ap ...

Steps for automatically toggling a button within a button-group when the page is loaded using jQuery in Bootstrap 3

Here is a button group setup: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="environment" id="staging" value="staging" />Staging </label> <label class= ...

The object persists in revealing the password that I am attempting to conceal

Seeking help to hide the password object from being displayed. Below is my code snippet where I am using bcrypt to hash the password. Even though I am trying to hide the return object, I am not seeing the desired outcome. Can someone please point out wha ...

What is the best way to incorporate a transition on transform using Styled-components?

I attempted to add a transition on the transform property, but unfortunately, it did not produce any visible changes. I tested other properties such as: background-color, color... and they worked perfectly fine. live code: source code: // styled-compo ...

Excluding the decimal point from version 1.0 in an API response with Angular 5

When working with Angular 5, I encountered an issue where the API response was returned as 1.0, but when displayed in the HTML field it only showed as 1. Upon inspecting the response in Chrome dev-tools, under the Network tab -> Response, it correctly ...

What is the reason behind the addition of '.txt' by the Next.js `Link` Component when redirecting to `href='/'` on GitHub pages?

My website is hosted on github-pages, and I am using the Link Component from Next.js to navigate within it. However, when I click on a component with the href="/", it adds .txt to the end of the URL. My website follows the /app structure. I have ...

Dynamic visual content (map)

I'm currently working on creating an interactive image for my website where clicking on points A, B, C, ... N will reveal bubbles with images and text inside them. Would anyone be able to provide guidance on how to achieve this? Or direct me to resou ...

Guide to retrieving environment variables within React/Node.js applications running in Kubernetes pods

While setting environment variables in Kubernetes pods, I encountered an issue when trying to access them in either Node.js or React front-end code using process.env.TEST (where TEST is present in the environment as secrets), as it always returned undefine ...

Error message: The 'node_modules' directory is not found after installing

During class today, I faced a problem. I was demonstrating to my students how to install and use gulp.js using a projector. I successfully installed node.js and gulp.js globally with npm install -g gulp without any issues. However, when attempting to ins ...

Troubleshooting CSS3 @keyframes animation issues within Firefox's shadow DOM

I am currently working on creating a custom shimmer loader using CSS3 keyframes animation within the shadow DOM. While the shimmer effect displays perfectly in Chrome and Safari, it seems to be malfunctioning in Firefox. Below is a concise snippet that de ...