What is the best way to trigger a function with a bootstrap toggle?

A toggle switch has been implemented using bootstrap with the following code snippet:

<label >
  Automatic Refresh:
</label>
<input class="pull-right" data-size="mini" type="checkbox" data-
toggle="toggle">

When the toggle button is in the "On" position, an automatic refresh function should be triggered in the application. Conversely, when the toggle button is switched to "Off", the automatic refresh function should be disabled. For testing purposes, setInterval() and clearInterval() will be used for toggling between these functions.

The code that should execute when the toggle is set to On is as follows:

var int = setInterval(function(){ alert("Hello"); }, 1000);

The code that should run when the toggle is turned off is:

clearInterval(int);

To make a function call when the toggle button is clicked, you can use event listeners or jQuery functions. Here is how the toggle button appears: https://i.sstatic.net/N4Nwa.jpghttps://i.sstatic.net/mcLkm.jpg

Answer №1

To trigger a change using the onchange event, follow these steps:

In this particular scenario, I have assigned an id to your checkbox and utilized it to link the onchange event (other methods exist as well):

<input id="toggle-data" class="float-right" data-size="small" type="checkbox" data-
toggle="switch">

Below is the JavaScript code used:

document.getElementById('toggle-data').onchange = function(event){

        if(event.target.checked) {
            //Switch is activated
        } else {
            //Switch is deactivated
        }
};

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

Searching for a way to access the child window URL within the parent window on a React.JS platform?

I am working on a ReactJS code and I need to open another URL in my child component. twitterPopup = () => { var currentChild = false; if (currentChild) child.close(); child = window.open( "http://10.10.1.1:9090/api/v1/twitter/login" ...

Is the maxlength attribute malfunctioning in Chrome and Safari for HTML forms?

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"> I found this HTML snippet using the Firebug tool in Chrome. In Chrome and Saf ...

A step-by-step guide on integrating the CSS file of react-datepicker into a Nestjs SSR application with AdminJS

Currently, I am integrating the react-datepicker component into my SSR project built with Nest.js and Admin.js. To ensure that the React components function properly and are styled correctly, I need to include the line 'import 'react-datepicker/d ...

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

In need of an AJAX image viewer compatible with PHP or considering transforming an ASP image viewer to PHP

Currently, I am in search of a Javascript (preferably based on jQuery) Ajax image viewer with a zoom feature that is compatible with PHP. The closest match to what I require is a script called "thinDoc" which I found to be very impressive: thinDoc To se ...

Move the DIV element to the bottom of the webpage

On my website, I have implemented a countdown timer and a responsive wallpaper. My goal now is to center the div at the bottom of the page and make sure it always stays there. I've tried some code snippets from StackOverflow, but they either gave me a ...

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

Currently, I am iterating through [postArray] to retrieve various posts, each of which has its own unique "_id". My goal is to utilize this "_id" to add likes to the corresponding post. This is the v-for loop I am using: <div class="posts" v- ...

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

While working with Material-UI, I encountered a problem with my drop-down menu. Every time I click on it, it covers the bar instead of appearing below it (see image links below). https://i.stack.imgur.com/1Y8CL.jpg https://i.stack.imgur.com/emf87.jpg Is ...

How can I make a drop-down field in AngularJS show the current value after populating options in a select control using ng-options?

This conversation centers around an app that can be visualized as, https://i.stack.imgur.com/Y1Nvv.png When a user clicks on one of the stories on the left side, the corresponding content is displayed on the right-hand side. Each story includes a title ...

Update the text on the button

I stumbled upon part of the solution at :jQuery change button text My quest is to find out how to toggle the button text. I attempted using the class method to switch between "show teams" and "hide teams". Simply changing the text property on button click ...

Transferring JSON information from Express to Backbone

I have developed a basic Backbone application and am trying to integrate JSON data from a MYSQL database using an Express server. However, when I make a GET request with Express to fetch data for Backbone, the html template in Backbone disappears, leaving ...

ngAnimate - Animation not activating on recurring custom directive

I am trying to implement ngAnimate on a custom directive that is repeated using ng-repeat in my AngularJS application. The animations function correctly when I use ng-repeat on a simple HTML list-item. However, when I replace the list-item with a custom di ...

JavaScript: utilizing a function as a hash key

In my program, I need to execute different functions based on the input. If the input matches one of the predefined keys, I want to invoke the corresponding function along with some parameters: var functions = { 'key1': firstFunction, ' ...

Tips for inserting a button under a div when clicked

I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...

Using AngularJS to link a model referenced in the view (ng-bind) to a $resource obtained from an API

I'm currently facing a challenge in Angular where I need to establish a connection between a database object displayed in the html view and its corresponding instance through a json API. While I have a functioning api and $resource, I am struggling t ...

The function fails to return any value, however console.log does output something

I am attempting to implement a JavaScript function that checks for repeated letters within a string. The goal is for the function to return false if any repeating letters are found, and true if no repeats are present. However, I am encountering an issue wh ...

Ensure that the width of the table rows (tr) matches the width of the table header

I'm currently working on implementing a sticky table header. The issue I'm facing is that the width of tableHeaderRow does not match the width of tableHeader. Steps taken for creating sticky header: Make an Ajax call to populate the table with ...

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

Is Fetch executed before or after setState is executed?

I've encountered an issue while trying to send data from the frontend (using React) to the backend (Express) via an HTML form, and subsequently clearing the fields after submission. The code snippet below illustrates what I'm facing. In this scen ...

Stop fullscreen mode in Angular after initiating in fullscreen mode

Issue with exiting full screen on Angular when starting Chrome in full-screen mode. HTML: <hello name="{{ name }}"></hello> <a href="https://angular-go-full-screen-f11-key.stackblitz.io" target="_blank" style=& ...