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..

    How to keep symmetry with CSS fluid spacing of dynamic content

    Show-hide based on two sets of selectors--how to make them work together?

    How to put a
  • over an
    • How to remove the blue border around ImageMap control in the Internet Explorer?

      How to use CSS :not() properly?

      How to add vertical scrolling to Windows 8 app in snapped view

      How to create a code block on website

      How to fill a QTextBrowser with a single table in Qt?

      Show submenu with CSS without using an unordered list

      How to dynamically create '@-Keyframe' CSS animations

      How to handle cq component with same html structure and different css?

      How to use Font Awesome for checkboxes etc

      Using CSS, how to modify a child element by its class without impacting another child element with the same class but slightly different parent

      How to automatically choose which css to use depending on the URL/website and/or server I'm on?

      How To Refer To CSS Background Image in Visual Studio?

      How to assign speed parameter to callback functions

      JavaScript CSS how to add and remove multiple CSS classes to an element

      How can I retrieve infos from PHP DOMElement?

      How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

      How to force text wrapping with floated elements

      How to resize a Java Script element to fit its container window

      How to add padding to a ul/li menu with a background image?

      How to make image stretch to a specific paragraph?

      How to call CSS animation manually with Javascript?

      How to create readonly textbox-like structure using html (div/span) and css?

      How can I add CSS and JS in Symfony2?

      How do you style TextFlow with CSS Styles in Flex 4.5.1?

      How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

      How to use css style in php

      How to add classes to div using jquery in sequence like animation