How to get On/Off FlipSwitch to trigger function


Tags: javascript,html,css,css3,google-apps-script

Problem :

Hi i found these On/Off flipswitches https://proto.io/freebies/onoff/ that will generate CSS3 On/Off flipswitches with animated transitions.

Im using Google Apps Script / Add-on and i have the CSS + HTML on my client-side. I would like it to trigger a function when it's switched, both on & off should trigger the same function. enter image description here

Simple button:

enter image description here

This is how a Simple Button does it now:

Client-Side:

<button onclick="google.script.run.insertTextToCellA();" id="ButtonA">Button A</button>

And it triggers my Server-Side function:

function insertTextToCellA(){
var cellA = table.getRow(1).getCell(2).getChild(0);
    cellA.setText('Hello Testing!');         
  }
}

And this is how my code looks like with Switch Button:

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

Question: I don't have any 'onclick' with this switch button, how can i make it trigger my server-side function?



Solution :

You can bind an onclick event to any HTML element.

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onclick="google.script.run.insertTextToCellA();" checked/>

JSFiddle Example


    CSS Howto..

    css - how to add another div above one with 2 colums layout?

    how to make a child div visible when clicking its parent div in pure css

    How to preload predefined images in Java-Script / jQuery?

    How can I transform dots to line between CSS menu items?

    How to draw a centered line with a rectangle to one side in CSS

    How do I get Slick carousel to work? [closed]

    How to get the authored style properties of an element?

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How are these check-marks being drawn?

    How to use conditional CSS for IE browser in drupal6?

    How to apply css class to an html element using jquery in ASP .NET MVC?

    How to make H1 tag responsive in Avada WordPress theme using CSS

    How to avoid overlapping HTML tags to highlight text

    How to change nav text color when scrolled over other div anchors in the page

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    How to set style for a column in an extjs 4 grid [closed]

    Customizing Clockdown.js to Show only Minutes and Seconds

    How do you get multiple views in one window like JSFiddle does [closed]

    How do I link JS file from other folder to a page?

    css how to make H2 tag look same as H3 tag (turned out hard!)

    css how to make an elements margin-bottom go to bottom of its container

    How to underline blank space in CSS?

    How to make these jquery pop ups fall back to css when javascript disabled

    How to prevent CSS block elements from affecting parent inline-blocks

    How to make outer div fit child divs?

    How to style this triangle on a circular image?

    How to put text on top of a pattern overlay CSS

    How do I make the 'panel/well' dynamically wrap around the image while keeping it centered? // Using Bootswatch/Bootstrap CSS

    How to load external css in CakePHP?

    In a framework using rewrite rules, how best to integrate CSS and JS?