We Keep Coding

Count number of inputs and sum depending on its values

I would like to do two things:
I want to count the number of inputs that have a value. (doesn't matter if the value is A or X).
Then, count the number of inputs whose value is equal to A
therefore, the results should contain 6 of 14 items
This is what I tried to count the inputs that already have value:
var filledInputs = $(".col input").filter(function() {
return !!this.value;
}).length;
const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
item.innerHTML = filledInputs;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>

One possible implementation with jQuery:
let any = 0;
let a = 0;
$(".col input").each((idx, item) => {
if (!item.getAttribute("value")) {
return;
}
if (item.getAttribute("value") == "A") {
a += 1;
}
any += 1;
});
$(".results").html(a + " of " + any + " items")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results">
6 of 14 items
</div>

Use the same logic that you made to find the filled inputs, to find the inputs with value A
const filledInputs = $(".col input").filter(function () {
return !!this.value;
}).length;
const inputWithValA = $(".col input").filter(function () {
return this.value === 'A';
}).length;
console.log(filledInputs)
console.log(inputWithValA)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
<input type="text" value="A" />
<input type="text" value="A" />
<input type="text" value="X" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" value="A" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" value="X" />
<input type="text" value="X" />
<input type="text" value="A" />
</div>
<div class="col">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="results">6 of 14 items</div>

var $inputs = $(".col input").filter(function() {
return !!$(this).val();
});
var inputsFilled = $inputs.length
var inputsA =$inputs.filter(function() {
return $(this).val() == 'A';
}).length
console.log(inputsFilled)
console.log(inputsA)
$(".results").html(`${inputsA} of ${inputsFilled} are A`)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>

Here's a minimal solution:
var AInputs = $(":input[value='A']").length;
console.log(AInputs);
Full snippet:
var filledInputs = $(".col input").filter(function() {
return !!this.value;
}).length;
console.log(filledInputs);
var AInputs = $(":input[value='A']").length;
console.log(AInputs);
const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
item.innerHTML = filledInputs;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>

Don't mix DOM and jQuery like that
You are looping over one element
Perhaps you meant this:
const $breakdown = $("#breakdown");
const $results = $(".results")
let totalA = 0;
let totalNonEmptyInput = 0;
$(".col").each(function(i, ele) {
const $inputs = $(ele).find("input");
let As = 0;
const notEmpty = $inputs.filter(function() {
const val = this.value.trim();
if (val === "A") {
As++;
totalA++;
}
totalNonEmptyInput += val !== "";
return val !== ""
}).length;
$results.html(`${totalA} of ${totalNonEmptyInput}`)
$breakdown.append(`<li>${(i+1)}: ${notEmpty}/${$inputs.length} - found ${As} A</li>`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results"></div>
<ul id="breakdown"></ul>

const cols_ = document.querySelectorAll('.col');
let inputs_val_a = []; // matched input will stored here
cols_?.forEach(function(col,col_i){
col.querySelectorAll('input')?.forEach(function(ipt, ipt_i){
if( ipt.value == 'A' ){
// match
console.log('cols:'+col_i+' input:'+ipt_i+' have value "A"');
inputs_val_a.push(ipt);
}
})
});
document.querySelector('.results').innerHTML = 'there is '+ inputs_val_a.length + ' inputs with value == A';
<div class="results"></div>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>

Maybe the easiest method (and marginally more performant than filtering) in vanilla JS is to do three selections: one on all inputs, and then two selections using the value attribute.
const inputs = document.querySelectorAll('input');
const inputsAll = document.querySelectorAll('[value]');
const inputsA = document.querySelectorAll('[value="A"]');
console.log(`${inputsAll.length} of ${inputs.length} items`);
console.log(`${inputsA.length} of ${inputs.length} items`);
<div class="col"> <input type="text" value="A"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text"> <input type="text"> <input type="text"></div><div class="results"></div>

If you want updated counts while you are filling in the fields you could recalculate it in an event driven function:
const inps=$(".col input").get();
$("body").on("input",".col input",upd8);
function upd8(){
[any,A]=inps.reduce((a,c)=> (c.value&&++a[0]&&c.value.toUpperCase()=="A"&&++a[1],a),[0,0]);
$(".results").html(A + " of " + any + " items")
};
upd8();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<input type="text" value="A">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="A">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text" value="X">
<input type="text" value="X">
<input type="text" value="A">
</div>
<div class="col">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="results">
6 of 14 items
</div>

Getting values with javascript

I started learning javascript a few weeks ago, the problem is that with my code I don't get the values that I put and I don't find where the problem could be.
function muestraDatos(){
var var1=document.getElementById("clogin").value;
var var2=document.getElementById("cpassword").value;
var var3=document.getElementById("cemail").value;
var var4=document.getElementById("cnombre").value;
var var5=document.getElementById("capellido").value;
var var6=document.getElementById("cfecha").value;
var var7=document.getElementById("cedad").value;
var var8=document.getElementById("ccolor").value;
var var9=document.getElementById("ccalle").value;
var var10=document.getElementById("ccpostal").value;
var var11=document.getElementById("cpoblacion").value;
var var12=document.getElementById("cprovincia").value;
var var13=document.getElementById("ctelefono").value;
var var14=document.getElementById("csemestre").value;
var var15=document.getElementById("ccarrera").value;
var var16=document.getElementByName('cinteres').value;
alert("Login: "+var1+"\nPassword: "+var2+"\nEmail: "+var3+"\Nombre: "+var4+" "+var5+"\nFecha de nacimiento: "+var6+"\nEdad: "+var7+"\nColor preferido: "+var8+"\nCalle: "+var9+"\nCódigo postal: "+var10+"\nPoblación: "+var11+"\nProvincia: "+var12+"\nTeléfono: "+var13+"\nSemestre: "+var14+"\nCarrera: "+var15+"\nInterés: "+var16);
}
<form onsubmit="return muestraDatos()">
<fieldset>
<legend>Solicitud socio</legend>
<label>Login: </label>
<input type="text" id="clogin" />
<br/>
<label>Password: </label>
<input type="text" id="cpassword" />
<br/>
<label>Email: </label>
<input type="email" id="cemail" />
<br/>
<strong>Datos personales:</strong>
<br/>
<label>Nombre: </label>
<input type="text" id="cnombre" />
<br/>
<label>Apellido: </label>
<input type="text" id="capellido" />
<br/>
<label>Fecha de nacimiento: </label>
<input type="date" id="cfecha" />
<br/>
<label>Edad: </label>
<input type="number" min="18" max="100" step="1" value="18" id="cedad" />
<br/>
<label>Color preferido: </label>
<input type="color" id="ccolor" />
</fieldset>
<fieldset>
<legend>Contacto</legend>
<label>Calle: </label>
<input type="text" id="ccalle" />
<br/>
<label>Código postal: </label>
<input type="text" id="ccpostal" />
<br/>
<label>Población: </label>
<input type="text" id="cpoblacion" />
<br/>
<label>Provincia: </label>
<input type="text" id="cprovincia" />
<br/>
<label>Teléfono: </label>
<input type="tel" id="ctelefono" />
<br/>
<strong>Datos estudiante:</strong>
<br/>
<label>Semestre </label>
<select id="csemestre">
<option value="semestreP">primero</option>
<option value="semestreS">segundo</option>
</select>
<label>Carrera </label>
<select id="ccarrera">
<option value="disenyo">diseño</option>
<option value="arquitectura">arquitectura</option>
<option value="derecho">derecho</option>
<option value="otra">otra</option>
</select>
<br /> Interés
<br/>
<label>Pintar</label>
<input type="radio" name="cinteres" value="pintar" />
<label>Hacer deporte</label>
<input type="radio" name="cinteres" value="hacerdeporte" />
<label>Ver peliculas</label>
<input type="radio" name="cinteres" value="verpeliculas" />
<label>Escuchar musica</label>
<input type="radio" name="cinteres" value="escucharmusica" />
<label>Leer</label>
<input type="radio" name="cinteres" value="leer" />
<br />
<input type="submit" value="Enviar datos" />
</fieldset>
</form>

See this fiddle
You had a typo here in this line
var var16 = document.getElementByName('cinteres').value;
It's actually
var var16 = document.getElementsByName('cinteres').value;
You missed an 's' in getElementsByName.
Also, according to the docs, document.getElementsByName
Returns a nodelist collection with a given name in the (X)HTML
document.
Thus, your code needs to be replaced as
var var16 = document.getElementsByName('cinteres')[index].value;
where index is the index position of the nodelist that is returned.

Javascript Document Window

Why wont my popup window pop up?
My user should enter information for an appointment. Once Submit is hit a document window should pop up. The submit button appears to work. The clear button is working also. I programmed a function to handle the window and set the onSubmit to return the function.
< script type = "text/javascript" >
function popUpWindow() { //window should return user's name in a window
newWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=500,height=200');
newWin.document.write("<body bgcolor='yellow'><h3>Appointment Confirmation</h3>);
newWin.document.write("
Your name is: " + document["
form "].name.value);
newWin.document.close();
}
</script>
<html>
<head>
<title>Project</title>
</head>
//this form should accept user's input
<body>
<form name="form" onSubmit="return popUpWindow();">
Please enter your name:
<input type="text" name="name" value="" size="50" />
</p>
<p>
Address:
<input type="text" name="address" size="50" />
</p>
<p>
Phone:
<input type="text" name="area_code" size="10" />
</p>
<p>
Email:
<input type="text" name="email" value="" size="20" />
</p>
<p>
<legend>Stylist</legend>
</p>
<input type="radio" name="stylist" id="stylist1" value="dream" />Dream
<input type="radio" name="stylist" id="stylist2" value="aubrey" />Aubrey
<input type="radio" name="stylist" id="stylist3" value="stag" />Stag
<input type="radio" name="stylist" id="stylist1" value="halo" />Halo
<p>
<legend>Services</legend>
</p>
<input type="checkbox" name="service" id="service1" value="cut" />Cut
<br/>
<input type="checkbox" name="service" id="service2" value="relaxer" />Relaxer
<br/>
<input type="checkbox" name="service" id="service1" value="weave" />Weave
<br/>
<input type="checkbox" name="service" id="service1" value="braids" />Braids
<br/>
<input type="checkbox" name="service" id="service1" value="wash" />Wash and Style
<br/>
<input type="checkbox" name="service" id="service1" value="natural" />Natural
<br/>
<p>Leave Comments</p>
<textarea name="comments" id="comments" align="left" rows "8" cols "75"></textarea>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>

Calling a Object Oriented function from jQuery

I am kind of new to JQuery and Javascript and need your help on what I am missing here. I know the code works in jsfiddle.net but when I actually run it on my computer it's not doing anything. I want to keep the Object Oriented functions in "updated-formcheck.js" file separately.
I have a form validation HTML file with a jQuery function that calls my "updated-formcheck.js" file that checks all the empty fields and returns a msg. But when a submit button is clicked, nothing happens. Can you tell me why?
HTML file:
<script src="updated-formcheck.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function(e) {
validateNow(e);
});
});
</script>
In "updated-formcheck.js" file:
function validateNow(eventObj){
var isValid = true;
$('input[type="text"].required, textarea.required, select.required').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false) {
eventObj.preventDefault();
alert(this.e);
}else
this.s;
}

Because
$('input[type="text"].required, textarea.required, select.required')
in your code currently return an empty array, so each function is not called.
This is because you are looking for dom elements with a css class "required" that you doesn't have.

To get your code working I added a "required" class, which your js code is looking for, on the city element. I also updated the jQuery bind event to the form submit instead of a button click.
<html>
<head>
</head>
<body>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" class="required" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="updated-formcheck.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myform').on('submit', function(e) {
//e.preventDefault();
validateNow(e);
return false;
});
});
</script>
</body>
</html>

