function addition(){
var count = 2;
for(var i = 0 ; i <=count ; i++ ){
var val = document.getElementById('num');
alert(val.value);
}
}
<input type="text" id="num" name="name[]">
<input type="text" id="num" name="name[]">
<input type="submit" id="num" onclick="addition">
I Want to get values of input with the help of single id or name please help me how to get it..
There can only be one id in a page. Use class, element or attribute selectors instead.
Using a class for the inputs (the button doesn't need a class/id in this case), you can get all elements using Document.getElementsByClassName(), and than you can iterate the collection:
function addition(){
var val = document.getElementsByClassName('num');
for(var i = 0 ; i < val.length ; i++ ){
console.log(val[i].value);
}
}
<input type="text" class="num" name="name[]">
<input type="text" class="num" name="name[]">
<input type="submit" onclick="addition()">
There are a couple of problems,
onclick of submit button is not invoking addition.
i.e. add () after addition
<input type="submit" id="num" onclick="addition()">
Loop's condition is invalid, it will ensure that there is never an iteration for(var i = 0 ; i <=count ; i++ ){ since your count is 0.
Increase the count to 2
var count = 2;
document.getElementById will only return one element since Ids are supposed to be unique.
Use data-id (or class or any other data- attribute) instead and use querySelectorAll to query those elements
Demo
function addition() {
var allInputs = document.querySelectorAll("input[data-id='num']");
for (var i = 0; i < allInputs.length; i++) {
var val = allInputs[i];
console.log(val.value);
}
}
<input type="text" data-id="num" name="name[]" value="1">
<input type="text" data-id="num" name="name[]" value="2">
<input type="submit" id="num" onclick="addition()">
if this is your code, then id cannot be duplicated.
you can have multiple fields by same class name but Id should be different.
For javascript one id for one element is a good practice. If you want to get all value then you can use class attribute. So you also can use document.querySelectorAll like this -
<input type="text" class="num" name="name[]">
<input type="text" class="num" name="name[]">
<input type="submit" onclick="addition()">
function addition(){
var val = document.querySelectorAll('.num');
for(var i = 0 ; i < val.length ; i++ ){
console.log(val[i].value);
}
}
Related
I thought this would work:
<input type="text" id="ThisIsDynamicAsItsInARepeater" OnLoad="this.style.backgroundColor=this.innerHTML"
But that gets me:
Identifier expected
I know that the value of the textbox is a valid HTML color value.
onload attribute won't work on inputs. you need to done it inside the javascript tag.
this should do the job :)
some inputs
<input type="text" id="ThisIsDynamicAsItsInARepeater" value="green" />
<input type="text" id="ThisIsDynamicAsItsInARepeater" value="black" />
<input type="text" id="ThisIsDynamicAsItsInARepeater" value="blue" />
JS
//wait for the page to load
window.onload = function(){
//target all inputs first
var input = document.getElementsByTagName('input');
for(var i = 0; i< input.length; i++){
//filter out inputs which have id attribute
if(input[i].hasAttribute("id")){
//now check if they have ThisIsDynamicAsItsInARepeater
if( input[i].getAttribute("id").indexOf('ThisIsDynamicAsItsInARepeater') >= 0){
//finally change color
input[i].style.backgroundColor = input[i].value;
}
}
}
}
</script>
If I have few on my form. How can I access to input what I need?
<label> First </label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>
<label> Second </label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>
................................
How can I do this? Maybe I need to use loop?
Not sure exactly which input you are trying to access.
You can use document.querySelectorAll("input[type=number]").
It will return an array with all inputs of type "number". Iterate through them to get what you need
You can use for loop to loop all inputs and addEventListener to run function on input change. Then just calculate value for each input and add to span as textContent.
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', function() {
var val = this.value * Number(this.nextElementSibling.textContent);
this.nextElementSibling.nextElementSibling.textContent = val;
})
}
<label>First</label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>
<label>Second</label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>
If you want to add values to spans even before input change you can add this part of code to previous one.
var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
var val = inputs[i].value * Number(inputs[i].nextElementSibling.textContent);
inputs[i].nextElementSibling.nextElementSibling.textContent = val;
inputs[i].addEventListener('change', function() {
var val = this.value * Number(this.nextElementSibling.textContent);
this.nextElementSibling.nextElementSibling.textContent = val;
})
}
<label>First</label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>
<label>Second</label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>
You can add an id to the controls and then access it using jquery by the id.
<label> First </label>
<input type="number" value="1" min="1" id="input1">
<label id="label1">22</label>
<span id="span1">There I need value in input * val in label</span>
<label> Second </label>
<input type="number" value="1" min="1" id="input2">
<label id="label2">12</label>
<span id="span2">There I need value in input * val in label</span>
Then on your dcoument.ready just calculate it like this:
$( document ).ready(function() {
var result1=$(#input1).val()*$(#label1).val();
$('#span1').val(result1);
var result2=$(#input2).val()*$(#label2).val();
$('#span1').val(result2);
});
After you gave an id to the controls you can do it even nicer, looping through all the inputs an dynamically multiply them:
var i=0;
$("#myForm input[type=text]").each(function() {
i=i+1;
$('#span'+i).val($('#input'+i)*('#label'+i));
});
After a form submit in MVC C#, I would like a way in JavaScript (not jQuery) to reset the values of all textboxes on the page with class="orderQuantity" to the value of "0". I'm thinking something like:
var tObj = getElementsByClassName('orderQuantity');
for(var i = 0; i < tObj.length; i++){
tObj[i].value='0';}
The code above isn't working, hoping you guys can help
You need to use document.getElementsByClassName. Thus, try the following:
function change(){
var tObj = document.getElementsByClassName('orderQuantity');
for(var i = 0; i < tObj.length; i++){
tObj[i].value='0';
}
}
<input class="orderQuantity" value="foo">
<input class="orderQuantity" value="bar">
<input class="orderQuantity" value="javascript">
<input class="orderQuantity" value="foobar">
<input class="orderQuantity" value="stackoverflow"><br>
<button onclick="change()">Change</button>
You could achieve this by the following method as well.
HTML Code
<input class="orderQuantity" value="foo">
<input class="orderQuantity" value="bar">
<input class="orderQuantity" value="javascript">
<input class="orderQuantity" value="foobar">
<input class="orderQuantity" value="stackoverflow"><br>
<button onclick="change()">Change</button>
Javascript Code
function change()
{
$(".ItemRate").val(0);
}
use jquery in order to get the class
var tObj = $('.orderQuantity');
for(var i = 0; i < tObj.length; i++){
tObj[i].value='0';}
http://fiddle.jshell.net/v4q7pkLn/
I'm using:
document.querySelectorAll('input[value=""]')
But it's not selecting inputs that doesn't have the attribute value.
How can I select all inputs that doesn't have a value '', and that doesn't have the attribute value?
I would like to do that without jQuery and without any additional function, would that be possible only using querySelectorAll?
Try
document.querySelectorAll('input:not([value])')
This should return all the input that don't have the value attribute.
You can use this:
document.querySelectorAll('input:not([value]):not([value=""])');
get all inputs that doesn't have attribute "value" and the attribute
"value" is not blank
var test = document.querySelectorAll('input:not([value]):not([value=""])');
for (var i = 0; i < test.length; ++i) {
test[i].style.borderColor = "red";
}
<input type="text" />
<input type="text" value="2" />
<input type="text" />
<input type="text" value="" />
<input type="text" />
I'd like to know how to dynamically generate an ID on every input tag based off of it's name. I have to do this using javascript only - Not jQuery.
So, for example, if I have the following text inputs:
<input type="text" name="input1" value="">
<input type="text" name="input2" value="">
<input type="text" name="input3" value="">
I'd like to end up with this:
<input id="input1" type="text" name="input1" value="">
<input id="input2" type="text" name="input2" value="">
<input id="input3" type="text" name="input3" value="">
Any help would be appreciated,
Thanks!
In plain JS, you can get the elements basis of tag name.
And then set the id attribute for that element
function setinputIds() {
var inputs = document.getElementsByTagName('input');
for(var i=0;i < inputs.length; i++) {
var id = inputs[i].getAttribute('name');
inputs[i].setAttribute("id", id);
}
}
var inputs = document.getElementsByTagName('input');
for (var ii=0, item; item = inputs[ii]; ii++) {
item.id = item.name;
}
Probably you can use a for loop to iterate name and insert id like this:
for(i=1;i<4;i++){
document.getElementsByName('input'+i).id='input'+i;
}