Prevent onlick actions until JavaScript function has completed

I run a dynamic quiz website using PHP, JavaScript, and MySQL. The quiz consists of multiple choice questions with answer options displayed on four buttons.

<input type = "button" value="$alt1" onClick="changeQuestion('alternative1'); this.style.backgroundColor = '#A9A9A9'">

I am looking for a solution to prevent users from clicking multiple answer buttons before the JavaScript function completes its execution. This behavior currently causes issues with the quiz results.

The onclick event triggers a JavaScript function that uses AJAX to communicate with a PHP file responsible for processing the chosen answer.

Thank you in advance for your help!

javascriptajaxonclick

Answer №1

To simplify this process, it is recommended to use a flag variable:

var inProgress = false;

function updateStatus(name)
{
    // Check if another action has set the status to in progress.
    // If so, bail out to prevent unwanted behavior.
    if(inProgress) return;
    inProgress = true; // Set the flag!

    /* ... later ... */
    // In the success callback of your AJAX request:
    inProgress = false;

Answer №2

To ensure your Ajax request runs smoothly, consider running it synchronously.

With jQuery, simply include the parameter async=false like this:

$.ajax({
    url:'bar.handler.php',
    data:parameters,
    async:false,
    success:function(){
        // perform an awesome action.
    }
});

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

Utilizing React JS with Material-UI Autocomplete allows for seamlessly transferring the selected item from the renderInput to the InputProps of the textfield component

Exploring the functionality of the updated version of Autocomplete, my goal is to ensure that when an element is chosen from the dropdown menu, the input format of the text field will be modified to accommodate adding a chip with the selected text. Is the ...

javascriptreactjsautocompletematerial-ui

Attempting to nest an AJAX request within the success callback of another AJAX request

I am attempting to execute two jQuery ajax calls, with the second call being made from the success callback of the first. I have experimented with different variations of the code, such as adjusting the brackets. Below is my attempted code snippet: $.aja ...

javascriptjqueryajax

Jquery Validation Plugin - Specifically for validating numeric inputs in specific situations

I am currently working on implementing validation using jQuery Validate for a numeric value, but only when a specific radio button is checked. If the radio button is not checked, the field should be required and allow alphanumeric values to be entered. How ...

javascriptjqueryjquery-pluginsjquery-validate

What is the best way to dynamically retrieve a URL and utilize it as a hyperlink using jQuery?

Is there a way to retrieve the current URL and use it as a link in jQuery? For example, if my browser is currently on page mysite.com/index.php?page=post&see=11, I would like to use this URL in my link and append /new/ after the domain name, like so: ...

javascriptphpjquery

When attempting to establish a socket connection to a node server from an HTTPS protocol, a mixed

I have recently enhanced my website by adding a nodejs+socket.io based conversation server to it. This server is hosted on a separate AWS instance while the main website runs on HTTPS. However, I encountered an issue when trying to establish a socket conn ...

javascriptnode.jswebsocketsocket.ioreverse-proxy

Validate if a string in JQuery contains a specific substring

How can I determine if one string contains another string? var str1 = "ABCDEFGHIJKLMNOP"; var str2 = "DEFG"; What function should I utilize to check if the string str1 includes the string str2? ...

javascriptjquerystringcomparisoncontains

Having trouble initiating npm?

I am currently learning Angular2, and I encountered some issues when trying to initiate the npm server by running npm start in the project's directory. Here are the errors I received: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptangularjsnode.jswebnpm

Unable to retrieve a state property within a Vue template

Embarking on my Vue journey, I've been immersing myself in online videos to grasp the essence of this framework. One intriguing observation that has piqued my curiosity is the difference in behavior when I switch from a template to a render function i ...

javascriptvue.js

How can I pass an array object from an HTML form that adheres to a Mongoose schema

I have this HTML form that I'm using to create a new document in my mongo database. The document represents notes given to a teacher based on various criteria. I am storing the notes in an array within the note property, each object containing the aut ...

javascripthtmlnode.jsexpressmongoose

Installing material-ui using npm does not always result in getting the most up-to-date version

I'm currently facing a dilemma with an abandoned project that serves as the admin tool for my current project. The Material-UI version used in this project is 0.19.4. However, when I remove the dependency from my package.json file and execute npm inst ...

javascriptreactjsnpmmaterial-uipackage.json

Various outcomes were calculated for multiple Vue.js inputs

I am facing an issue with multiple dynamically added search forms on my webpage. Currently, when a user performs a search on one form, all inputs are being searched instead of just the relevant one. Below is the HTML Code for reference: <div class="ro ...

javascriptvue.jsvuejs2

Tips for eliminating duplicate values from an array

In my NodeJS code, I am currently comparing values in an array. The issue at hand is: I start with an empty array: var items = []; then proceed to insert some values into it: items[0] = {a:1, b:222}; items[1] = {a:1, b:333}; items[2] = {a:1, b:222}; ...

javascriptarraysnode.js

- **Rewrite** this text to be unique:- **Bold

Check out this relevant jsFiddle link Below is a list where I aim to make all occurrences of the word 'Bold' bold: <ul id = "list"> <li>Make this word Bold</li> <li>Bold this as well</li> <ul> ...

javascriptjquery

Encountered an error loading resource: server returned a 400 (Bad Request) status when using Angular with NodeJS

My Angular and NodeJS application with Express (v4.17.1) exposes a REST API like this: app.get('/myRestApi', function (req, res) { console.log('here you are ... '); res.end('success!\n'); }); The body of this API ...

javascriptnode.jsexpresshttp

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

javascripthtmlnpmpaginationhandlebars.js

Issue with Angular 6 subscribe event not being caught by subject?

A new element was crafted to house a loader: @Component({ selector: 'app-loader', templateUrl: './loader.component.html', styleUrls: ['./loader.component.scss'], providers: [LoaderService] }) export class LoaderCompon ...

javascriptangular

Accessing a JSON file over a network using JavaScript

Struggling to access a basic data file using JavaScript, and it's proving to be quite challenging. The file will be hosted on a remote server and ideally accessed via HTTP. While I'm new to JavaScript, I've come across JSONP as a potential s ...

javascriptjqueryajaxjson

Creating flexible Vue routes using a single router component and a navigational menu

I am working on a Vue project and I want to implement nested routes in my router.js. My goal is to have just one menu for all the nested routes and only one <router-view></router-view> in a master component. This is what I envision (in pseudoc ...

javascriptvue.jsvue-router

Performing bulk operations on multiple documents in MongoDB by specifying a custom identifier for updating or

Recently, I've been working with a mongo schema const taskSchema=new Schema({ userID:{type:ObjectId,required:true}, task: { type: String, required: true, trim: true, maxlength: 30, }, finalDate:{type:Date,required:true}, ...

javascriptnode.jsmongodbexpress

Retrieving data from MongoDB for rendering on an HTML page

I have successfully inserted data into my MongoDB database, but I am facing issues with the "get" function to display this data on my HTML page. My current setup involves using Node.js with Express framework and Angular for front-end development and routi ...

javascriptangularjsnode.jsmongodbexpress