JavaScript Calculate Button Doesn't Work

This script won't show the calculated total at the end. I can't figure it out! Any suggestions? What am I missing? I have the JavaScript code for the tax function too if that helps. Everything works until I get to the final calculation button.
<H2>Business Card Pricing Calculator</H2>
<P>
<STRONG>Type:</STRONG>
<BR /><BR />
<INPUT id="Horizontal" value="50" type="radio" name="type" />
<LABEL for="Horizontal">Horizontal</LABEL>
<BR />
<INPUT id="vertical" value="50" type="radio" name="type" />
<LABEL for="vertical">Vertical</LABEL>
<BR />
<INPUT id="foldover" value="65" type="radio" name="type" />
<LABEL for="foldover">Foldover</LABEL>
</P>
<P>
<STRONG>Options:</STRONG>
<BR /><BR />
<INPUT id="cutting" value="10" type="checkbox" name="cutting" />
<LABEL for="cutting">Cutting</LABEL>
<BR />
<INPUT id="laminating" value="15" type="checkbox" name="laminating" />
<LABEL for="laminating">Laminating</LABEL>
<BR />
<INPUT id="scoring" value="10" type="checkbox" name="scoring" />
<LABEL for="scoring">Scoring</LABEL>
</P>
<P>
<STRONG>Tax Rate:</STRONG>
<INPUT style="TEXT-ALIGN: right" id="tax_rate" maxLength="5" size="3" type="text"
name="tax_rate" />%
</P>
<P>
<STRONG>Total (Including Tax): </STRONG>
<SPAN id="total_cost"></SPAN>
</P>
<P>
<INPUT id="calculate-button" value="CALCULATE" type="button" />
</P>
JavaScript
$("#calculate-button").click(function () {
var price = 0;
var tax = 0;
var checkedValues = $('input:checked');
$(checkedValues).each(function (index) {
price += parseInt(checkedValues[index].value, 10);
});
tax = (price * $("#tax_rate").val() / 100);
$("#total_cost").html(price + tax);
});