Develop Reference

How to prevent the click event in JQuery?

There is one toggle switch, When click on a toggle it switches ON and popup with close and Ok button appears.
But if I again click on a toggle then it switches off and toggle disappears.
The actual requirement is, with a every click for which the toggle switches ON and popup appears, the toggle switch should not get switch OFF until user click on close button which is present in popup.
http://jsfiddle.net/5rdbe08a/3/
<script>
$(document).ready(function () {
var status = 0;
$(document).on('click', '#isImpliedDelete', function () {
status++;
console.log(status);
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if (status % 2 == 0) {
$("#submitBtn").prop('disabled', false);
} else {
$("#submitBtn").prop('disabled', true);
}
});
$("#isImpliedDelete").click(function () {
$("#myPopup").show();
if ($("#submitBtn").prop('disabled', false) == true) {
$("#myPopup").show();
}
});
$("#ok").on('click', function () {
$("#myPopup").hide()
$("#submitBtn").prop('disabled', false);
});
$("#close").on('click', function () {
if ($("#myPopup").show() == true) {
$("#myPopup").hide();
}
$("#isImpliedDelete").click();
$("#submitBtn").prop('disabled', false);
console.log("close");
});
});

In terms of logic, what you want to do is check first if the modal is visible or not. If it isn't, then the switch should launch the modal. If it's visible, then the switch should remain in it's current state (we'll use e.preventDefault(); to do this).
Here is a modified version of your fiddle:
EDIT2: updated fiddle based on new comment:
http://jsfiddle.net/5fb4xc0L/1/
One observation about your code:
I see that you are using the jquery hide function BUT you are also using separate "show" and "hide" classes to visually toggle the visibility of the modal. You cannot use hide() to hide the element then expect that toggling the class .show to bring it back. Here is an explanation

I didn't understand what you actually want but i just solve your toggle problem. have a look
$(document).ready(function(){
$(document).on('click','#isImpliedDelete',function(){
$(this).attr('disabled', true);
$('#myPopup').addClass('show');
})
$(document).on('click','#ok',function(){
$(this).parents('.popup').next('.input-group-prepend').find('input[type="checkbox"]').prop('checked', false);
$('#myPopup').removeClass('show');
$('#isImpliedDelete').removeAttr('disabled')
})
})
/* Radio Switches */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3c3c3c;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #00afaa;
}
input:focus+.slider {
box-shadow: 0 0 1px #00afaa;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Popup container - can be anything you want */
.popup {
position: relative;
align-content: center;
display: flex;
align-items: center;
display: inline-block;
cursor: pointer;
margin: 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
align-content: center;
visibility: hidden;
width: 396px;
border-style: groove;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 10000;
/* bottom: 25%; */
top: -50px;
left: 310px;
/* margin-left: -180px; */
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
/* left: 50%; */
margin-left: -80px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup visible */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br> <br> <br>
<div class="popup">
<span class="popuptext" id="myPopup">Hello,How are you?
<button id="ok">Ok</button>
<button id="close">Close</button>
</span>
</div>
<div class="input-group-prepend">
<label class="switch">
<input id="isImpliedDelete" name="isImpliedDelete" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<br> <br> <br>
<button class="btn btn-primary btn-block" type="submit" id="submitBtn" >
<i class="fa fa-file-upload mr-2"></i> Button
</button>
Comment down if you want something different from it.

Used e.preventDefault() in click function.
$('#<id>').on(click,function(e){ e.preventDefault(); //Do your task });

How to have cursor change with buttonclick

I have set up a switcher on my website to toggle between normal mouse / pointer & a Lego hand as a cursor and a head as pointer. However, I can only get the cursor to show when clicking the switcher. How can I also add this pointer
(cursor: url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), pointer;)
It should be assigned to the following classes:
a, button, input, input, button, a, input, .slider, .round
I have then also added a snippet, which lets the switcher / checkbox stay on checked...
(You can see that on this video [password is 12345678]: https://easyupload.io/gknxoi)
However after a reload of the page for example, the switcher stays on checked, but the cursor doesn't show up...
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.body.style.cursor = "url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto";
} else {
document.body.style.cursor = "default";
}
});
}
$(function() {
var test = localStorage.input === 'true' ? true : false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.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: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>

Is this what you are looking for?
a, input, button, .slider, .round {
margin: 15px;
cursor:url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/pointer.png?v=1644096049), auto;
}
<input type="button" value="lego"/>
link to google.com

Use document.querySelector('html') instead of document.body will make it work.
Also, use cursor: auto instead of cursor: default
var cbs = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if (this.checked) {
document.querySelector('html').style.cursor= ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
document.querySelector('label').style.cursor = ' url(https://cdn.shopify.com/s/files/1/0571/7137/8349/files/cursor.png?v=1644096068), auto'
} else {
document.querySelector('html').style.cursor = "auto";
document.querySelector('label').style.cursor = 'auto'
}
});
}
.switcheronheader {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
margin-bottom: 2px;
}
.mouseswitcher {
/* border-left: 1px solid #248751; */
padding-left: 20px;
}
.switcheronheader input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #248751;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mouseswitcher">
<label class="switcheronheader">
<input type="checkbox" id="overheaderswitch">
<span class="slider round"></span>
</label>
</div>

Disabling page reloading while using form

I want to use a form with a checkbox as follow :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<form id= "test" method="POST" action="test">
})
<input type="checkbox"
name='switch'
onClick="document.forms['test'].submit();"
>
<span class="slider round"></span>
</label>
</form>
</body>
So far I've been able to do it for submit button using the following script:
....
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#test').ajaxForm(function() {
alert("");
});
....
But this isn't working apparently for checkbox. Any idea how may I do it!
thanks in advance !

