Getting values inside jquery from input fields with dynamic id

Getting values inside jquery from input fields with dynamic id - javascript

I want to get value of input fields with dynamic id to jquery function
<input type="text" id="a_8" name="a_8" value="12">
<input type="text" id="b_8" name="b_8" value="22">
<button type="button" class="btn btn-success" onclick="javascript:det(8);">Submit</button>
<input type="text" id="a_9" name="a_9" value="22">
<input type="text" id="b_9" name="b_9" value="52">
<button type="button" class="btn btn-success" onclick="javascript:det(9);">Submit</button>
Jquery function
function det(a)
{
//how can I get values of id a_8,b_8 when first button is clicked
and a_9,b_9 values when second button is clicked
}

you can simply create id of your control by appending method argument a to a_ or b_ like $("#a_"+a).val()
function det(a)
{
alert($("#a_"+ a ).val());
alert($("#b_"+ a ).val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="a_8" name="a_8" value="12">
<input type="text" id="b_8" name="b_8" value="22">
<button type="button" class="btn btn-success" onclick="javascript:det(8);">Submit</button>
<input type="text" id="a_9" name="a_9" value="22">
<input type="text" id="b_9" name="b_9" value="52">
<button type="button" class="btn btn-success" onclick="javascript:det(9);">Submit</button>

function det(a){
var b1 = $('#a_'+a).val();
var b2 = $('#b_'+a).val();
console.log('values: '+b1+','+b2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="a_8" name="a_8" value="12">
<input type="text" id="b_8" name="b_8" value="22">
<button type="button" class="btn btn-success" onclick="javascript:det(8);">Submit</button>
<input type="text" id="a_9" name="a_9" value="22">
<input type="text" id="b_9" name="b_9" value="52">
<button type="button" class="btn btn-success" onclick="javascript:det(9);">Submit</button>

Related

Shows " Uncaught ReferenceError : form is not defined " in the console

I am a complete beginer, and I am learning frontend web development currently. And as a first project I was creating a simple calculator. I followed steps from a youtuber as I was learning from him. But the problem occuring is that whenever I am clicking buttons it is not displaying the number in the display bar and showing me error "Uncaught ReferenceError : form is not defined". I currently don't have any knowledeg regarding this pls help me out. I am just curious that what is my mistake.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form class="form">
<div class="display">
<input name="displayResult" type="text" placeholder="0" />
</div>
<div class="buttons">
<div class="row">
<input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
<input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
<input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
<input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
<input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
<input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
<input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
<input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
<input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
<input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
<input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
<input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
<input class="equal" type="button" value="=" onclick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
<script>
function func(result) {
form.displayResult.value = form.displayResult.value + result;
}
</script>
</body>
in the console that error is being showed for this specific line,
form.displayResult.value = form.displayResult.value + result;

The problem is you have not defined your form variable. In javascript all undeclared variables have a value of undefined.
To fix this, inside your func, just add var form = document.getElementByClassName('form')[0].
Reference : https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

form means nothing to javascript. Therefore, it is not defined. You need to fetch the form in the DOM first:
const form = document.querySelector("form.form");
// would be safer if you gave the form an id but doesn't matter in this case
// then you can change the value
form.displayValue.value += result;
a quick look at document.querySelector

Add let form = document.getElementById('form') in func():
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form class="form" id="form" )>
<div class="display">
<input name="displayResult" type="text" placeholder="0" />
</div>
<div class="buttons">
<div class="row">
<input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
<input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
<input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
<input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
<input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
<input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
<input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
<input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
<input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
<input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
<input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
<input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
<input class="equal" type="button" value="=" onclick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
<script>
function func(result) {
let form = document.getElementById('form')
form.displayResult.value = form.displayResult.value + result;
}
</script>
</body>

form isn't defined here. What you need to do is get the input field as an object and change it's text.
function func(result) {
let input = document.getElementById("input-field");
input.value += result;
}
Before this, add an id to your input tag: " "input-field".

It doesn't work because your <form> doesn't have an id or name attribute.
If you want to access your elements without querying the DOM like the given code, you should give your element an id or name attribute, then it becomes a property of window (a global variable) and you can directly access it from JavaScript.
function func(result) {
console.log(form);
form.displayResult.value = Number(form.displayResult.value) + Number(result);
}
<div class="container">
<form id="form" class="form">
<div class="display">
<input name="displayResult" type="text" placeholder="0" value="0" />
</div>
<div class="buttons">
<div class="row">
<input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
<input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
<input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
<input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
<input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
<input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
<input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
<input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
<input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
<input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
<input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
<input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
<input class="equal" type="button" value="=" onclick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
P.S:
I'm not saying this is a good practice, just sharing how it works.
Also value attribute returns a string, you should convert them to
number in order to perform mathematical operations.
Your result input doesn't have a default value (placeholder="0" isn't the same as value="0"), you should set it as 0 or handle the empty string value in JavaScript

Event listener doesnt work on some HTML elements

I have 2 groups of HTML buttons, all with the class btn.
const btn = document.querySelectorAll('.btn');
const btnArray = Array.from(btn);
btnArray.forEach((item) => {
item.addEventListener('click', () => {
console.log('clicked');
console.log(item.value)
});
});
<div class="calculator">
<div class="display">
<p class="output">YES</p>
</div>
<div class="operations">
<input type="submit" class="btn add" value='+'>
<input type="submit" class="btn subtract" value='-'>
<input type="submit" class="btn multiply" value='x'>
<input type="submit" class="btn divide" value=÷>
<input type="submit" class="btn clear" value='CLEAR'>
</div>
<div class="calcBody">
<input type="submit" class="btn seven" value='7'>
<input type="submit" class="btn eight" value='8'>
<input type="submit" class="btn nine" value='9'>
<input type="submit" class="btn four" value='4'>
<input type="submit" class="btn five" value='5'>
<input type="submit" class="btn six" value='6'>
<input type="submit" class="btn one" value='1'>
<input type="submit" class="btn two" value='2'>
<input type="submit" class="btn three" value='3'>
<input type="submit" class="btn zero" value='0'>
<input type="submit" class="btn period" value='.'>
<input type="submit" class="btn off" value='ON/OFF'>
</div>
</div>
This works only on the buttons in the calcBody div and not the ones in the operations div. Yet, when I console.log(btnArray) it shows all of the buttons (which is weird).
Can someone tell me why? Thanks.

works perfectly! I checked it on Google Chrome.

reset two forms by one click JavaScript

I have two forms .. each form has a reser button with the id called "formReset"
no all the form are showing in the same time, one shows after the other one
I used the below code but it only works on the first form, I can o it by doing two click buttons with different id's but is there a way to do it with one click only?
document.getElementById("formReset").addEventListener("click",resetForm);
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" id="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" id="formReset" value="reset" >
</form>

try this
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.parentElement.reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>

Attribute id should be unique in a document, use class instead with querySelectorAll() and forEach() like the following way:
document.querySelectorAll(".formReset").forEach(function(reset){
reset.addEventListener("click",resetForm);
});
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>

easy way using closest.
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.closest('form').reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>

You should add click listeners for each reset button, then reset parent by click
.html
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit">
<input type="button" class="formReset" value="reset"><br>
</form>
<form id="cal">
<input type="number" id="answer"><br><br>
<input type="button" id="submit2" value="submit2">
<input type="button" class="formReset" value="reset">
</form>
.js
document.querySelectorAll(".formReset").forEach((e) => {
e.addEventListener("click", () => {
document.querySelectorAll("form").forEach((f) => {
f.reset();
})
});
});

I want the value of my button to appear in a textbox upon clicking the button

I am creating an onscreen keyboard, and want a function which will allow when any of the buttons are pressed, for their values to appear in a text box to the side of the keyboard. The code I have so far is:-
<script type="text/javascript">
function onclick(){
document.getElementById("output").value
=document.getElementById("Q").value;
}
</script>
And the HTML code below:-
<div class ="Row">
<div class="Box2">
<form id="keyboard" name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>
</div>

You have it tagged as jQuery, so here is a more elegant jQuery solution: Throw that code away and use a single delegated jQuery event handler. Start with something like this:
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/kaau601u/
Obviously you need to handle the SPACE and ENTER as special cases, but you gave no clues what you are doing next, so leaving that to the reader to finish :)
Notes:
You either need to place this code after the elements it references or put it in a DOM ready handler.
Like this:
$(function(){
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
});
Or you can use a document attached handler, which is always present:
Like this:
$(document).on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});

