I got a problem switching a button both ways, by clicking on it and by changing it by a js-function which reacts on recieved mqtt messages and toggles the button. The first part works, the latter not. Here is my html
<label class="switch">
<input type="checkbox" value="On" id="onoff" onclick="onoff_dev();">
<span class="slider round"></span>
</label>
The js to toggle the button:
function onoff_dev() {
currentvalue = document.getElementById('onoff').value;
if (currentvalue == "Off") {
document.getElementById("onoff").value = "On";
switch("0");
} else {
document.getElementById("onoff").value = "Off";
switch("1");
}
}
And here the function, which is executed when a mqtt message arrives. The message is either 'r_message = On' or 'r_message = Off' It should change the slide button, but "document.getElementById('onoff').value = "On";" does not update the value of the button.
function onMessageArrived(r_message) {
if (r_message == "On") {
document.getElementById('onoff').value = "On";
}
if (r_message == "Off") {
document.getElementById('onoff').value = "Off";
}
}
Can you please help me? Thanks!
Related
I want a checkbox to be updated when a value changes. In this short example, if the second checkbox is checked, then the first should be update and checked, too. The functionality of the first checkbox should still stay intact. How can I achieve this?
function onoff() {
currentvalue = document.getElementById('onoff').value;
if (currentvalue == "Off") {
document.getElementById("onoff").value = "On";
console.debug("OFF");
} else {
document.getElementById("onoff").value = "Off";
console.debug("ON");
}
}
function xy() {
document.getElementById('onoff').value = "On";
console.debug("xy");
}
<input type="checkbox" value="On" id="onoff" onclick="onoff();">
<input type="checkbox" value="Off" id="xy" onclick="xy();">
I'm using Angular for my web app in a div tag I use ng-click to run a function for changing the value of a check box but when I click on div it runs twice.
This my HTML:
enter code here
<div class="switch" ng-click="f_changeSwitch(a_Order.isInSaloon)">
<label>
<span>{{lang==1 ? 'سالن' : 'Saloon'}}</span>
<input ng-model="a_Order.isInSaloon" type="checkbox"><span class="lever lever_c"></span>
{{lang==1 ? 'بیرون بر' : 'Take Away'}}
</label>
</div>
And this is my JavaScript
$scope.f_changeSwitch = function (saloon) {
console.log("counter", counter);
console.log("saloon", saloon);
console.log("$scope.a_Order.isInSaloon", $scope.a_Order.isInSaloon);
if ($scope.a_Order.isInSaloon == true) {
$scope.a_Order.isInSaloon = false;
} else {
$scope.a_Order.isInSaloon = true;
}
if ($scope.a_Order.isInSaloon == false) {
$scope.packAge_Cost = {};
$scope.packAge_Cost.a_tProductId_packageCost = $scope.a_tProductId_packageCost;
$scope.packAge_Cost.t = $scope.a_prName;
$scope.packAge_Cost.a_prName_EN = $scope.a_prName_EN;
$scope.packAge_Cost.total = $scope.packAgeCostInNumber;
$scope.ordered_item.push($scope.packAge_Cost)
$scope.a_invTotal = $scope.a_invTotal + $scope.packAgeCost
$scope.a_invTotalString = f_Cash2String($scope.a_invTotal);
console.log("$scope.packAgeCost1234", $scope.packAgeCost);
} else {
$scope.a_invTotal = $scope.a_invTotal - $scope.packAgeCost;
$scope.a_invTotalString = f_Cash2String($scope.a_invTotal);
console.log("is in saloon is true now")
}
counter++
}
and this my logs, when I click once as you can see counter is 2
i found why it's run twice and it's because in html checkbox every time that i click on it it change the value and after it in js ng-click runs and it change the value too so i delete if condition in my function
I have 3 checkboxes, i wish to be able to click the box and it tick on/off and via jscript change the value of the input for posting to state weather item is accepted or not on another page. However i have logical script but it wont work, theres no errors but the checkboxes wont click on/off they just click on and thats it.. and the value wont change either i dont understand why.
Could somebody look at this short code and tell me why.
Thank you.
<input type="checkbox" id="paypal" name="paypal1" value=" " onclick='chbxpp();' >
</input>
<label for="paypal" class="checkboxes" >Show PayPal Accepted</label>
<br>
<input type="checkbox" id="facebook" name="facebook" value=" " onclick='chbxfb(this);' >
</input>
<label for="facebook" class="checkboxes" >Show FaceBook Contact Details</label>
<br>
<input type="checkbox" id="twitter" name="twitter" value=" " onclick='chbxtw(this);' >
</input>
<label for="twitter" class="checkboxes" >Show Twitter Contact Details</label>
function chbxpp()
{
if(document.getElementById('paypal').checked === true) {
document.getElementById('paypal').checked = false;
document.getElementById('paypal').value='no';
var vv=document.getElementById('paypal').value;
console.log(vv);
}
if (document.getElementById('paypal').checked === false) {
document.getElementById('paypal').checked = true;
document.getElementById('paypal').value='yes';
var vv=document.getElementById('paypal').value;
console.log(vv);
}
}
function chbxfb(objfb)
{
var that = objfb;
(objfb);
if(document.getElementById(that.id).checked === true) {
document.getElementById(that.id).checked = false;
document.getElementById(that.id).value='no';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
if (document.getElementById(that.id).checked === false) {
document.getElementById(that.id).checked = true;
document.getElementById(that.id).value='yes';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
}
function chbxtw(objtw)
{
var that = objtw;
(objtw);
if(document.getElementById(that.id).checked === true) {
document.getElementById(that.id).checked = false;
document.getElementById(that.id).value='no';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
if (document.getElementById(that.id).checked === false) {
document.getElementById(that.id).checked = true;
document.getElementById(that.id).value='yes';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
}
The objpp was my attempt at another method but just does the same thing...
p.s if i just didnt use jscript and just had the html, would the value not be valid if the checkbox was not clicked or would the value still be sent...
iv just fond this..
How to change the value of a check box onClick using JQuery?
states that the value wont be sent if the box is unchecked... But then how do i know after post what has been clicked.... will i receieve a not isset($_POST['paypal']) or an empty($_POST['paypal'])
I imagine your checkboxes begin with no check inside them or .checked === false, but when you call your function chbxpp(), it looks to see if your .checked property === true and if so it sets it back to false. The click event already changes the checkbox's .checked property for you, no need to do it in your code.
//If the checkbox is checked, set it to not checked...???
//But the problem is, the click event just set the .checked property to true
//so setting it back to false makes it like it never happened.
if(document.getElementById('paypal').checked === true) {
//document.getElementById('paypal').checked = false; //This part is a no-no
document.getElementById('paypal').value='yes';
}else{
document.getElementById('paypal').value='no';
}
Adding to Ryan Wilson's answer, set your cbx's initial value to false. (Also check the format of the cbx - the closing tag.)
<input type="checkbox" id="paypal" name="paypal1" value="false" onchange="chbxpp();" />
function chbxpp() {
// the cbx starts false. when it is clicked for the first time it
// becomes true.
if (document.getElementById('paypal').checked) {
// you don't need this.
//document.getElementById('paypal').checked = true;
document.getElementById('paypal').value = 'yes';
var vv = document.getElementById('paypal').value;
console.log(vv);
} else {
// you also don't need this.
//document.getElementById('paypal').checked = false;
document.getElementById('paypal').value = 'no';
var vv = document.getElementById('paypal').value;
console.log(vv);
}
}
I needed a switch button for a project of mine so I searched and found an easy solution at w3schools. The only issue is that I can't catch the state of the switch now.
I created a function that will change the value of an input filed if the switch is toggled on or off.
var checker = false;
function poly_marker_ctrl(categ, t) {
if (checker == false) {
$("display_result").val('is checked');
checker = true;
} else {
$("display_result").val('is unchecked');
checker = false;
}
}
But that doesn't seem to work. Here is the example on jsfiddle.
Thanks for your time.
Try using this.
HTML section :
<div class="col-md-3">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
<input id="display_result" type="text" value="is unchecked" readonly>
<div>
In script :
var switchButton = 'off';
$(".slider").click(function(){
if(switchButton == 'off'){
switchButton = 'on';
$('#display_result').val('is checked');
}else{
switchButton = 'off';
$('#display_result').val('is unchecked');
}
});
And css same as you have shown in fiddle.It will work.
I am using the bootstrap switches to change a check box into a toggle box. When the page loads the switch is in the data-off position being red and text saying no.
<div class="make-switch" id="use_map_switch" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
<input type="checkbox" name="use_map" id="use_map" value="1" {if $form_data.use_map eq 1}checked{/if} />
</div>
I run a jQuery script once the check/switch is clicked and changed to yes/green. If the results turn back false I want to change the switch/check back to No/red.
I have tried using the line $('#use_map').prop('checked', false); but this has had no affect.
$('#use_map_switch label').click(function(){
// need to do opposite
// if its checked when clicked then switch will be going to unchecked
if($('#use_map').is(':checked')){
$('.map-area').hide();
} else {
address = getAddress();
if(address == ''){
modalTitle = 'Error';
modalText = 'Please enter an address before using the map';
$('#use_map').prop('checked', false);
show_modal(modalTitle, modalText);
} else {
$('.map-area').show();
$('.map-area').html(address);
}
}
});