We Keep Coding

When I use a validation script in a form field, the value ends up being empty when I submit

I started studying Javascript about two weeks ago and I'm already trying to do some stuff for my company's website.
We have a wordpress elementor website, in which I created a new registration form, using javascript and Jquery to validate some specific fields, like CPF(like a SS number for brazilians), zip code and password.
All of these validation scripts are working fine, but just one of them (CPF), when I submit the form it sends without any value in this specific field.
Hope you guys can help me.
I used the following script to validate data of this field:
<input type="text" class="elementor-field elementor-size-lg elementor-field-textual" name="form-fields[field_cpf]" id="field_cpf" placeholder="Digite apenas números." maxlength="11" minlength="11" onblur="alertarFuncao()" required="required" aria-required="true">
<script>
//validation script
function verificaCPF(strCpf) {
var soma;
var resto;
soma = 0;
if (strCpf == "00000000000" ||
strCpf == "11111111111" ||
strCpf == "22222222222" ||
strCpf == "33333333333" ||
strCpf == "44444444444" ||
strCpf == "55555555555" ||
strCpf == "66666666666" ||
strCpf == "77777777777" ||
strCpf == "88888888888" ||
strCpf == "99999999999") {
return false;
}
for (i = 1; i <= 9; i++) {
soma = soma + parseInt(strCpf.substring(i - 1, i)) * (11 - i);
}
resto = soma % 11;
if (resto == 10 || resto == 11 || resto < 2) {
resto = 0;
} else {
resto = 11 - resto;
}
if (resto != parseInt(strCpf.substring(9, 10))) {
return false;
}
soma = 0;
for (i = 1; i <= 10; i++) {
soma = soma + parseInt(strCpf.substring(i - 1, i)) * (12 - i);
}
resto = soma % 11;
if (resto == 10 || resto == 11 || resto < 2) {
resto = 0;
} else {
resto = 11 - resto;
}
if (resto != parseInt(strCpf.substring(10, 11))) {
return false;
}
return true;
}
//function if the field validation script returns false
function campoInvalido(fieldId) {
fieldId.style.borderColor = "red"
}
//function if the field validation script returns true
function campoValido(fieldId) {
fieldId.style.borderColor = "green"
}
//function that runs when the user clicks/taps out off the field
function alertarFuncao() {
var strCpf = document.getElementById('field_cpf').value;
verificaCPF(strCpf);
if (!verificaCPF(strCpf)) {
campoInvalido(document.getElementById('field_cpf'))
alert('Por favor, insira um CPF válido.');
} else {
campoValido(document.getElementById('field_cpf'));
return document.getElementById('field_cpf').value = strCpf
}
}
</script>```

I tested your code snipet on my own web server, and once I found an input which passes your checks it seems to work.
I see however that you didn't include a element in your snippet. The input must be a child of one of these elements in order to send data. If you have a closing tag directly above this input field you should probably move it under.

I solved the problem turning the HTML custom field of elementor form into a regular text field, and did some modifications on the script, inserting an event listener to it. As I understood this is an Elementor form "problem", it doesn't recognize values in custom HTML fieds when submitting.
Here's the modified code:
var soma;
var resto;
soma = 0;
if (strCpf == "00000000000" ||
strCpf == "11111111111" ||
strCpf == "22222222222" ||
strCpf == "33333333333" ||
strCpf == "44444444444" ||
strCpf == "55555555555" ||
strCpf == "66666666666" ||
strCpf == "77777777777" ||
strCpf == "88888888888" ||
strCpf == "99999999999") {
return false;
}
for (i = 1; i <= 9; i++) {
soma = soma + parseInt(strCpf.substring(i - 1, i)) * (11 - i);
}
resto = soma % 11;
if (resto == 10 || resto == 11 || resto < 2) {
resto = 0;
} else {
resto = 11 - resto;
}
if (resto != parseInt(strCpf.substring(9, 10))) {
return false;
}
soma = 0;
for (i = 1; i <= 10; i++) {
soma = soma + parseInt(strCpf.substring(i - 1, i)) * (12 - i);
}
resto = soma % 11;
if (resto == 10 || resto == 11 || resto < 2) {
resto = 0;
} else {
resto = 11 - resto;
}
if (resto != parseInt(strCpf.substring(10, 11))) {
return false;
}
return true;
}
function campoInvalido(fieldId) {
fieldId.style.borderColor = "red"
}
function campoValido(fieldId) {
fieldId.style.borderColor = "green"
}
function alertarFuncao() {
var strCpf = document.getElementById('form-field-field_cpf').value;
verificaCPF(strCpf);
if (!verificaCPF(strCpf)) {
campoInvalido(document.getElementById('form-field-field_cpf'))
alert('Por favor, insira um CPF válido.');
} else {
campoValido(document.getElementById('form-field-field_cpf'));
return document.getElementById('form-field-field_cpf').value = strCpf
}
}
document.getElementById('form-field-field_cpf').addEventListener("blur", alertarFuncao);```