This will be done as below:
$(document).ready(function() {
$('#test').on('submit', function(e) {
e.preventDefault();
alert("");
});

You need to use the "onchange" event instead of "onclick" and check the value. If it is checked, submit the form. And remove the event after, otherwise the form can be submited multiple times when toggling.
But it sounds simpler to use a button and style it like a checkbox with an image.
<button type="submit"><img src="/img/checkbox.png" alt="Checkbox" /></button>
You need no additional javascript for this and it is trivial to make the on/off state with CSS.
Also obviously use your ajaxForm function to avoid a page reload. Otherwise the "on" state will never be visible.

Try using the preventDefault() function, along the lines:
....
// wait for the DOM to be loaded
$(document).ready(function() {
const form = document.getElementById('test');
form.onsubmit = function (event) {
alert("");
// For this example, don't actually submit the form
event.preventDefault();
}
....

Use e.preventDefault(); in on click event
Codepen example
How preventDefault() works?
Also there are some mistakes in HTML structure
you opened label tag before the form so you should close it after
the form.
there are additional bracket and parenthesis

$(document).ready(function() {
$('#togglSwitch').change(function() {
alert("Handler for .submit() called.");
event.preventDefault();
$(this).closest("form").submit();
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<form id="test" method="POST" action="test">
<label class="switch">
<input type="checkbox"
name='switch' id='togglSwitch'
>
<span class="slider round"></span>
</label>
</form>
<div id="other">
Trigger the handler
</div>
Note:- You need to add event.preventDefault and need to add submit event on change is the solution for your problem

Call function on onclick of CheckBox
i.e.
<input type="checkbox" name='switch' onClick="myfunc();">
<script>
function myfunc()
{
Here write the code of Ajax to submit the form.
}
</script>

How to make a switch change between two sets of text?

I'm trying to make a switch bar change between two sets of text. I've got the switch and the slider working but can't figure out how to attach the funciton to the slider.
I've made testing environment using W3School:
https://www.w3schools.com/code/tryit.asp?filename=FVEFVIB1J6D2
The switch code had the formatting correct but its not taking the formatting for the graphic.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<p>
<switch onclick="myFunction()">Choose your lenght </switch>
</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer Story</div>

You just need to attach a listener to the input changes
HTMLInputElementObject.addEventListener('input', function (evt) {
myFunction();
});
assuming "input" as HTMLInputElementObject:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
document.getElementById("mySlider").addEventListener('input', function (evt) {
myFunction();
});
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
<label class="switch">
<input type="checkbox" id="mySlider">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer text</div>

Your're almost finished. All you have to do is add an onClick callback to the span with the class slider round like this:
<label class="switch">
<input type="checkbox">
<span class="slider round" onclick='myFunction()'></span>
</label>

Your onclick needs to be on the input element or span element like so
<label class="switch">
<input type="checkbox" onclick="myFunction()">
<span class="slider round"></span>
</label>
I also cleaned up your code for you since your style tags was inside the body and you had extra body tags and your elements were outside the html tag for whatever reason.
https://www.w3schools.com/code/tryit.asp?filename=FVEGHO8VCQJA

You have to include the onclick to the checkbox with this as parameter.
<input type="checkbox" onclick='myFunction(this)'>
this is necessary to check if the checkbox is checked or not. If it is true than use the second text, otherwise use the first text.
Example for multiple usage
var text = {
1: ["Longer text", "Shorter text"],
2: ["Another longer text", "Another shorter text"]
// Add more
}
var output1 = document.getElementById("output");
var output2 = document.getElementById("output2");
function switchText(that, output, text) {
switch (that.checked) {
case true:
output.innerHTML = text[1];
break;
default:
output.innerHTML = text[0];
}
}
function switchFirstText(that) {
switchText(that, output1, text[1]);
}
function switchSecondText(that) {
switchText(that, output2, text[2]);
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!-- First checkbox -->
<div>Choose your length</div>
<label class="switch">
<input onclick="switchFirstText(this)" type="checkbox">
<span class="slider round"></span>
</label>
<div id="output">Longer text</div>
<br>
<hr>
<br>
<!-- Second checkbox -->
<div>Choose your length 2</div>
<label class="switch">
<input onclick="switchSecondText(this)" type="checkbox">
<span class="slider round"></span>
</label>
<div id="output2">Another longer text</div>

Control a toggle button through another button

I have a toggle button which is working, i just want to create a button that will only interect with the toggle, when i click the button the toggle will go on, when i click again in the button the toggle will go off.
Toggle.html
<ion-toggle class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)" #ioToggle ></ion-toggle>
Is there a way to do it ?

First add [(ngModel)]="status"
<ion-toggle [(ngModel)]="status" class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)" #ioToggle ></ion-toggle>
Then add a button:
<!-- Bind the click event to a method -->
<button ion-button (click)="buttonClick($event)">
Click me!
</button>
in .ts:
First define status at the beginning of the class, and then define the buttonClick function:
...
status = false;
...
buttonClick(event) {
this.status = !this.status
}

function switchx(){
var x = document.getElementById('input1')
x.checked = !x.checked}
/*the stopit function prevents being able to click on the switch */
function stopit(){
var x = document.getElementById('input1')
x.checked = !x.checked
}
#button2{
display:none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<h2>Toggle Switch</h2>
<label class="switch">
<input id='input1' type="checkbox" onclick='stopit()'>
<span class="slider"></span>
</label>
<button id='button1' onclick='switchx()'>switch</button>