JavaScript: The delayed submission feature is malfunctioning

Visit this link

When using JSFiddle, a strange list of errors is generated (see pic here). However, the auto-submit feature on my page works fine, but it lacks the specified delay. Thank you in advance for any assistance.

<form id='formBlokUziv' action='' method='post'>

  <div class='onoffswitch'>
        <input type='checkbox' name='onoffswitch1' value='1'   onchange='setTimeout(document.getElementById("formBlokUziv").submit(), 5000);' class='onoffswitch-checkbox' id='myonoffswitch1' >
    <label class='onoffswitch-label' for='myonoffswitch1'>
        <span class='onoffswitch-inner'></span>
        <span class='onoffswitch-switch'></span>
    </label>
  </div>

  <div class='onoffswitch'>
        <input type='checkbox' name='onoffswitch2' value='2' onchange='setTimeout(document.getElementById("formBlokUziv").submit(), 5000);' class='onoffswitch-checkbox' id='myonoffswitch2' >
    <label class='onoffswitch-label' for='myonoffswitch2'>
        <span class='onoffswitch-inner'></span>
        <span class='onoffswitch-switch'></span>
    </label>
  </div>

  <div class='onoffswitch'>
        <input type='checkbox' name='onoffswitch3' value='3' onchange='setTimeout(document.getElementById("formBlokUziv").submit(), 5000);' class='onoffswitch-checkbox' id='myonoffswitch3' >
    <label class='onoffswitch-label' for='myonoffswitch3'>
        <span class='onoffswitch-inner'></span>
        <span class='onoffswitch-switch'></span>
    </label>
  </div>

</form>

Answer №1

When you enter commands as the first parameter in a setTimeout function, they will be executed right away. To ensure that your timeouts run after the specified delay, encapsulate each one within a function. Here's an example:

setTimeout(function() { document.getElementById("formBlokUziv").submit() }, 5000);

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 JMeter's WebDriver Sampler to Upload Firefox Profile

Currently, I am working on creating a JMeter script to measure the UI response time for different events using the WebDriver Sampler plugin. In my application, access to the GUI is restricted to certificate-authentication only. Therefore, my concern is wh ...

Troubleshooting Media Queries Problems in HTML and CSS

Check out the code snippet below: //Modifying text content (function() { var texts = $(".altered"); var textIndex = -1; function displayNextText() { ++textIndex; var t = texts.eq(textIndex) .fadeIn(2000) if (textIndex < te ...

javascript The array is showing up as blank

I am trying to return the entire object where linkable is set to true. Even though I am pushing the objects, the this.releaseDescriptionDatesArray remains empty. It seems like my logic is correct, so not sure why the array is not populating. for (const it ...

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values. table[my-type="myStyle"] { width: 255.388px !important; } This code snippet is included in numerous CSS files within my style directory. ...

Is it possible to dynamically add the URL to an iframe based on a condition being true, and then iterate through a list of URLs before

I'm trying to figure out how to change the URL in an iframe based on the presence of a class="show". The first time the element has the class "show," it should load about.html. The second time the same element has the class "show," it should open wor ...

Tips for locating precise information within nested object formations using Javascript

Within my code, I have showcased two distinct types of response. Upon closer examination of the following code snippets, it becomes evident that the structure of the response from a service differs slightly between the two types. In the first type, there i ...

Can you explain the purpose of FunctionConstructor in typeScript?

As I delved into the Typescript Ecmascript source code, I stumbled upon this intriguing snippet: interface FunctionConstructor { /** * Creates a new function. * @param args A list of arguments the function accepts. */ new(...args: st ...

Identify when a request is being executed using AJAX by checking the URL

My current code includes multiple ajax requests from various JavaScript files. I am looking for a way to identify specific ajax requests and interrupt their execution in order to prioritize a newer one. Is it possible to detect and stop ajax requests based ...

MUI: The value you have chosen for the select component is outside the acceptable range - `[object Object]`

I'm currently in the process of developing a custom Select component that offers both single and multi-selection features. Below is how I initialize the components: const vendorList = [ { label: "John", value: "668", } ...

Transferring an object from the factory to the controller

I'm currently working on setting up a factory that sends an ajax request to an API and then returns a data object. Here is the code snippet I have written: app.factory('Test', function($http, $q) { var data = {response:{}}; var getM ...

What is the best way to ensure that the Next.js app listener is attached before the 'load' event of the window is triggered?

Recently, I started working with next.js, incorporating TypeScript in version 13.5.5. One crucial requirement for the application is that it must be placed within an iframe and communicate with the parent/host through the window.postMessage event. To achie ...

Transforming an ES6 JSON object into a dictionary: a step-by-step guide

As someone who is new to learning ES6 and JQuery, please forgive me if this question has been asked before (I couldn't find similar ones). Currently, I am working on retrieving data from a JSON file in the following format: { EUR: { code: "EUR" ...

When using the v-for directive with an array passed as props, an error is

I encountered an issue while passing an array of objects from parent to child and looping over it using v-for. The error message "TypeError: Cannot read property 'title' of undefined" keeps appearing. My parent component is named postsList, whil ...

Tips for horizontally arranging a list with a flexible number of columns

I am attempting to create a horizontal list with 3 columns that automatically moves to a new line when the columns are filled. I have been trying to implement this using PHP but haven't had any success. If anyone could provide some guidance on how to ...

Obtaining a substantial pdf file using html2pdf

While using html2pdf to generate a PDF of my website, I noticed that the downloaded PDF ends up being 14 pages long. However, after approximately 12 pages, all the colored elements seem to disappear. On mobile screens, this issue occurs even sooner, around ...

Issue with Retrieving a particular table from SQL Server using mssql in javascript ('dbo.index')

I am currently experiencing an issue with trying to access a table named dbo.Index from SQL Server in my node js express application. Unfortunately, whenever I attempt to do so, the operation fails and returns no data. Below is the code snippet in questio ...

Tips for adjusting the horizontal position of a grid item within a map() loop

I am trying to align the text in my Timeline component from Material Ui always towards the center of the timeline. The TimelineContent contains Paper, Typography (for title and description), and an image. Currently, I have multiple TimelineContent element ...

Are there any tools available that can convert ThreeJS code into WebGL?

Are there any existing tools that can convert ThreeJS to WebGL? Or, could you provide guidance on creating a converter for ThreeJS to WebGL? ...

Issues encountered while using the rest operator with jQuery .when method

We have implemented a wrapper in our code base for handling ajax calls using jQuery. The purpose of this wrapper is to make it easier to eventually switch away from jQuery, if needed, by isolating all ajax-related calls. Below is the definition of the wrap ...

The useEffect hook is able to fetch data even when the state stored in the dependency array remains constant

I have been working on developing a quiz page that utilizes the useEffect hook to fetch data. The data retrieved includes the question as well as multiple-choice options. There is a button labeled Check Answer which, when clicked, reveals the user's f ...