We Keep Coding

Using onkeyup to display output whilst typing

I am trying to use "onkeyup" to display the realtime output of a form. It appears to be working just fine in my Codepen project, but not in VS Code. I can't pinpoint where I'm going wrong.
Here's my Codepen: https://codepen.io/jonah-cockshaw/pen/OJOrapb
Here's the code from VS Code:
<h3>Chiller capacity</h3>
<p>Please input each chiller’s rated capacity in kW. The rated capacity is on the chiller nameplate.</p>
<label for="chiller-1">Chiller 1</label><br>
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>
<label for="chiller-2">Chiller 2</label><br>
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-2" name="chiller-2"placeholder="Input number in KW" value=""><br>
<label for="chiller-3">Chiller 3</label><br>
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-3" name="chiller-3" placeholder="Input number in KW" value=""><br>
<label for="chiller-4">Chiller 4</label><br>
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-4" name="chiller-4" placeholder="Input number in KW" value=""><br>
<label for="chiller-5">Chiller 5</label><br>
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-5" name="chiller-5" placeholder="Input number in KW" value=""><br>
<p id="output">Output goes here</p>
function addAll() {
const chiller1 = Math.floor(document.getElementById("chiller-1").value);
const chiller2 = Math.floor(document.getElementById("chiller-2").value);
const chiller3 = Math.floor(document.getElementById("chiller-3").value);
const chiller4 = Math.floor(document.getElementById("chiller-4").value);
const chiller5 = Math.floor(document.getElementById("chiller-5").value);
const allChillersValue = chiller1 + chiller2 + chiller3 + chiller4 + chiller5;
// console.log(allChillersValue);
document.getElementById('output').innerHTML = allChillersValue;
};

the issue come from the way you add the keyup event listener
onkeyup=`addAll()`
the valid html syntax is
onkeyup="addAll()"
but a better way i can advice is use addEventlistener method on all input-field class
[...document.getElementsByClassName('input-field')].forEach(input => {
input.addEventListener('keyup', addAll);
});
[...document.getElementsByClassName('input-field')].forEach(input => {
input.addEventListener('keyup', addAll);
});
function addAll() {
const chiller1 = Math.floor(document.getElementById("chiller-1").value);
const chiller2 = Math.floor(document.getElementById("chiller-2").value);
const chiller3 = Math.floor(document.getElementById("chiller-3").value);
const chiller4 = Math.floor(document.getElementById("chiller-4").value);
const chiller5 = Math.floor(document.getElementById("chiller-5").value);
const allChillersValue = chiller1 + chiller2 + chiller3 + chiller4 + chiller5;
console.log(allChillersValue);
document.getElementById('output').innerHTML = allChillersValue;
}
<h3>Chiller capacity</h3>
<p>Please input each chiller’s rated capacity in kW. The rated capacity is on the chiller nameplate.</p>
<label for="chiller-1">Chiller 1</label><br>
<input type="number" class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>
<label for="chiller-2">Chiller 2</label><br>
<input type="number" class="input-field" id="chiller-2" name="chiller-2"placeholder="Input number in KW" value=""><br>
<label for="chiller-3">Chiller 3</label><br>
<input type="number" class="input-field" id="chiller-3" name="chiller-3" placeholder="Input number in KW" value=""><br>
<label for="chiller-4">Chiller 4</label><br>
<input type="number" class="input-field" id="chiller-4" name="chiller-4" placeholder="Input number in KW" value=""><br>
<label for="chiller-5">Chiller 5</label><br>
<input type="number" class="input-field" id="chiller-5" name="chiller-5" placeholder="Input number in KW" value=""><br>
<p id="output">Output goes here</p>

