sort checkboxes in html javascript - javascript

I Am sorting check boxes with this code
function sortGiveNamesFilter() {
$('#subfilterNamesContainer label').sort(function(a, b) {
var $a = $(a).find(':checkbox'),
$b = $(b).find(':checkbox');
if ($a.hasClass('default') && !$b.hasClass('default'))
return -1;
else if (!$a.hasClass('default') && $b.hasClass('default'))
return 1;
if ($a.is(':checked') && !$b.is(':checked'))
return -1;
else if (!$a.is(':checked') && $b.is(':checked'))
return 1;
if ($a.val() < $b.val())
return -1;
else if ($a.val() > $b.val())
return 1;
return 0;
}).appendTo('#subfilterNamesContainer');
$('#subfilterNamesContainer .default:last, #subfilterNamesContainer :checked:last').closest('label').after('<hr />');
}
as we can see in img 1 it giving me propar resultenter image description here
but when it comes to 2 digit numeric valus its not working
enter image description here
where i am doing worng?

Related

How to make multiple conditions inside single filter

I am trying to make a filter based on checkboxes.
The thing is js ignoring other conditions inside filter when one is active
filterData() {
return this.airlines.filter(x => {
if (this.filters.options.length != 0 || this.filters.airlines.length != 0) {
for (let i = 0; this.filters.options.length > i; i++) {
if (this.filters.options[i] == 0) {
return x.itineraries[0][0].stops == 0;
}
if (this.filters.options[i] == 1) {
return x.itineraries[0][0].segments[0].baggage_options[0].value > 0;
}
}
} else {
return x;
}
})
}
I know that return will stop the current loop, but is there any way to do it correctly?
Update-1: (When to filter record for every case checked OR case)
Replace for loop and all conditions in a single return by && for if and || condition for data:
var chbox = this.filters.options;
return $.inArray(0, chbox) != -1 && x.itineraries[0][0].stops == 0
|| $.inArray(1, chbox) != -1 && x.itineraries[0][0].segments[0].baggage_options[0].value > 0;
Hope this helps !!
$.inArray(value, arr) method will check for each checkboxes and will work for every checked ones .
Update-2 (When to filter record for every case checked AND case)
As per comment below, you are trying to use checkbox on demand so use below code:
var chbox = this.filters.options;
boolean condition = true;
if ($.inArray(0, chbox) != -1) {
conditon = conditon && x.itineraries[0][0].stops == 0;
}
if ($.inArray(1, chbox) != -1) {
conditon = conditon && x.itineraries[0][0].segments[0].baggage_options[0].value > 0;
}
return condition;
Your filter function is returning an object, which ideally should be a boolean value. Please refactor the code as below.
filterData() {
return this.airlines.filter(x => {
let result = false;
if (this.filters.options.length != 0 || this.filters.airlines.length != 0) {
for (let i = 0; this.filters.options.length > i; i++) {
if (this.filters.options[i] == 0) {
result = x.itineraries[0][0].stops == 0;
break;
} else if (this.filters.options[i] == 1) {
result = x.itineraries[0][0].segments[0].baggage_options[0].value > 0;
break;
}
}
}
return result;
})
}

Replace .innerHTML with another .innerHTML

