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);```

Exclude deleted value in an array when doing a Math.Random

I was trying to find a way to remove a letter (A,B,C) when I click three times on a button, I tried to use delete, because I don't want to use splice, because splice will change the order of the array. I want the variables letterA, letterB and letterC to keep their position on the array. What I was looking for was something like: if (randomletters == undefined) do math.random again, until it gets something different to undefined, maybe using a while.
I tried, but it doesn't seem to work. Do you have any solution for my problem? Please don't use jQuery, just normal JS.
var A = 0;
var B = 0;
var C = 0;
function incrementA() { A++; }
function incrementB() { B++; }
function incrementC() { C++; }
var letters = new Array()
letters[0] = 'letterA'
letters[1] = 'letterB'
letters[2] = 'letterC'
var randomletter;
function random() {
if (A == 3) { delete letters[0]; }
if (B == 3) { delete letters[1]; }
if (C == 3) { delete letters[2]; }
if ((A == 0 || A == 3) && (B == 0 || B == 3) && (C == 0 || C == 3)) {
randomletter = Math.floor(Math.random() * (letters.length));
if (randomletter == undefined) {
do {
randomletter = Math.floor(Math.random() * (letters.length));
} while(randomletter != undefined)
}
document.getElementById('text').innerHTML = letters[randomletter];
}
}
#green {
height: 20px;
width: 20px;
background: green;
}
#text {
height: 200px;
width: 200px;
background: yellow;
}
<div id="text" onclick="random()"> </div>
<button id="green" onclick="incrementA()">A </button>
<button id="green" onclick="incrementB()">B </button>
<button id="green" onclick="incrementC()">C </button>

You implemented the wrong comparison operator, and need to check the element, not the index.
your random() function should be something like:
function random() {
if (A == 3) { delete letters[0]; }
if (B == 3) { delete letters[1]; }
if (C == 3) { delete letters[2]; }
if ((A == 0 || A == 3) && (B == 0 || B == 3) && (C == 0 || C == 3)) {
do {
randomletter = Math.floor(Math.random() * (letters.length));
} while (letters[randomletter] == undefined)
document.getElementById('text').innerHTML = letters[randomletter];
}
}
The do-while ensures that randomletter is set once, then keeps setting it if the chosen value is undefined. You might want to add a check for "at least one element is valid" before the do-while begins or you could have an infinite loop scenario.
For example:
if (A > 2 && B > 2 && C > 2) {
// all elements of letters are undefined
} else if ((A == 0 || A == 3) && (B == 0 || B == 3) && (C == 0 || C == 3)) {
// do-while loop, because at least one element is valid
}

Multiple instance of object interfering

So, I'm creating a game in HTML/JS (Mostly Jquery).
I got an array of objects initialized at the beginning of the game (when user press P to play).Each object is a falling object (I know it's failing with a boolean named "working"), with "move" method setting a position going from 1 to 22. Each time it move, it show the current div with a number as ID (representing the position), and hide the previous div.
The problem is that, the game work perfectly with only one instance of the Object (so only one cell in the array), but when I try to put few other object, they don't move.
Here is the object constructor :
function flyers(){
this.pos = 0;
this.working = false;
this.jump = 0;
this.interval;
this.move = function(){
if (this.working == true){
if (this.pos == 22)
{
$("#perso21").hide();
this.pos = 0;
this.startWork();
}
checkSave();
if (this.jump == 0)
{ if ((this.pos == 5 && playerPos != 1) || (this.pos == 13 && playerPos != 2) || (this.pos == 19 && playerPos != 3))
{
this.die();
}
if ((this.pos == 4 && playerPos == 1) || (this.pos == 12 && playerPos == 2) || (this.pos == 18 && playerPos == 3))
this.jump = 1;
}
else
{
if (this.pos == 5 || this.pos == 13 || this.pos == 19)
{
score++;
this.jump = 0;
}
$(".score").html("" + score + "");
}
$("#perso" + (this.pos - 1) + "").hide();
$("#perso" + this.pos + "").show(); this.pos++;
}
else
clearInterval(this.interval);
};
this.startWork = function()
{
clearInterval(this.interval);
this.working = true;
this.interval = setInterval(this.move, 1000 - (score / 10 * 100));
}
this.die = function(){
this.working = false;
this.pos = 0;
this.jump = 0;
if (miss < 2)
{
miss++;
}
else
{
quitGame();
}
clearInterval(this.interval);
};
return this;}
And the array initialization :
flyerstab[0] = new flyers();
flyerstab[1] = new flyers();
flyerstab[2] = new flyers();
flyerstab[3] = new flyers();
flyerstab[0].startWork();
The spawner (only possible to have 4 objects falling at the same time)
spawn = setInterval(function()
{
var i;
for (var i = flyerstab.length - 1; i >= 0; i--) {
if (flyerstab[i].working == false)
{
flyerstab[i].startWork();
break;
}
else
console.log(i + " is working");
};
}, 5000 - (score / 10 * 100));
I tried to find why all the day, but I didn't manage to.. Am I constructing them bad ?

Inside of this.interval = setInterval(this.move, 1000 - (score / 10 * 100));, this.move is called with this as the global context. Instead, use
this.interval = setInterval(this.move.bind(this), 1000 - (score / 10 * 100));

jQuery event handler logic

I'm having a problem figuring out where I'm going wrong in my code that is supposed to automatically fill in "railQuantity" for a form I am building. Currently my code only "works" when either 6ft or 8ft "fenceHeight" is selected but either way it uses the total = (Math.ceil(footage / 8) * 3); equation. It will, however, correctly blank out when I choose "Select Fence Height". So I am trying to figure out where I am going wrong with my logic so that it does not correctly use the equation for the corresponding fenceHeight. Any and all help is appreciated! Thanks you guys!
Html snippet:
Fence Description:
<select name="fenceHeight" id="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="4" id="fH4">4 Ft.</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
Javascript snippet:
//Quantity for Rails
$('#fenceHeight, #footage').bind('keypress keydown keyup change', function() {
var footage = parseFloat($(':input[name="footage"]').val(),10);
var total = '';
if($(':input[name="fenceHeight"]').val() != "select"){
if(parseFloat($(':input[name="fenceHeight"]').val() == "8")) {
total = (Math.ceil(footage / 8)* 4);
}
if(parseFloat($(':input[name="fenceHeight"]').val() == "4" || "6")) {
total = (Math.ceil(footage / 8) * 3);
}
$(':input[name="railQuantity"]').val(total.toString());
} else {
$(':input[name="railQuantity"]').val('');
}
});

Try
var $footage = $('#footage'),
$fenceHeight = $('#fenceHeight'),
$railQuantity = $('input[name="railQuantity"]');
$footage.add($fenceHeight).bind('keypress keydown keyup change', function () {
var footage = parseFloat($footage.val(), 10),
fenceHeight = $fenceHeight.val();
var total = '';
if (fenceHeight != NaN) {
if (fenceHeight == '8') {
total = (Math.ceil(footage / 8) * 4);
}
if (fenceHeight == '4' || fenceHeight == '6') {
total = (Math.ceil(footage / 8) * 3);
}
$railQuantity.val(total);
} else {
$railQuantity.val('');
}
});
Demo: Fiddle

These lines are wrong:
if(parseFloat($(':input[name="fenceHeight"]').val() == "8")) {
total = (Math.ceil(footage / 8)* 4);
}
if(parseFloat($(':input[name="fenceHeight"]').val() == "4" || "6")) {
total = (Math.ceil(footage / 8) * 3);
}
You're not comparing the result of parseFloat with the strings, you're comparing the val() with the strings and passing the result of the comparison to parseFloat. And in the second one, you're comparing val() with the result of 4 || 6, which is 4 -- you can't combine comparisons with or in programming languages like you can in English. Change it to:
var height = $(':input[name="fenceHeight"]').val();
if (height == "8") {
total = (Math.ceil(footage / 8)* 4);
} else if (height == "4" || height == "6") {
total = (Math.ceil(footage / 8) * 3);
}

Acrobat JavaScript calculations with Radio Buttons & Checkboxes

I'm trying to write a Javascript calculation for an insurance sales form that I've designed. I'm very new to JS, and am having trouble getting the script to work. I would really appreciate if you could help point out what I'm missing! Thanks so much.
The script is meant to calculate an insurance premium based on two checkboxes (vars cb1 & cb2), a pair of radio buttons which indicate whether insured vehicles are for short or long haul trips (var haul), and the number of insured vehicles (vars trucks_num, cars_num, pvthire_num, buses_num, trailers_num).
At the end, I want the premium (var premium) to be displayed in the field "totalpremium".
I really appreciate your help!
Thank you :).
var cb1 = this.getField("cbexcellent");
var cb2 = this.getField("cbsatisfactory");
var haul = this.getField("haul");
var premium = this.getField("totalpremium");
var trucks_num = this.getField("over4.5t_num").value;
var cars_num = this.getField("cars_num").value;
var pvthire_num = this.getField("pvthire_num").value;
var buses_num = this.getField("buses_num").value;
var trailers_num = this.getField("trailers_num").value;
if((cb1 == "1") && (cb2 == "0") && (haul.valueAsString == "short")) {
var premium = (trucks_num.value * 150) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
if((cb1 == "0") && (cb2 == "1") && (haul.valueAsString == "short")) {
var premium = (trucks_num.value * 190) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
if((cb1 == "1") && (cb2 == "0") && (haul.valueAsString == "long")) {
var premium = (trucks_num.value * 190) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
if((cb1 == "0") && (cb2 = "1") && (haul.valueAsString == "long")) {
var premium = (trucks_num.value * 235) + (cars_num.value * 100) + (pvthire_num.value * 250) + (buses_num.value * 150) + (trailers_num.value * 50);
}
this.getField("totalpremium").value = premium.valueAsString

Check that the export values of your checkboxes match the values indicated as required in your if statements. By default these are set to Yes or No. If they don't match your script won't run right.