//Please try this working example
$('#Q').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>

I have made a slight change in the output field type with working SPACE and ENTER
jQuery('form[name="keyboard"] input[type="button"]').click(function(){
var inpVal = jQuery(this).val();
if( inpVal == "SPACE" ){
inpVal = ' ';
}else if( inpVal == "ENTER" ){
inpVal = '\n';
}
var val = jQuery('#output').val() + inpVal;
jQuery('#output').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE" >
<input type="button" value="ENTER">
</div>
</form>
<textarea id="output" cols="40" rows="5"></textarea>
</div>
</div>
</div>

This might help
//this this the script that makes it happen...
$('form[name=keyboard]>div>input[type=button]').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name="keyboard">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input title="keyboard" type='text' id='output' />
</div>
</div>

Using just javaScript and no need for jQuery.
This example including the use of the SPACE and ENTER keys. As a bonus I added a BACKSPACE key.
Note your output text field was changed to text area to allow for the use of the enter key.
Create a single event listener for the form. This can be done using document query selector.
Capture the click event with the query selector.
Note on the <body> tag we add the onload event handler so when the document is served up the event listener is assigned to the <form> node.
Any click inside the <form> will be tested
HTML and javaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<script type="text/javascript">
var g = {};
function assignListener()
{
/*event listener for keyboard*/
g.keyboard = document.querySelector("#keyboard");
g.keyboard.addEventListener("click", addToTextBox,false);
}
function addToTextBox(e)
{
/*
with query selector the event (e) is passed along
to the function. You can examine the event and get
all kinds of useful stuff from it, like type of event, where it came from, attributes like id, class list etc.
*/
if (e.target.type == 'button')
{
switch (e.target.value)
{
case "ENTER":
document.getElementById('output').value += '\n';
break;
case "SPACE":
document.getElementById('output').value += ' ';
break;
case "BACKSPACE":
document.getElementById('output').value = document.getElementById('output').value.substr(0,document.getElementById('output').value.length-1);
break;
default:
document.getElementById('output').value += e.target.value;
}
}
}
</script>
</head>
<body onload="assignListener();">
<div class ="Row">
<div class="Box2">
<form id=keyboard>
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
<input type="button" value="BACKSPACE">
</div>
</form>
<!-- <input type='text' id='output' /> -->
<textarea id="output" rows="5" cols="75"></textarea>
</div>
</div>
</body>
</html>

add new textbox and buttons with javascript

I have 3 textboxs and 6 buttons. I want to add new textbox and buttons after textbox(element2) and buttons(element2) with javascript. How can I do it. :)
<input type="text" id="element1">
<input type="button" id="element1">
<input type="button" id="element1">
<input type="text" id="element2">
<input type="button" id="element2">
<input type="button" id="element2">
<input type="text" id="element3">
<input type="button" id="element3">
<input type="button" id="element3">

Since Ids should be unique, I'll modify your HTML code :
<div id="div">
<input type="text" id="text1">
<input type="button" id="button1a">
<input type="button" id="button1b">
<input type="text" id="text2">
<input type="button" id="button2a">
<input type="button" id="button2b">
<input type="text" id="text2">
<input type="button" id="button2a">
<input type="button" id="button2b">
</div>
And the script would look like this :
<script>
var text2_new = document.createElement("input");
var div= document.getElementById("div");
var button2b= document.getElementById("button2b");
div.insertBefore(text2_new,button2b);
</script>
Repeat the the script for every new element you need to add.
In your context I'd place the group of inputs inside of <div> tags to delimit the groups.

Develop Reference

JavaScript is the programming language of the Web.

Getting values inside jquery from input fields with dynamic id - javascript

Related

Shows " Uncaught ReferenceError : form is not defined " in the console

Event listener doesnt work on some HTML elements

reset two forms by one click JavaScript

I want the value of my button to appear in a textbox upon clicking the button

add new textbox and buttons with javascript

Categories

Resources