We Keep Coding

How to make complete form in which background color of button changes when user starts typing in input field with javascript , html and css?

const btn = document.getElementById("btn");
const inputfield = document.getElementById("username");
inputfield.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
btn.disabled = true;
btn.style.backgroundColor = "grey";
} else {
btn.disabled = false;
btn.style.backgroundColor = "orange";
}
})
<div class="container">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
Now the issue is that it only works for one input and the associated button field
it does not work for another pair of input field and button , so what changes should i make in the above javascript code in which it runs for as many as input field and button i want?
Please can anyone help me in this. Thank you
If you have full jquery code it's also accepted.

My approach was to put the input and button in a div with a custom class.
And just loop over every div, get the child inputs and buttons and just use your existing code for every div.
const btns = document.getElementsByClassName('inputButton');
for (let i = 0; i < btns.length; i++) {
let input = btns[i].querySelector('input');
let button = btns[i].querySelector('button');
input.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
button.disabled = true;
button.style.backgroundColor = "grey";
} else {
button.disabled = false;
button.style.backgroundColor = "orange";
}
});
}
<div class="container">
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>

Just wrap it into a additional div element and iterate trough. For each "input-group" you can add an event listener to the input child and edit the style of the button child.
document.querySelectorAll('.input-group').forEach((group) => {
let input = group.querySelector('input');
let button = group.querySelector('button');
input.addEventListener('keyup', () => {
if(input.value !== "") {
button.disabled = false;
} else {
button.disabled = true;
}
});
});
#btn[disabled] {
background: red;
}
#btn {
background: green;
}
<div class="container">
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>

You can make a loop with a class to add an event listener to every input you want.
You can use data-whateverYouWant to link the button to the input
Also, should make your style in css.
let inputs = document.getElementsByClassName("an-input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("keyup", function(e) {
let btn = document.querySelectorAll("[data-placeholder="+this.placeholder+"]")[0];
if (this.value === "") {
btn.disabled = true;
} else {
btn.disabled = false;
}
})
}
button{
background-color:orange;
}
button:disabled,
button[disabled]{
background-color:grey;
}
<input class="an-input" placeholder="Username" class="input" />
<button disabled data-placeholder="Username" type="button" class="button">Submit</button>
<input class="an-input" placeholder="email" class="input" />
<button disabled data-placeholder="email" type="button" class="button">Submit</button>

Javascript implementation of arrows in input number - How to make so that changes concerned each item?

I have a basket of goods in which there can be many different entities. And I'm trying to implement changes in the number of goods using input - number without arrows, and with additional buttons +/-. I know that I could use identifiers and easily make my plans. But in my case, I need to use querySelectorAll. Help me please correct this code. quantity-arrow-minus decreases the field value and quantity-arrow-plus increases. How to make it so that the changes are concerned with each item?
var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');
minus.forEach(function(node) {
node.addEventListener('click', function() {
update_cart.forEach(function(element) {
element.value = parseInt(element.value) - 1;
});
});
});
plus.forEach(function(node) {
node.addEventListener('click', function() {
update_cart.forEach(function(element) {
element.value = parseInt(element.value) + 1;
});
});
});
<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>
<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>

You can use previousElementSibling and nextElementSibling to access the input that corresponds to the button that was clicked:
var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');
minus.forEach(function(node) {
node.addEventListener('click', function(e) {
const input = e.target.nextElementSibling
input.value = parseInt(input.value) - 1;
});
});
plus.forEach(function(node) {
node.addEventListener('click', function(e) {
const input = e.target.previousElementSibling
input.value = parseInt(input.value) + 1;
});
});
<form action="{% url 'cart:cart_update' %}" method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="0">
<button type="button" class="quantity-arrow-plus">+</button>
<br>
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="0">
<button type="button" class="quantity-arrow-plus">+</button>
</form>

