Using onkeyup to display output whilst typing - javascript

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.

Related

How can I make my form only except values that the user entered that are between 1 - 100 (e.g like for the age box)

I want this to apply to the age input box and to only except the values that are between 1 - 100,in 'javascript'.
<h1>Form</h1>
<form name="form" onsubmit="myFunction()" method="post" action="">
<div>
<input type="text" required minlength="3" maxlength="20" placeholder="Enter your first name">
</div>
<div>
<input type="text" minlength="3" maxlength="20" required placeholder="Enter your last name">
</div>
<div>
<input id="age" required name="number" type="number" placeholder="Enter your age">
</div>
<div>
<input type="text" required placeholder="Enter your email">
</div>
<div>
<input type="submit" required value="Submit">
</div>
</form>
The attributes min and max is probably what you're looking for.
<input id="age" required name="number" type="number" placeholder="Enter your age" min="1" max="100">
You may need to clarify what you mean by "only except the values that are between 1 - 100,in 'javascript'." if not.

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];
}

Limiting user input on textbox to specific Letters

I have two textboxes in which I want to limit the user, so he can only use Y or N in that textbox. How can i achieve
.yes_or_no{
font-size:xx-large;
font-weight:900;
color:#000;
}
<input id="t1" class="yes_or_no" type="text" class="typing1" name="txt1" oninput="this.value = this.value.toUpperCase(), this.value.replace(/[^0-9]/, '')" maxlength="1" />
<input id="t2"class="yes_or_no" type="text" class="typing2" name="txt2" oninput="this.value = this.value.toUpperCase(), this.value.replace(/[^0-9]/, '')" maxlength="1" />
You're almost there! Instead of replacing the non-numeric characters with blank, you can replace anything not Y or N with blank.
See the following demo:
<input type="text" class="typing1" name="txt1" id="t1" oninput="this.value = this.value.toUpperCase().replace(/[^YN]/, '')" maxlength="1" />
<input type="text" class="typing2" name="txt2" id="t2" oninput="this.value = this.value.toUpperCase().replace(/[^YN]/, '')" maxlength="1" />
you have to define a pattern to only accept Y or N. - documentation
See if this is what you are looking for.
while not putting Y or N does not submit form.
<form action="/action_page.php">
Question?: <input type="text" name="question" pattern="^(?:Y\b|N\b)" maxlength="1" title="Introduce Y or N">
<input type="submit">
</form>

Disabling text boxes based on other radio box selection

I've two radio buttons, on active each radio buttton will span to two text boxes.
Now when I select first radio button, other radio buttion's two textboxes should be disabled and vice versa
can someone help me on this, I'm new to JS
Below is the HTML
<div class=radio_section>
<br></br>
<input type="radio" name="etime6.0" id="etime6.0-6.1" required>
<dev class="labelv">
<label for="etime6.0-dogs">ETIME source client 6.0 & 6.1 </label>
</dev>
<div class="reveal-if-active">
<label for="field1"><span class=text>Enter the Source DB Name<span class="required">*</span></span>
<input id="db" type="text" maxlength="8" pattern="(^((et.)|(Et.)|(ET.)).+)|(.{3}([eEtT]$))" title="Database Name starts with et (or) Ends with e or t minimum of 4 letters" class="input-field" name="database_name" value="" /></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name" value=""/></label>
</div>
</div>
<div class=radio_section>
<input type="radio" name="etime6.0" id="etime6.2">
<dev class="labelv">
<label for="etime6.0-cats">ETIME Source Client above 6.1</label>
</dev>
<div class="reveal-if-active">
<label for="which-cat"></label>
<label for="field1"><span class=text>Enter source client name<span class="required">*</span></span>
<input id="client1" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name1" value=""/></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_namei2" value=""/></label>
</div>
</div>
<dev class="submit">
<label><span> </span><input type="submit" value="Next" /><input type="reset" value="Reset"></label>
I would suggest to create a jsfiddle with your code and provide... This will help to quickly understand the problem and provide solution.
This would help you. I change some of your ID's
$('#rd1').click(function(){
$("#rd1").removeAttr('disabled');
$("#db").removeAttr('disabled');
$("#client").removeAttr('disabled');
$("#client1").attr('disabled',true);
$("#clientname").attr('disabled',true);
})
$('#rd2').click(function(){
$("#db").attr('disabled',true);
$("#client").attr('disabled',true);
$("#client1").removeAttr('disabled');
$("#clientname").removeAttr('disabled');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=radio_section>
<br></br>
<input type="radio" name="etime6.0" id="rd1" required>
<dev class="labelv">
<label for="etime6.0-dogs">ETIME source client 6.0 & 6.1 </label>
</dev>
<div class="reveal-if-active">
<label for="field1"><span class=text>Enter the Source DB Name<span class="required">*</span></span>
<input id="db" type="text" maxlength="8" pattern="(^((et.)|(Et.)|(ET.)).+)|(.{3}([eEtT]$))" title="Database Name starts with et (or) Ends with e or t minimum of 4 letters" class="input-field" name="database_name" value="" /></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="client" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name" value=""/></label>
</div>
</div>
<div class=radio_section>
<input type="radio" name="etime6.0" id="rd2">
<dev class="labelv">
<label for="etime6.0-cats">ETIME Source Client above 6.1</label>
</dev>
<div class="reveal-if-active">
<label for="which-cat"></label>
<label for="field1"><span class=text>Enter source client name<span class="required">*</span></span>
<input id="client1" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_name1" value=""/></label>
<label for="field1"><span class=text>Enter Target Client name<span class="required">*</span></span>
<input id="clientname" type="text" class="input-field" maxlength="3" pattern=".{3,}" title="3 characters minimum" class="input-field" name="Client_namei2" value=""/></label>
</div>
</div>
<dev class="submit">
<label><span> </span><input type="submit" value="Next" /><input type="reset" value="Reset"></label>
I think you can try this solution, this is not the optimal one, but it works.
//Getting all the radio elements
var radios = document.getElementsByName('etime6.0');
//Iterating though all the elements to add click event listner
for(var i = 0; i < radios.length; ++i){
radios[i].addEventListener('click',function(){
//Making all the input text not disabled for every time to refresh the state
var allInputFields = document.querySelectorAll('input[type="text"]');
[].forEach.call(allInputFields, function(input) {
input.disabled = false;
});
//Checking which radio is not checked
for(var i = 0; i<radios.length; i++){
if(!radios[i].checked){
//Getting all the input[type="text"] for unchecked radio button
var inputFields = radios[i].parentElement.querySelectorAll('input[type="text"]');
[].forEach.call(inputFields, function(input) {
input.disabled = true;
});
}
}
});
}
http://jsbin.com/jofupolaqa/1/edit?html,js,console,output

javascript synchronize inputs with same name

I need to synchronize all inputs with same name.
I don't know inputs names.
Example:
<input type="text" placeholder="number" name="fields[340]" required="" value="">
<input type="text" placeholder="number" name="fields[340]" required="" value="">
So now I need to synchronize inputs values.
Problem is that I don't know input names. This is what I have so far.
var $inputs = $(":input");
$inputs.keyup(function() {
$inputs.val($(this).val());
});
Use 'input[name="' + this.name + '"]' selector to get the inputs with same name.
var $inputs = $(":input");
$inputs.on('input',function() {
$('input[name="' + this.name + '"]').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" placeholder="number" name="fields[340]" required="" value="">
<input type="text" placeholder="number" name="fields[340]" required="" value="">
<br/>
<input type="text" placeholder="number" name="fields[341]" required="" value="">
<input type="text" placeholder="number" name="fields[341]" required="" value="">

Categories