Compare two array elements using if() statment [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
Code bellow works fine, though as u can see, everything is hand wrote and if i want to push something to that arrays i will have to change whole code.
working example:
for (var s = 0; s < myButtons.length; s++) {
if (
(myButtons[s].className == "1" && colorIndex[0] > 1)
||
(myButtons[s].className == "2" && colorIndex[1] > 1)
||
(myButtons[s].className == "3" && colorIndex[2] > 1)
||
(myButtons[s].className == "4" && colorIndex[3] > 1)
||
(myButtons[s].className == "5" && colorIndex[4] > 1)
||
(myButtons[s].className == "6" && colorIndex[5] > 1)
) {continue;}
alert("things need to be done")
}
the best solution came to my mind(not working one):
for (var s = 0; s < myButtons.length; s++) {
for (var i = 0; i < colorIndex.length; i++) {
if ((myButtons[s].className == (i + 1) && colorIndex[i] > 1)) {
continue;
}
alert("things need to be done")
}
}
So what i want is: to check if all elements of array myButtons.classname==variable from cycle && colorIndex[variable from cycle]>1 OR same thing again but on next step
working code for the first algorithm
const colorIndex = []
colorIndex[0] = 201
colorIndex[1] = 30002
colorIndex[19] = -25
colorIndex[3] = 89
colorIndex[-7] = 89
colorIndex[-9] = -26
const myButtons = [...document.querySelectorAll("button")]
for (var s = 0; s < myButtons.length; s++)
{
if ( (myButtons[s].className == "1" && colorIndex[0] > 1)
|| (myButtons[s].className == "2" && colorIndex[1] > 1)
|| (myButtons[s].className == "3" && colorIndex[2] > 1)
|| (myButtons[s].className == "4" && colorIndex[3] > 1)
|| (myButtons[s].className == "5" && colorIndex[4] > 1)
|| (myButtons[s].className == "6" && colorIndex[5] > 1)
)
{ continue }
alert("things need to be done")
}
console.log('test ending')
<button class="1">1</button>
<button class="2">2</button>
<button class="4">3</button>
<button class="4">4</button>
<button class="4">5</button>
<button class="4">6</button>
<button class="4">7</button>
<button class="2">8</button>
<button class="4">9</button>

Here a pretty short and less hard coded version of the original code
var myButtons = document.querySelectorAll("button");
var colorIndex = [0, 1, 2, 0, 2, 1];
for (var index = 0; index < myButtons.length; index++) {
if (myButtons[index].className == String(index + 1)
&& colorIndex[myButtons[index].className - 1] > 1) continue;
console.log("Button at index '" + index + "' needs to get fixed");
}
<button class="1">1</button>
<button class="2">2</button>
<button class="3">3</button>
<button class="4">4</button>
<button class="5">5</button>
<button class="6">6</button>
Full code attempt:
// Create Buttons Start
var buttonDom = document.getElementById("a1");
var buttonList = [],
buttonCount = 12;
while (buttonList.length < buttonCount) {
var newInput = document.createElement("input");
newInput.type = "button";
buttonList.push(newInput);
buttonDom.appendChild(newInput);
}
var randomList1 = [];
while (randomList1.length < buttonCount / 2) {
var random = Math.floor(Math.random() * buttonCount / 2) + 1;
if (randomList1.indexOf(random) === -1) randomList1.push(random);
}
var randomList2 = [];
while (randomList2.length < buttonCount / 2) {
var random = Math.floor(Math.random() * buttonCount / 2) + 1;
if (randomList2.indexOf(random) === -1) randomList2.push(random);
}
randomList1.forEach((random, index) => buttonList[index].setAttribute("class", random));
randomList2.forEach((random, index) => buttonList[index + buttonCount / 2].setAttribute("class", random));
// Game Start
var myButtons = document.querySelectorAll("input[type='button']");
var click = 1;
var colorIndex = "0".repeat(6).split("").map(Number);
var color = ["red", "blue", "green", "black", "gold", "grey"];
myButtons.forEach(button => button.addEventListener("click", game));
function clickTrun() {
click = !click | 0;
}
function win() {
if (colorIndex.every(i => i == 2)) {
alert("YOU WON mdfker!");
location.reload();
}
}
function resetColorIndex() {
if (click === 1) {
colorIndex = colorIndex.map(function(colorValue) {
return colorValue < 2 ? 0 : colorValue;
});
}
}
function mainGameRules() {
setTimeout(function() {
resetColorIndex();
if (click === 1) {
myButtons.forEach(function(button) {
if (colorIndex[button.className - 1] > 1) return;
button.setAttribute("style", "background-color: none;");
button.disabled = false;
});
}
}, 700);
}
function game() {
this.disabled = true;
var index = this.className - 1;
if (index in colorIndex) {
this.setAttribute("style", "background-color:" + color[index]);
colorIndex[index]++;
mainGameRules();
clickTrun();
}
win();
}
<div id="a1">
</div>

You just need to formulate what you want to do and express it in code. Without sticking to concrete index, try to figure out how any possible index corresponds to particular color. Looking at your example you want to take className for every button, subtract 1 and take color from colorIndex and do something if that color is less than or equal to 1
for (let i = 0; i < myButtons.length; i++) {
// className for current button
const className = myButtons[i].className
// parse it into number
const num = Number(className)
// if number is valid, take element from colorIndex at number-1 position
// and see if that's not bigger than 1
if (num && colorIndex[num - 1] <= 1) {
console.log('things need to be done for index ' + i)
}
}
but my suggestion would be to reconsider your existing setup with myButtons and colorIndex into something more sophisticated

Javascript: Auto Converting numbers to prefixes

I'm creating an idle game(Cookie Clicker etc.), it seems that when my players reach a high amount of clicks, the game starts to slow down.
High numbers doesn't fit well in the game either since it takes up too much space. So is there a script that converts every number to a prefix?
Example:
10 = 10
10000000 becomes 1 million.
1,000,000,000 becomes 1 billion
1,000,000,000,000 becomes 1 trillion
1.4 quadrillion would be 1400000000000000
It's quite similar to this.
Cookie Clicker and swarm simulator has the feature that I'm looking for.
Edit: Thanks, Drew Quick!
For those who's interested:
var count = 1;
function main() {
count += 1000;
var str = count.toString();
var tmpCount = '';
if (count < 1000000) {
tmpCount = "";
} else if (count > 1000000 && count < 1000000000) {
str = "Million";
tmpCount = (count / 1000000).toFixed(2);
} else if (count > 1000000000 && count < 1000000000000) {
str = "Billion";
tmpCount = (count / 1000000000).toFixed(2);
} else if (count > 1000000000000 && count < 1000000000000000) {
str = "Trillion";
tmpCount = (count / 1000000000000).toFixed(2);
} else if (count > 1000000000000000 && count < 1000000000000000000) {
str = "Quadrillion";
tmpCount = (count / 1000000000000000).toFixed(2);
} else if (count > 1000000000000000000 && count < 1000000000000000000000) {
str = "Quintillion";
tmpCount = (count / 1000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000 && count < 1000000000000000000000000) {
str = "Sextillion";
tmpCount = (count / 1000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000 && count < 1000000000000000000000000000) {
str = "Septillion";
tmpCount = (count / 1000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000 && count < 1000000000000000000000000000000) {
str = "Octillion";
tmpCount = (count / 1000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000 && count < 1000000000000000000000000000000000) {
str = "Nonillion";
tmpCount = (count / 1000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000 && count < 1000000000000000000000000000000000000) {
str = "Decillion";
tmpCount = (count / 1000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000) {
str = "Undecillion";
tmpCount = (count / 1000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000) {
str = "Duodecillion";
tmpCount = (count / 1000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000) {
str = "Tredecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000000) {
str = "Quattuordecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000000000) {
str = "Quindecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000000000000) {
str = "Sexdecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000000000000000) {
str = "Septendecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000000000000000000) {
str = "Octodecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000000000000000000 && count < 1000000000000000000000000000000000000000000000000000000000000000) {
str = "Novemdecillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 1000000000000000000000000000000000000000000000000000000000000000 && count < 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000) {
str = "Vigintillion";
tmpCount = (count / 1000000000000000000000000000000000000000000000000000000000000000).toFixed(2);
} else if (count > 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 && count) {
str = "Googol";
tmpCount = (count / 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000).toFixed(2);
}
document.getElementById("count").innerText = tmpCount + ' ' + str;
setTimeout(function() {
main();
}, 1);
}
main();
<span id="count">test</span>
Hope it helps!!

How can I convert numbers into scientific notation?
var clicks = 100000000000000000000000;
alert(clicks.toExponential());
Edit: What about something simple and straight forward like so? This is rough by the way. Just to get the idea across.
var count = 1;
function main() {
count += 1000;
var str = count.toString();
var tmpCount;
if (count < 1000000) {
tmpCount = "";
} else if (count > 1000000 && count < 1000000000) {
str = "million";
tmpCount = (count / 1000000).toFixed(2);
} else if (count > 1000000000 && count < 1000000000000) {
str = "billion";
tmpCount = (count / 1000000000).toFixed(2);
}
document.getElementById("count").innerText = tmpCount + ' ' + str;
setTimeout(function() {
main();
}, 1);
}
main();
<span id="count">test</span>

Matching variables not updating

The concept is simliar to a slider. Here is the JsFiddle
Each section is set to:
visibility: hidden;
until assigned the "anim-in" class. The issue is with var $currSection and $nextSection that need the var $rightCounter to correctly evaluate.
var $currSection = $rightCounter;
var $nextSection = $rightCounter + 1;
$rightCounter is updated in the counter function:
function counter (event){
var $counterSelect = $(this).attr('id');
if ( $counterSelect == "right") {
if ( $rightCounter >= 0 && $rightCounter <= 4){
$rightCounter += 1;
console.log($rightCounter);
if ($leftCounter <= 0) {
$leftCounter = 0;
console.log($leftCounter);
}
else {
$leftCounter -= 1;
console.log($leftCounter);
}
}
}
else {
if ($leftCounter >= 0 && $leftCounter <= 4){
$leftCounter += 1;
console.log($leftCounter);
if ($rightCounter <= 0) {
$rightCounter = 0;
console.log($rightCounter);
}
else {
$rightCounter -= 1;
console.log($rightCounter);
}
}
}
animOut();
return $rightCounter;
};
The animOut function uses $currSection and $nextSection to redistribute classes, but they are not updating with the $rightCounter?
Note: the console logs are there to show what the vars are evaluating to

Betfair like Odds increment and decrement

Please help me it is very irritating. Don't know why my logic is failed every time.
I am trying to make Betfair like odds increment in my web project. Betfair have it's own price group which can be found here
LINK: https://api.developer.betfair.com/services/webapps/docs/display/1smk3cen4v3lu3yomq5qye0ni/Betfair+Price+Increments
Here is explanation:
if odds is 1.01 and some body want to increase that odds via html5 number spinner the increment will be 0.01 and if odds is 2 the increment will be 0.02. whole increment list is available in that link.
working example can be found in betfair's betslip.
here is my Javascript:
function getIncremantal(fval) {
var val = parseFloat(fval);
var step;
if (val <= 1.99) {
step = 0.01;
} else if (val > 2 && val < 3) {
step = 0.02;
} else if (val > 3 && val < 4) {
step = 0.05;
} else if (val > 4 && val < 6) {
step = 0.1;
} else if (val > 6 && val < 10) {
step = 0.2;
} else if (val > 10 && val < 19.5) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
Update: jsFiddle
http://jsfiddle.net/71fs0a67/1/

I tried the following which is not using number stepping, but if you use the buttons it does work. It is an alternate solution, sorry if its not what you are looking for.
HTML:
<input type="number" min="1.01" max="1000" id="num"/>
<button class="increment">+</button>
<button class="decrement">-</button>
Javascript:
$('.increment').on('click', function() {
var elem = $('#num');
var value = parseFloat(elem.val());
var result = +(value + getIncremantal(value)).toFixed(2);
elem.val(result);
});
$('.decrement').on('click', function() {
var elem = $('#num');
var value = parseFloat(elem.val());
var result = +(value - getDecremantal(value)).toFixed(2);
elem.val(result);
});
function getIncremantal(val) {
var step;
if (val < 2) {
step = 0.01;
} else if (val >= 2 && val < 3) {
step = 0.02;
} else if (val >= 3 && val < 4) {
step = 0.05;
} else if (val >= 4 && val < 6) {
step = 0.1;
} else if (val >= 6 && val < 10) {
step = 0.2;
} else if (val >= 10 && val < 20) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
function getDecremantal(val) {
var step;
if (val <= 2) {
step = 0.01;
} else if (val > 2 && val <= 3) {
step = 0.02;
} else if (val > 3 && val <= 4) {
step = 0.05;
} else if (val > 4 && val <= 6) {
step = 0.1;
} else if (val > 6 && val <= 10) {
step = 0.2;
} else if (val > 10 && val <= 20) {
step = 0.5;
} else if (val > 20 && val <= 30) {
step = 1;
} else if (val > 30 && val <= 50) {
step = 2;
} else if (val > 50 && val <= 100) {
step = 5;
} else if (val > 100 && val <= 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
http://jsfiddle.net/71fs0a67/7/
With jquery ui spinner, you can do something like this:
$( "#spinner" ).spinner({
min: 1.01,
max: 1000,
step: 0.01,
spin: function( event, ui ) {
event.preventDefault();
event.stopPropagation();
var value = this.value || ui.value;
value = parseFloat(value);
var step;
if ($(event.currentTarget).hasClass('ui-spinner-up')) {
step = getIncremantal(value);
value = +(value + step).toFixed(2);
$( "#spinner" ).spinner('value', value);
} else {
step = getDecremantal(value);
value = +(value - step).toFixed(2);
$( "#spinner" ).spinner('value', value);
}
}
});
http://jsfiddle.net/71fs0a67/9/

Your code will return undefined for whole numbers.
Change all instances of val > number to val >= number

Try this:
function getIncremantal(fval) {
var val = parseFloat(fval);
var step;
if (val < 2) {
step = 0.01;
} else if (val >= 2 && val < 3) {
step = 0.02;
} else if (val >= 3 && val < 4) {
step = 0.05;
} else if (val >= 4 && val < 6) {
step = 0.1;
} else if (val >= 6 && val < 10) {
step = 0.2;
} else if (val >= 10 && val < 20) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
function getDecremantal(fval) {
var val = parseFloat(fval);
var step;
if (val <= 2) {
step = 0.01;
} else if (val > 2 && val <= 3) {
step = 0.02;
} else if (val > 3 && val <= 4) {
step = 0.05;
} else if (val > 4 && val <= 6) {
step = 0.1;
} else if (val > 6 && val <= 10) {
step = 0.2;
} else if (val > 10 && val <= 20) {
step = 0.5;
} else if (val > 20 && val <= 30) {
step = 1;
} else if (val > 30 && val <= 50) {
step = 2;
} else if (val > 50 && val <= 100) {
step = 5;
} else if (val > 100 && val <= 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}