How to add click event and if condition together? - javascript

I need to perform some task based on 2 conditions on page load.
1) If a button is clicked or
2) If condition becomes true
so can I combine this two events into one?
if(x== true) || button.click(function(e){
..
perform task...
}

var perform_task = function() {
....
}
if(x == true) perform_task();
button.click(function(er) { perform_task(); }

try this?
button.click(function(){
if(x == true){
/* do something */
}
});

var flag = false;
$("button").click(function() {
flag = true;
});
if((x== true) || flag ){
// do here
}

Related

Angular button click

I'm new to Angular and I don't know how to do this kind of action. I have these buttons:
<button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button>
<button *ngIf="entryControlEnabled && gateOpen" class="bottomButton green" (click)="closeGate()">Close</button>
And In .ts file I have this:
if (data.IoNumber == config.IoNumberGates) {
if (data.IoStatus == "DetectorDeactivated") {
this.gateOpen = true;
} else {
this.gateOpen = false;
}
}
I want to change data.IoStatus == "DetectorDeactivated" to data.IoStatus == "DetectorActivated"
I want to illustrate what I mean:
openGate(){
this.data.IoStatus == "DetectorActivated"
}
closeGate(){
this.data.IoStatus == "DetectorDeactivated"
}
Can someone help me please?
Assuming you want to switch variable this.gateOpen to true or false and this.gateOpen, openGate and closeGate belongs to same component. Your functions should look like this.
openGate(){
// this.data.IoStatus == "DetectorActivated";
// it's wrong, this is comparison not assignement
this.data.IoStatus = "DetectorActivated";
}
closeGate(){
// this.data.IoStatus == "DetectorDeactivated";
// it's wrong, this is comparison not assignement
this.data.IoStatus = "DetectorDeactivated";
}
Hope it helps
if (data.IoNumber == config.IoNumberGates) {
if (data.IoStatus == "DetectorDeactivated") {
this.gateOpen = true;
} else {
this.gateOpen = false;
}
}
Make sure this code runs on correct event, in your case it should be click event or something. Else just directly change the this.gateOpen variable in functions like this.
openGate(){
this.gateOpen = true;
}
closeGate(){
this.gateOpen = false;
}
It would be easier to use a slide / switch toggle. Below I am using Angular Material Slide Toggle.
View:
<mat-slide-toggle #approve (change)="toggle($event)" [labelPosition]="'before'">
{{approve.checked? "Detector Activated": "Detector Activate"}}</mat-slide-toggle>
Component:
toggle(event: MatSlideToggleChange) {
console.log('Toggle fired');
if(event.checked)
this.data.IoStatus = "DetectorActivated";
else
this.data.IoStatus = "DetectorActivated";
}

jquery checking select input if changed with condition

i have this code below when the select changes it works great and check for the correct condition but then for the second time if i change the select both conditions run after each other
$('#x_Statususer').on('change', function () {
var chng = !this.options[this.selectedIndex].defaultSelected;
if (chng) {
alert("has changed");
var celm=$( this ).val();
if (celm== "Revision") {
$("#btnAction").click(function() {
var r = confirm("Are you sure you want to set to Revision! ");
if (r == false) {
return false;
}
});
}
else if (celm == "Canceled") {
$("#btnAction").click(function() {
var r = confirm("Are you sure you want to set to Cancel! ");
if (r == false) {
return false;
}
});
}
} else {}
});
The problem is that you rebind the click event to #btnAction at each change. Try to change:
$("#btnAction").click(function() {...});
To:
$("#btnAction").one(function() {...});

Javascript div class check onclick

I am trying to check onclick if div have one of two different classes added to main div class and if there is no such - give back alert. Here is the example of all possible div's:
<div class="mainclass class1"></div>
<div class="mainclass class2"></div>
<div class="mainclass"></div>
If I am trying to check for class existence using JS something like,
$('.mainclass').click(function () {
var check1 = $(this).hasClass('class1');
var check2 = $(this).hasClass('class2');
if(check1 == false || check2 == false)
{
alert("Hey, you are clicking empty field!")
}
});
System will always give back alert even if I will click on first two div's. Is there any ways to make proper check of this using JS?
It's easier to apply these restrictions when selecting the object to be tracked:
$('.mainclass').not('.class1, .class2').click(function () {
alert("Hey, you are clicking empty field!")
});
If these classes are indeed added/removed dynamically, again, state your intent directly:
$('.mainclass').click(function() {
if ( $(this).is(':not(.class1, .class2)') ) {
alert("Hey, you are clicking empty field!");
}
});
You need AND && operator here instead of OR ||:
if(check1 == false && check2 == false)
Fiddle Demo
Just check like this
$('.mainclass').click(function () {
var check1 = $(this).hasClass('class1');
var check2 = $(this).hasClass('class2');
if(!check1 && !check2 )
{
alert("Hey, you are clicking empty field!")
}
});
another Way
$('.mainclass').click(function () {
if(!$(this).hasClass('class1') && !$(this).hasClass('class2'))
{
alert("Hey, you are clicking empty field!")
}
});
Change the operator to && not ||:
$('.mainclass').click(function () {
var check1 = $(this).hasClass('class1');
var check2 = $(this).hasClass('class2');
if(check1 == false && check2 == false)
{
alert("Hey, you are clicking empty field!")
}
});
Working Demo

Form refresh after .submit() event

I am validating a form that's working fine but i don't know why the form not submit after all validations.
Here is validation code:
$('#coupon_options').submit(function(e){
e.preventDefault();
var name = $('input[name="coupon_name"]'),
code = $('input[name="coupon_code"]'),
value = $('input[name="coupon_value"]'),
valid = $('input[name="coupon_valid"]'),
status = true;
if( $.trim(name.val()) == "" ){
name.css('border-color', '#ff0000');
status = false;
} else { name.removeAttr('style'); }
if( $.trim(code.val()) == "" ){
code.css('border-color', '#ff0000');
status = false;
} else { code.removeAttr('style'); }
if( $.trim(value.val()) == "" ){
value.css('border-color', '#ff0000');
status = false;
} else { value.removeAttr('style'); }
if( $.trim(valid.val()) == "" ){
valid.css('border-color', '#ff0000');
status = false;
} else { valid.removeAttr('style'); }
if( status == true ){ return status; }
else { return false; }
});
As i know to stop the refresh after submit event i have used the return false but i am not sure return true works here or not?
I don't want to use Ajax, just want to submit after validation.
Is there something wrong in this code??
remove:
e.preventDefault();
it stopping the default action to occur even you return true;.
For example:
Prevent a submit button from submitting a form
Prevent a link from following the URL
e.preventDefault(); is the issue, but you should note that it's never a good sign when you have multiple functions that basically perform the same action for different elements, you can simplify your code to this:
$('#coupon_options').submit(function(e){
var status = true;
$('input[name="coupon_name"],input[name="coupon_code"],input[name="coupon_value"],input[name="coupon_valid"]').each(function(){
if($.trim($(this).val()) == ""){
$(this).css('border-color', '#ff0000');
status = false;
} else {
$(this).removeAttr('style');
}
});
return status;
});
And you could even use $('input[name^="coupon_"]') to select all inputs that start with that prefix.

Different forms with the same Submit function

I have many forms generated dynamically via PHP. I'm trying to verify that all the fields on the one form that's going to be submitted are filled. I'm just starting to JQuery, so I'm sorry if the answer is stupidly easy.
I tried this:
$('.myform').submit(function(){
var flag = true;
$('.myform input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
But when in the second form, it goes and checks the first one (which should be empty because you're not filling that one...)
Thanks in advance!
$('.myform').submit(function(){
var flag = true;
// use $(this) below which is the form has submit event fired.
$(this).find('input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
Or you could simplify your code by:
$('.myform').submit(function() {
return $(this).find('input').filter(function() {
return $.trim($(this).val()) !== '';
}).length == 0;
});

Categories