Calling two different urls when Switch button is On or Off

Issue

I know how to call a url when a user press a button. This is a sample:

<form action="generator/doWork" method="GET" target="_blank">
     <input type="submit" value="Do Work">
</form>

The problem is that now, the objective is to enable or disable one of the functionalities of my web when the user press the switch. When the switch is ON, generator/disable url must be called when the switch is pressed and OFF is setted, and when the switch is OFF, generator/enable url must be called when the switch gets pressed and ON must be setted. How can I do that?

This is my switch button.

<div class="value" id="onOffSwitch">
<div class="onoffswitch">
     <label class="switch">
        <input type="checkbox">
        <div class="slider round"></div>
     </label>
</div>
</div>

css of the switch button:

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #D40066;
}

input:focus + .slider {
  box-shadow: 0 0 1px #D40066;
}

input:checked + .slider:before {
  -webkit-transform: translateX(52px);
  -ms-transform: translateX(52px);
  transform: translateX(52px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

Solution

Using javascript you could do the following:

(function(){ //wait for load event
  var form = document.getElementById('formtoedit');
  var button = document.getElementById('button_switch');

  button.addEventListener('click',function(){
    if(this.checked){
      form.setAttribute('action','generator/stop');
    }else{
      form.setAttribute('action','generator/doWork');        
    }
  });
 
})();

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #D40066;
}

input:focus + .slider {
  box-shadow: 0 0 1px #D40066;
}

input:checked + .slider:before {
  -webkit-transform: translateX(52px);
  -ms-transform: translateX(52px);
  transform: translateX(52px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formtoedit" action="generator/doWork" method="GET" target="_blank">
     <input type="submit" value="Do Work">
</form>

<div class="value" id="onOffSwitch">
<div class="onoffswitch">
     <label class="switch">
        <input id="button_switch" type="checkbox">
        <div class="slider round"></div>
     </label>
</div>
</div>

This changes action attribute of form based on button state.

Answered By - Marko Mackic