It's a copy-paste issue. VS Code has turned single quotes ' into ticks `.
Change the ticks surrounding the onkeyup property value for each element to a single or double quote instead.
INCORRECT
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>
FIXED
<input type="number" onkeyup="addAll()" class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>
By fixing those characters, the code will run.

Get Input field array index in jquery

I have array of input field like this;
<input type="text" name="pname[283]" value="" class="input" />
<input type="text" name="pname[678]" value="" class="input" />
<input type="text" name="pname[876]" value="" class="input" />
<input type="text" name="pname[454]" value="" class="input" />
Now i want to get the array indexes of every field inside foreach loop something like this
$('.input').each(function(e) {
console.log('get array indexes'); eg: 283, 678, 876, 454
});

You can parse the name attribute manually.
$('.input').each(function() {
const name = $(this).prop('name');
console.log(name.slice(name.indexOf('[') + 1, -1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="pname[283]" value="" class="input" />
<input type="text" name="pname[678]" value="" class="input" />
<input type="text" name="pname[876]" value="" class="input" />
<input type="text" name="pname[454]" value="" class="input" />

JQuery - Get values from html array inputs

A user has the capacity to add as many items as possible through html inputs. The inputs look like;
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control" name="part_number[]" number" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
<input class="form-control item" name="description[]" type="text">
I would like to add the items to my database for storage.. How do i iternate through each input? part number and description belong to a single row.

function getdata() {
var partNumbers = [];
var descriptions = [];
$('[name="part_number[]"]').each(function() {
partNumbers.push(this.value);
})
$('[name="description[]"]').each(function() {
descriptions.push(this.value);
})
var data = {
partNumbers: partNumbers,
descriptions: descriptions
}
$('#output').val(JSON.stringify(data))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" type="text" value="part number 1">
<input class="form-control" name="part_number[]" type="text" value="part number 2">
<input class="form-control" name="part_number[]" type="text" value="part number 3">
<br>
<input class="form-control item" name="description[]" type="text" value="description 1">
<input class="form-control item" name="description[]" type="text" value="description 2">
<input class="form-control item" name="description[]" type="text" value="description 3">
<hr>
<button type="button" onclick="getdata()">get data</button>
<textarea id="output" rows="10" cols="100" placeholder="output"></textarea>

If your inputs are within a form, you can use .serializeArray() and then .reduce() it to create an object which stores keys and array values for multiple input types like below. You can then submit this data to your server to then store in your database:
const data = $("#myform").serializeArray().reduce((acc, o) => {
if (o.name.slice(-2) === "[]") {
acc[o.name] = acc[o.name] || [];
acc[o.name].push(o.value);
} else {
acc[o.name] = o.value;
}
return acc;
}, {});
console.log(data); // data to POST
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input class="form-control" name="part_number[]" value="pn1" type="text">
<input class="form-control" name="part_number[]" value="pn2" type="text">
<input class="form-control" name="part_number[]" value="pn3" type="text">
<input class="form-control item" name="description[]" value="desc1" type="text">
<input class="form-control item" name="description[]" value="desc2" type="text">
<input class="form-control item" name="description[]" value="desc3" type="text">
<input class="form-control item" name="single_data" value="non-array data" type="text">
</form>

From your question, I understand that you want the description and part number in a row.
Please find my answer using .each function of jQuery.
The .each() function iterates through all the specified elements and it returns the index position of each element. Here I'm iterating through the part number, so I want to take the corresponding description, that is the description at the index position of part_number. To achieve this am using another jQuery selector :eq(). It will select the element at index n within the matched set.
$(".submit").on("click", function(){
let user_input = [];
$("input[name='part_number[]']").each(function(index){
user_input.push({
part_number: $(this).val(),
description: $(`.item:eq(${index})`).val()
});
});
console.log("final result = ", user_input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control" name="part_number[]" placeholder="number" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<input class="form-control item" name="description[]" placeholder="description" type="text">
<button type="submit" class="submit"> Save</button>

I would rather fix the HTML than trying to fix the data afterwards.
You have items with the values descriptionand part_number, in order to group the data i would firstly group them visually in your HTML by adding a wrapper around each part_number + description pair:
<div class="item">
<input type="text" name="part_number[]" />
<input type="text" name="decription[]" />
</div>
After that we fix the input names' and add them to a group item:
<div class="item">
<input type="text" name="item[part_number]" />
<input type="text" name="item[decription]" />
</div>
To add multiple item elements in your form you need to add an ID to each item when adding it to your form:
<div class="item">
<input type="text" name="item[0][part_number]" />
<input type="text" name="item[0][decription]" />
</div>
<div class="item">
<input type="text" name="item[1][part_number]" />
<input type="text" name="item[1][decription]" />
</div>
When adding these values to your database you can then iterate over them like so: ( I'm just guessing you will use PHP)
foreach( $_POST['item'] as $item) {
$item['part_number'];
$item['description];
}

How to get a list containing all input labels available in a form

I want a list containing all labels avaliable in a form, or just a way to loop through them all, and then check the text of one-by-one.
I tried first:
$('label').each(function() {
console.log(this); // this was to test :/
});
and later some variations:
$('input').labels().each(function() { ... });
$('label').siblings().each(function() { ... });
None worked on this form:
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
and much more ....
</form>
references: .labels(), .siblings()
How could I do it?
EDIT
I commited a big noob fault here and I'm sorry.
I found out what was going wrong.
I should have put the entire code like this in first place:
<!doctype html>
<html>
<body>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</form>
<script src="jquery-3.2.1.min.js" rel="javascript"></script>
<script type="javascript">
$('label').each(function() {
console.log(this);
});
</script>
</body>
</html>
THE PROBLEM
I changed <script type="javascript">jquery code here</script> by removing the type="javascript" attribute and it worked. I think the usage of type="javascript" is viable only when the <script>tag is defined inside <head> tag.
Another thing: I tested the version $('label').siblings().each(function() { ... }); and it worked as well.
I'm greatful for the time and effort you all had in helping me out with the first problem submitted.

Select the form-group class and label and iterate using each , .text() method will return the text content of the label. trim() to remove any white space
$(".form-group label").each(function(i, v) {
console.log($(v).text().trim())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity"></select>
</form>

Maybe you were not able to do that because you had an unclosed select tag, as what I understood you want to iterate through all the labels in the form and want to access the siblings of the label too, i have added a code below see if that is what you wanted. I am printing the label text and the id of the next element to the label i.e input
$(document).ready(function() {
var labels = $("form label");
labels.each(function() {
console.log("Label Text " + $(this).text() + " ", "Next element id =" + $(this).next().attr('id'));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">
<label for="id_cnpj">Cnpj:</label>
<input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">
<label for="id_cpf">Cpf:</label>
<input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">
<label for="id_rg">Rg:</label>
<input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">
<label for="id_federation_unity">Federation unity:</label>
<select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</select>
and much more ....
</form>

Value of parent input

From select name change[] val(), I would like to get input from it's parent input id champion[] with JQuery but I'm getting
'undefined' error
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="champion[]" size="20" list="champions" value="" placeholder="Enter Champion's name">
<datalist id="champions"></datalist>
Add General Change<a></a>
Add Spell<a></a>
<a>
<p>
<select name="change[]" id="change[]" onchange="val()"></select>
<label for="var" readonly="true">
<input type="text" id="championSpell[]">
<br>
<textarea type="text" id="p_scnt" size="20" name="p_scnt_2" value="" placeholder="Enter Description"></textarea>
<select></select>
</label>
Add Change
Remove Spell</p></a>
</label>
</p>
</div>
var championName = $("#change").closest('input').val();

HTML
<select name="change[]" id="change[]" onchange="val(this)"></select>
Javascript
function val(elm) {
var championName = $(elm).closest("label").find("input").val();
alert('champion name is ' + championName);
}