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

Navigating through a multidimensional array in Angular 2 / TypeScript, moving both upwards and downwards

[ {id: 1, name: "test 1", children: [ {id: 2, name: "test 1-sub", children: []} ] }] Imagine a scenario where you have a JSON array structured like the example above, with each element potenti ...

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

Is there a way to prevent my slider from continuously scrolling? I think it has something to do with the offset parameter but I'm having trouble figuring it out. Any assistance would be greatly appreciated. var $container = $(container); var resizeF ...

The Material UI React radio buttons have the ability to modify the value of previous buttons

I'm facing an issue with my Material UI React Stepper Component that contains a group of radio buttons. The problem is that changing the radio button in one step affects the selected value in previous and future steps. I've experimented with diff ...

"Learn the steps to access a JSON file directly from a URL within a Next.js

My goal is to upload a JSON file to the server from a URL, open it, parse it, and display its features on Google Maps. However, I am encountering an error with the "fs" library preventing me from opening the file. Below is the code: "use client" ...

Deleting a segment of content from a webpage

Currently, I'm in the final stages of completing a blackjack game. However, one aspect that I haven't implemented yet is the ability for the user to play again after finishing a round. My initial idea is to use a window.confirm dialog box, where ...

Twice the data fetching through ajax on popup is observed using php mysql

I've been struggling for the past two hours. Attempted : location.reload(); reset form Tried many features, but after closing my popup and reopening it or opening another ID, the previous ID data is still visible. This happens continuously for all ...

Exploring the world of web programming

Looking for top-notch resources to learn about JavaScript, AJAX, CodeIgniter and Smarty. Any recommendations? ...

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

I have a scenario where I have multiple folders, each containing up to 20 images. On my HTML page, I want to display the first 5 images and provide a "click to view more" option to show the remaining 15 images when clicked. Currently, the issue I am facin ...

Finding Location Information Based on Latitude and Longitude Using Jquery

Does anyone know of a reliable solution or Jquery plugin that can provide location details based on latitude and longitude coordinates? I heard about the Google Reverse Location API but hoping for a pre-made option. I'm not sure if there are any free ...

Is it feasible to verify for vacant dates with a single click?

Is there a way to determine if a date value is empty, and if it is, display a popup indicating so? After some research, I stumbled upon a similar issue where the date value was always filled with a default "mm/dd/yyyy" value. The solution provided involv ...

Dealing with Sideways Overflow Using slideDown() and slideUp()

Attempting to use slideUp() and slideDown() for an animated reveal of page elements, I encountered difficulty when dealing with a relatively positioned icon placed outside the element. During these animations, overflow is set to hidden, resulting in my ico ...

What is the best way to send JSON data from Express to a JavaScript/jQuery script within a Pug template?

Currently, I am facing a challenge in passing JSON data from an Express route to a .js file located within a .pug template. I have been attempting to solve this issue using the following method: The router: // Office Locations router.get('/office_lo ...

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Currently facing a unique issue with a jQuery/Ajax HTML update form. The application in question is a single-page TODO App that utilizes a Rails controller, where all changes to the DOM are made through jQuery/Ajax. After rendering the TODOs on the page v ...

Searching through a JSON object on a Laravel web page using JavaScript or AJAX for live filtering purposes

After diving into AJAX and JavaScript, I find myself needing to replace some outdated Angular functionality on our Laravel site. The specific task at hand is creating a live search filter for a page with a static header search bar. The main requirement is ...

How can you retrieve the original file name and line number in exceptions that are generated in Angular controllers?

When an error occurs in my Angular controller, a stack trace is generated that typically looks like the following: TypeError: undefined is not a function at new <anonymous> (…/dist/script.js:854:5) at invoke (…/dist/base-script.js:13441: ...

AngularJS controller encounters a scoping problem within a callback function

I have created an angular application with a simple login form that can be viewed on this JSFiddle. HTML Code: <form data-ng-app="jsApDemo" data-ng-controller="loginCtrl"> <label for="username">Username:</label> <input type=" ...

Sorting WordPress entries by nearby locations

I have WordPress posts that are being displayed on a Google Map. The posts are pulling data from a custom post field that contains the latlng value, where latitude and longitude are combined into one. Additionally, the map shows the user's location u ...

What is the best way to get the number of populated children in a Mongoose schema?

Hello all, I am just beginning to learn about MongoDB and Mongoose. Does anyone know of a simple method to count the answers for each topic after using the population method? var query = Topic.find({}); query.select("title answersRef"); query.populate({p ...

I have discovered some amazing jQuery image hover effects that are simply breathtaking –

I have been using the Adipoli jQuery Image Hover Effects plugin, but I am facing issues with changing certain properties. The image is set to change to grayscale initially and then switch to color on hover. However, when I click on the image, it should mai ...