I'm trying to show information depending on the value of two tags.
I got the first one to work.
When the value of __ix_data_shared_int_80_ is 0 nothing is showing, when the value is 1 it will show DV and when the value is 2 it will show AV.
But I can't get the number to work.
When __ix_data_shared_int_80_ has the value of 0 I don't want any information,
when the value is 1 I would like number to be equal to the value of __ix_data_shared_uint_80_ and when the value is 2 I would like number to be equal to the value of "__ix_data_shared_uint_80_` times 2.
<span id="type"></span>
<span id="number"></span>
<span data-ix-tag="__ix_data_shared_uint_80_" id="valve" data-ix-refresh="interval"></span>
<script>
function GetValveTypeString(tag) {
if (tag.value == 0) {
document.getElementById("type").innerHTML = "";
}
else if (tag.value == 1) {
document.getElementById("type").innerHTML = "DV";
}
else if (tag.value == 2) {
document.getElementById("type").innerHTML = "AV";
}
}
iX.createTag('__ix_data_shared_int_80_', GetValveTypeString, 'interval')
</script>
<script>
var valveID = document.getElementById("valve").innerHTML;
function GetValveID(tag) {
if (tag.value == 0) {
document.getElementById("number").innerHTML = "";
}
else if (tag.value == 1) {
document.getElementById("number").innerHTML = valveID;
}
else if (tag.value == 2) {
document.getElementById("number").innerHTML = valveID * 2;
}
}
iX.createTag('__ix_data_shared_int_80_', GetValveID, 'interval')
</script>
It is because {document.getElementById("valve")} is returning empty string and you are trying to manipulate empty string

JS Empty focused Input

If the user enters an invalid number, I want to empty the input. Negative numbers and numbers that are decimal are not allowed.
This is my Js Function:
function calcPrice() {
var count = $('#placeCount').val();
if(count%1 == 0 && count > 0) {
if(count == 0) {
var output = "";
} else if(count == 1) {
var output = "€ 2,49";
} else if(count > 1 && count != 0) {
var output = ("€ " + (2*count-0.01));
}
}
else {
$('#placeCount').html("");
}
$('#priceOutput').html(output);
}
But somehow the input is not empty if I enter a count that goes into the else section.
change the value of the input with val() instead of html():
function calcPrice() {
var count = $('#placeCount').val();
if(count%1 == 0 && count > 0) {
if(count == 0) {
var output = "";
} else if(count == 1) {
var output = "€ 2,49";
} else if(count > 1 && count != 0) {
var output = ("€ " + (2*count-0.01));
}
}
else {
$('#placeCount').val("");
}
$('#priceOutput').html(output);
}

How to print the numbers in alert box?

This code is showing the alert box when the two numbers entered are same,now I want show the numbers in the alert box it is showing only one number,but I want to show each number which is same for example,if I enter 83 in two input boxes and 85 in other two input boxes,the alert box should show 83 and 85,you can not enter these numbers more than once.
function validateForm() {
for (var x = 0; x < 81; x++) {
for (var y = x + 1; y < 81; y++) {
if (document.forms["myForm"]['pk' + x].value == document.forms["myForm"]['pk' + y].value) {
if (document.forms["myForm"]['pk' + x].value == "") {
return true;
} else {
alert('You can not enter a number more than once');
return false;
}
}
}
}
return true;
}
A completely different take on it, 81 iterations only, rather than 3000+
function validateForm() {
var q = {}, a = [];
for (var i=0; i<81; i++) {
var value = document.forms["myForm"]['pk'+i].value;
if (value !== "") {
if (q[value]) {
if (q[value] < 2) {
a.push(value);
}
q[value] ++;
}
else {
q[value] = 1;
}
}
}
if(a.length) {
alert(a.join(', ') + ' You can not enter a number more than once');
return false;
}
return true;
}
This loops through all the values a single time, keeping a tally of how many of each value there is (var q) - if a tally of a value hits 2, the value is added to the array (var a). So, triples, quadruples etc, will only be reported once.
If a.length > 0, the alert is shown and false is returned
Do not use return inside the loop, else declare a variable say validate and store true and false values in it and return it at the end, else the function execution will stop at return. Modified code is:
function validateForm() {
var validate = true;
for (var x = 0; x < 81; x++) {
for (var y = x + 1; y < 81; y++) {
if (document.forms["myForm"]['pk' + x].value == document.forms["myForm"]['pk' + y].value) {
if (document.forms["myForm"]['pk' + x].value == "") {
} else {
alert('You can not enter a number more than once. Duplicate number is:'+ document.forms["myForm"]['pk' + x].value);
validate = false;
}
}
}
}
return validate;
}
From your code, this can help you
<script>
function validateForm() {
var val1,val2;
for (var x=0; x<81; x++) {
for (var y=x+1; y<81; y++) {
val1 = document.forms["myForm"]['pk'+x].value;
val2 = document.forms["myForm"]['pk'+y].value
if (document.forms["myForm"]['pk'+x].value==document.forms["myForm"]['pk'+y].value) {
if ( document.forms["myForm"]['pk'+x].value=="") {
return true;
}
else {
alert(val1 + 'and'+ val2 +',You can not enter a number more than once');
return false;
}
}else{
alert(val1 + 'and'+ val2 +',You can not enter a number more than once');
return false;
}
}
}
return true;
}
</script>