Use Number() instead. Assuming that the minus button will be just after your input, just use this.nextElementSibling. This is will make your code better instead of doing forEach on every element. What if there are many elements like these?
var minus = document.querySelectorAll('.quantity-arrow-minus');
var plus = document.querySelectorAll('.quantity-arrow-plus');
minus.forEach((node) => {
node.onclick = function () {
this.nextElementSibling.value = Number(this.nextElementSibling.value) - 1;
}
});
plus.forEach((node) => {
node.onclick = function () {
this.previousElementSibling.value =Number(this.previousElementSibling.value) + 1;
}
});
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>

Javascript price deduction issue

So I've attempted to create a system for my transactions page so that when a user buys 10 tickets, his total will be 70, however I need it so every ticket after that is sold for normal price. This is where I'm at so far, it works with some examples ( 5 adult 7 student ) for example but not others ( 9 and 2 )
I will be forever grateful if someone can find where I'm going wrong and why some numbers work and others don't. And yes I know my code is a little sloppy I apologize in advance but thank you if you can help!
<form id="newshow" action="required/post/saveTransaction.php" method="post" oninput="
bothTickets.value = Math.round(ticketOne.value) + Math.round(ticketTwo.value);
var basePrice;
var TempAmt;
var newTicketValueOne;
var newTicketValueTwo;
if (bothTickets.value == 10) {
basePrice = 70
ticketOnePrice = 0
ticketTwoPrice = 0
calculation.value = Math.round(ticketOne.value * ticketOnePrice) + Math.round(ticketTwo.value * ticketTwoPrice) + basePrice;
} else if (bothTickets.value >= 10) {
if (ticketOne.value >= 10) {
newTicketValueOne = Math.round(ticketOne.value) - 10;
newTicketValueTwo = Math.round(ticketTwo.value);
} else if (ticketTwo.value >= 10) {
newTicketValueTwo = Math.round(ticketTwo.value) - 10;
newTicketValueOne = Math.round(ticketOne.value);
} else if (ticketOne.value >= 5) {
newTicketValueOne = Math.round(ticketOne.value) - 5;
newTicketValueTwo = Math.round(ticketTwo.value) - 5;
} else if (ticketTwo.value >= 5) {
newTicketValueTwo = Math.round(ticketTwo.value) - 5;
newTicketValueOne = Math.round(ticketOne.value) - 5;
} else {
newTicketValueOne = Math.round(ticketOne.value);
newTicketValueTwo = Math.round(ticketTwo.value);
}
basePrice = 70
ticketOnePrice = 10
ticketTwoPrice = 7
tempAmt = basePrice + Math.round(newTicketValueOne * ticketOnePrice) + Math.round(newTicketValueTwo * ticketTwoPrice);
calculation.value = tempAmt
} else {
basePrice = 0
ticketOnePrice = 10
ticketTwoPrice = 7
calculation.value = Math.round(ticketOne.value * ticketOnePrice) + Math.round(ticketTwo.value * ticketTwoPrice);
}
base.value = basePrice;
//calculation.value = Math.round(ticketOne.value * ticketOnePrice) + Math.round(ticketTwo.value * ticketTwoPrice);
totalAmount.value = Math.round(calculation.value);
changeDue.value = Math.round(moneyGiven.value - totalAmount.value);">
<fieldset>
<input type="hidden" name="teamID" value="<?php echo $_SESSION['teamID']; ?>" />
<h4>Amount of Adults</h4>
<input class="form-control" name="ticketOne" type="number" placeholder="0">
<br />
<h4>Amount of Students</h4>
<input class="form-control" name="ticketTwo" type="number" placeholder="0">
<br />
<h4>Money Owed</h4>
<input class="form-control" name="totalAmount" readonly="1">
<br />
<h4>Money Given</h4>
<input class="form-control" name="moneyGiven" type="number" required>
<h4>Change due</h4>
<input class="form-control" name="changeDue" readonly="1">
<input type="hidden" name="username" value="<?php echo $_SESSION['username']; ?>" />
<input type="hidden" class="form-control" name="bothTickets" readonly="1">
<input type="hidden" class="form-control" name="base" readonly="1">
<input type="hidden" class="form-control" name="calculation" readonly="1">
</fieldset>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Process"/>
</div>
</form>

