JavaScript Functions Not Being Executed by Onclick Event in Internet Explorer 8

When a user clicks, I need two functions to run. This works in Firefox and Chrome, but not in IE8.

The first function should display a modal (indicating that the form is being saved, although it's not showing up) while the second function saves the form and hides the modal.

HTML

<a onclick="openModal();saveForm();">Click Me</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div id="modal">
        <img id="loader" src="static/images/ajax-loader.gif" />
    </div>
</div>

JavaScript

   function openModal(){
       $('#myModal').modal('show');
   }

   function saveForm(){
    //--- some logic
   }

I appreciate your help!

Answer №1

Personally, I prefer not to attach event listeners using the "onclick" attribute in HTML elements. It is more efficient to use .addEventListener method. Another option that I highly suggest is checking out jQuery. In jQuery, you can achieve the same functionality like this:

$('a').click(function(){
  doThis();
  doThat();
}

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

What is the best way to hide a custom contextmenu in AngularJs?

I created a custom contextmenu directive using AngularJs. However, I am facing an issue where the menu is supposed to close when I click anywhere on the page except for the custom menu itself. Although I have added a click function to the document to achie ...

AngularJS supports asynchronous validation on blur

Using Angular JS version 1.5.6, I am looking to implement asynchronous input validation that occurs only on blur. However, I am unable to use modelOption: {debounce: 500} or modelOption: {updateOn: 'blur'} due to the directive being used with oth ...

The local authentication feature in NodeJS Passport is experiencing issues and not functioning properly

I have integrated passportjs local for authentication. However, I am facing an issue where it always redirects to the failureRedirect without displaying any error messages. The redirect also includes the original username and password, resulting in a dupli ...

How to seamlessly integrate Redux into your React project using create-react-app?

Is it correct to pass a reducer as props when using a rootreducer? This is the content of my rootReducer.js file: import { combineReducers } from 'redux'; import simpleReducer from './simpleReducer'; import messageReducer from '. ...

Can a sophisticated text editor be utilized without a content management system?

Many website builders utilize rich text editors as plugins to enhance content creation, such as in CMS platforms like Joomla and WordPress. However, can these same editors be easily integrated into a custom website built from scratch using just HTML, PHP ...

Node.js encountering req.body as undefined when using form-data as the content-type

After creating a small demonstration for this form-data passing API, I attempted to test it using Postman. However, I encountered an issue where no data was being retrieved. Code const http = require("http"); const express = require("expres ...

Vue 2.0 custom filter not producing any output

I am attempting to create a customized filter that identifies and returns the items that correspond to a given input. It functions effectively with basic arrays like ['Apple', 'Banana', 'Cupple'], but encounters difficulty whe ...

How come my dynamic source path doesn't function correctly unless I add an empty string at the end of it?

Recently, I encountered an issue while using Vue.js to dynamically create a source attribute using an object's properties. Here is the code snippet where I faced the problem: <img :src='"../assets/" + project.image.name + "." + project.image. ...

The extent of locally declared variables within a Vue component

Within this code snippet: <template> <div> <p v-for="prop in receivedPropsLocal" :key="prop.id" > {{prop}} </p> </div> </template> <script> export default ...

Neglecting to pass data to the controller through the onclick function

Using this specific button element in my JavaScript implementation has raised some concerns. <button id="bid" type="button" class="button" onclick="connect()">Save</button> While I have noticed that it displays an alert message when 'ale ...

Toggle visibility of table row upon user click (HTML/JQuery)

Having an issue with showing or hiding table rows using jQuery. I would like it so that when a user clicks on a table row with id="jobtitle", the corresponding tr with class="texter" will either show up or hide if it is already displayed. This is my curre ...

Unable to retrieve JSON information using AJAX

Trying to retrieve data from the server without refreshing the page using AJAX. The issue is that the data appears as text rather than in JSON format. Here is my code: $.ajax({ type: "GET", url: "http://localhost:8080/search?key=" + QUERY + "", ...

Deconstructing arrays in the req.body object in a Node.js Express application

Received an array in the request body as follows: [ { "month" : "JUL", "year" :"2018" }, { "month" : "JAN", "year" :"2018" }, { "month" : "MAR", "year" :"2018" } ] This array consists of two parameters (month:enum and year:string). ...

Passing an anonymous function as a parameter to a function in ng-init is a common practice in AngularJS v1.4.8

Is it possible to save a call to an anonymous function using ng-init? For example: <div class="container-fluid" ng-app="AVF" ng-controller="ConfigController" ng-init="RegisterInitFunction(function() { $scope.GetData(); })" > In my controller: ...

In React, when a user clicks the back button on the browser window, ensure you pass props back to the originating component

While moving from component A to component B through routing, I want to send a prop back to A when the user clicks on the browser's back button while on B. Can this be achieved? I am currently using React's history.push for navigating between com ...

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

Encountering a 500 internal server error when utilizing jQuery and Ajax with Laravel 5.2

I have been working on a post editing system using jQuery and Ajax in Laravel 5.2. But when I try to save the changes by clicking on the button inside my Bootstrap modal, an error pops up: Error: POST http://localhost:8000/edit 500 (Internal Server Error) ...

Utilizing ReactJS to creatively overlay a video on top of an image with the option to

Is there a method to superimpose a video onto an image while having the ability to select the blending mode for them? Similar to how Photoshop and Final Cut provide various blending modes such as Overlay, Multiply, Add, etc. Could there possibly be a libr ...

AngularJS expression utilizing unique special character

There are certain special characters (such as '-') in some angular expressions: <tr data-ng-repeat="asset in assets"> <td>{{asset.id}}</td> <td>{{asset.display-name}}</td> <td>{{asset.dns-name}}</td&g ...

What is the best way to extract data from a JavaScript object received from multer?

Currently, I am facing an issue while trying to utilize multer for handling the upload of a CSV file in Express. The goal is to parse the uploaded file line by line. Although I can successfully retrieve the file as an object stored in req.body, I encounter ...