Javascript Phone number validation Paratheses sign

I did some searching and there where others asking this question and answers to it but none that seemed to fit what I was trying to do. Basically I'm working on a validation of the phone entry that accepts (123)4567890 as an entry. I've already implemented one that accepts a simple number string such as 1234567890 and one with dashes 123-456-7890. I know I'm making a simple mistake somewehre but I can't figure out what I'm doing wrong.
Here's the phone number with dashes form that is working:
//Validates phone number with dashes.
function isTwelveAndDashes(phone) {
if (phone.length != 12) return false;
var pass = true;
for (var i = 0; i < phone.length; i++) {
var c = phone.charAt(i);
if (i == 3 || i == 7) {
if (c != '-') {
pass = false;
}
}
else {
if (!isDigit(c)) {
pass = false;
}
}
}
return pass;
}​
and this is the one I can't manage to work out.
function isTwelveAndPara(phone) {
if (phone.length != 12) return false;
var pass = true;
for (var i = 0; i < phone.length; i++) {
var c = phone.charAt(i);
if (i == 0) {
if (c != '(') {
pass = false;
}
}
if (i == 4) {
if (c != ')') {
pass = false;
}
}
else {
if (!isDigit(c)) {
pass = false;
}
}
}
return pass;
}​
You can do it very easily with regex:
return !!phone.match(/\(\d{3}\)\d{7}/g)
Live DEMO
Update:
The code you had didn't work because you forgot the else if:
else if (i == 4) { // Added the "else" on the left.
Checking phone number with RegEx is certainly the way to go. Here is the validation
function that ignores spaces, parentheses and dashes:
check_phone(num) {
return num.replace(/[\s\-\(\)]/g,'').match(/^\+?\d{6,10}$/) != null}
You can vary the number of digits to accept with the range in the second regular expression {6,10}. Leading + is allowed.
Something like that (a RegExp rule) can make sure it matches either rule.
var numbers = ['(1234567890','(123)4567890','123-456-7890','1234567890','12345678901'];
var rule = /^(\(\d{3}\)\d{7}|\d{3}-\d{3}-\d{4}|\d{10})$/;
for (var i = 0; i < numbers.length; i++) {
var passed = rule.test(numbers[i].replace(/\s/g,''));
console.log(numbers[i] + '\t-->\t' + (passed ? 'passed' : 'failed'));
}
EDIT:
function isDigit(num) {
return !isNaN(parseInt(num))
}
function isTwelveAndPara(phone) {
if (phone.length != 12) return false;
for (var i = 0; i < phone.length; i++) {
var c = phone.charAt(i);
if (i == 0) {
if (c != '(') return false;
} else if (i == 4) {
if (c != ')') return false;
} else if (!isDigit(c)) return false;
}
return true;
}
// or...
function isTwelveAndPara(phone) {
if (phone.length != 12 || phone.charAt(0) != '(' || phone.charAt(4) != ')') return false;
for (var i = 1; i < phone.length, i != 4; i++) {
if (!isDigit(phone.charAt(i))) return false;
}
return true;
}

Categories

Resources