One advice: don't let the server trust values given from the client, you need to re calculate the amount and change on the server as any user can just post any values to the server.
You can do the following:
var adultTickets = 0,studentTickets=0,monyGiven=0,moneyOwed=0,change=0;
const calculateValues = () => {
if(adultTickets+studentTickets>=10){//discount, more than 10 tickets
const adultLeft = adultTickets-10;//how many of the tickets are adult tickets
if(adultLeft>0){//more than 10 are adult tickets
moneyOwed = 70 + (adultLeft*10) + (studentTickets*7);
}else{//less than 10 are adult tickets
moneyOwed = 70 + ((studentTickets+adultLeft)*7);
}
}else{
moneyOwed = (adultTickets*10) + (studentTickets*7);
}
change = monyGiven-moneyOwed;
}
const setHtml = () => {
document.querySelector(`[name="totalAmount"]`).value=moneyOwed;
if(!(change<0)){
document.querySelector(`[name="changeDue"]`).value=change;
}
}
const changeAdultTicket = howMany => {
adultTickets = Math.floor(Number(howMany));
calculateValues();
setHtml();
}
const changeStudentTicket = howMany => {
studentTickets = Math.floor(Number(howMany));
calculateValues();
setHtml();
}
const changeMonyGiven = howMany => {
monyGiven = Math.floor(Number(howMany));
calculateValues();
setHtml();
}
document.getElementById("newshow").addEventListener(
"input",
(e)=>{
const inputName = e.target.getAttribute("name");
if(inputName==="ticketOne"){
changeAdultTicket(e.target.value);
}
if(inputName==="ticketTwo"){
changeStudentTicket(e.target.value);
}
if(inputName==="moneyGiven"){
changeMonyGiven(e.target.value);
}
}
)
<form id="newshow" action="required/post/saveTransaction.php" method="post">
<fieldset>
<input type="hidden" name="teamID" value="<?php echo $_SESSION['teamID']; ?>" />
<h4>Amount of Adults</h4>
<input class="form-control" name="ticketOne" type="number" placeholder="0" step="1">
<br />
<h4>Amount of Students</h4>
<input class="form-control" name="ticketTwo" type="number" placeholder="0" step="1">
<br />
<h4>Money Owed</h4>
<input class="form-control" name="totalAmount" readonly="1">
<br />
<h4>Money Given</h4>
<input class="form-control" name="moneyGiven" type="number" required>
<h4>Change due</h4>
<input class="form-control" name="changeDue" readonly="1">
<input type="hidden" name="username" value="<?php echo $_SESSION['username']; ?>" />
<input type="hidden" class="form-control" name="bothTickets" readonly="1">
<input type="hidden" class="form-control" name="base" readonly="1">
<input type="hidden" class="form-control" name="calculation" readonly="1">
</fieldset>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Process" />
</div>
</form>

input a button value on corresponding textbox that is on focus

