Calling two different urls when Switch button is On o Off - css

Question

Welcome all. Actually 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 objetive 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. I have no idea about how to do that. Any help will be useful.
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%;
}
Thank you so much

Answer 1

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.

Answer 2

You can achieve this objective by simple jQuery 🙂
$(document).ready(function(){
$('.switch').click(function(){
if ($(this).find('input[type=checkbox]').prop('checked')) {
// When ON
$('form').prop('action', 'generator/enable');
} else {
// When OFF
$('form').prop('action', 'generator/disable');
}
});
});
/* 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 action="generator/disable" method="GET" target="_blank">
<input type="submit" value="Do Work">
</form>
<p> </p>
<div class="value" id="onOffSwitch">
<div class="onoffswitch">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
Please run the code snippet and see changing of the action of the form via inspect element in chrome ... Let me know :)