I am trying to create a touchscreen calculator like where the button value will be placed on the textbox after i set it on a focus by clicking but it appears on all the textboxes.I tried to use the code
if ($(impo).is(":focus")) {
but it doesnt work. Please see my snippet
Thanks in advance!
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
document.getElementById('tess').onclick = function() {
document.getElementById('tess_text').focus();
}
document.getElementById('imp').onclick = function() {
document.getElementById('imp_text').focus();
}
function NumPressed(Num) {
if (impo) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.ReadOut.value == " ")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
if (tess) {
if (FlagNewNum) {
FKeyPad.readtess.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.readtess.value == " ")
FKeyPad.readtess.value = Num;
else
FKeyPad.readtess.value += Num;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=" "> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value=" ">
<br>
<input type="button" value=" 1" onclick="NumPressed(1)" />
<input type="button" value=" 2" onclick="NumPressed(2)" />
<input type="button" value=" 3" onclick="NumPressed(3)" /> <br>
</form>
</body>
</html>

if (impo) and if (tess) just tests whether the element exists, which they do, so the value gets written to both of them because they both exist. In a desktop environment, you can't do what you're asking - you can give a textbox the focus, but once the user clicks on one of the buttons in order to select that number, the textbox no longer has the focus (because the button has it).
You need a separate way to maintain which textbox is currently selected, something like the snippet below. It will update the currently "selected" element both on the click of the Imp/Tes buttons and whenever either of the textbox gains focus (e.g. by mouse click or touch).
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var current_input = impo;
impo.onfocus = function() {
current_input = impo;
}
tess.onfocus = function() {
current_input = tess;
}
document.getElementById('tess').onclick = function() {
current_input = tess;
tess.focus();
}
document.getElementById('imp').onclick = function() {
current_input = impo;
impo.focus();
}
function NumPressed(Num) {
current_input.value += Num;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=""> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value="">
<br>
<br>
<input type="button" value="1" onclick="NumPressed(this.value)" />
<input type="button" value="2" onclick="NumPressed(this.value)" />
<input type="button" value="3" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="4" onclick="NumPressed(this.value)" />
<input type="button" value="5" onclick="NumPressed(this.value)" />
<input type="button" value="6" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="7" onclick="NumPressed(this.value)" />
<input type="button" value="8" onclick="NumPressed(this.value)" />
<input type="button" value="9" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="0" onclick="NumPressed(this.value)" /> <br>
</form>
</body>
</html>

Duplicate input's value when clicked to button

I have a two similar forms with input "Quantity" and buttons "-", "+".
I need to duplicate input's value to second form and back.
For example: When I'm click to "+" in first form it will be incremented.
I need to in the second form was the same value.
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" />
<input class="addition" name="add" type="button" value="+">
</div>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/>
<input class="addition" name="add" type="button" value="+">
</div>
JS:
$(function(){
$('.quantity').on('click', '.addition, .subtraction', function() {
var quantityPanel = $('.panel-quantity');
var quantity = $(this).closest('.quantity').find('input.qty');
var currentValue = parseInt(quantity.val());
var maxValue = parseInt(quantity.attr('max'));
var minValue = parseInt(quantity.attr('min'));
if($(this).is('.addition')) {
if(maxValue && (currentValue >= maxValue)){
quantity.val(maxValue);
} else {
quantity.val((currentValue + 1));
}
} else {
if (minValue && (currentValue <= minValue)) {
quantity.val(minValue);
} else if(currentValue > 0) {
quantity.val((currentValue - 1));
}
}
quantity.trigger('change');
});
});
I think that I can just set the same name for the INPUT, so that they work the same way.
Thanks
It's my example in jsfiddle

add $('input.qty').not(quantity).val(quantity.val()); before triggering change in the input box. and also you have add $('input.qty').not(this).val($(this).val()); in onchange listener of input.qty
$(function(){
$('.quantity').on('click', '.addition, .subtraction', function() {
var quantityPanel = $('.panel-quantity');
var quantity = $(this).closest('.quantity').find('input.qty');
var currentValue = parseInt(quantity.val());
var maxValue = parseInt(quantity.attr('max'));
var minValue = parseInt(quantity.attr('min'));
if($(this).is('.addition')) {
if(maxValue && (currentValue >= maxValue)){
quantity.val(maxValue);
} else {
quantity.val((currentValue + 1));
}
} else {
if (minValue && (currentValue <= minValue)) {
quantity.val(minValue);
} else if(currentValue > 0) {
quantity.val((currentValue - 1));
}
}
$('input.qty').not(quantity).val(quantity.val());
quantity.trigger('change');
});
$('input.qty').on('change', function() {
$('input.qty').not(this).val($(this).val());
});
$('input.qty').on('keyup', function() {
$('input.qty').not(this).val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" />
<input class="addition" name="add" type="button" value="+">
</div>
<div class="quantity">
<input class="subtraction" name="sub" type="button" value="-">
<input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/>
<input class="addition" name="add" type="button" value="+">
</div>