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;
}
Related
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);
}
}
<form name="myform">
<fieldset>
<legend>Delivery Information</legend>
<p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size="25" placeholder="input country..."></p>
<p>Street: <input pattern="^[A-Za-z0-9]" type="text" name="street" size="30" placeholder="input street..."></p>
<p>City: <input pattern="^[A-Za-z ]" type="text" name="textInput" size="20" placeholder="input city..."></p>
<p>Zip: <input pattern="(\d{5}([\-]\d{4})?)" type="text" name="zip" size="5" placeholder="#####"></p>
</fieldset>
</form>
So, I have a form and I want to get all input elements by name "textInput"(I have other inputs so it ha) using Javascrip DOM, and add an attribute "oninvalid="please, only use letters".
Only Javascript, so no JQuery.
You can use this function:
function changeAttributes() {
var x = document.getElementsByName("textInput");
for(var i = 0; i < x.length, i++) {
x[i].setAttribute("oninvalid", "please, only use letters");
}
}
Try below:
$('input[name=textInput]').attr("oninvalid", "please, only use letters");
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" />
Hi i am using this code snippet to pass the actual value to array. but i want to take the value passed from textbox to array how to do this?
html code:
<input type="text" name="cost" value=" ">
<input type="text" name="cost" value=" ">
<input type="text" name="cost" value=" ">
javascript code:
multipliers = [5, 6, 5];
instead of 5,6,5 i should get values from textfield how to do this?
Fiddle
An input array would be appropriate:
<form name="myForm">
<input type="text" name="cost[]" value="1">
<input type="text" name="cost[]" value="2">
<input type="text" name="cost[]" value="3">
</form>
Javascript:
var list = document.myForm.elements['cost[]'];
var multipliers = [];
for(var i=0; i<list.length; i++)
{
multipliers.push(list[i].value);
}
console.log(multipliers);
You can use document.querySelectorAll since you don't seem to be having ids for your elements.
var nodes = document.querySelectorAll('[name=cost]'), // get all elements with name = cost
values = [],
i = 0;
for(i=0; i<nodes.length; i++)
values.push(parseInt(nodes[i].value, 10));
console.log(values);
Demo
<form name="myForm">
<input type="text" name="cost[]" value="1">
<input type="text" name="cost[]" value="2">
<input type="text" name="cost[]" value="3">
</form>
var allElements= document.myForm.elements['cost[]'];
var arr= [];
for(var i=0; i<allElements.length; i++)
arr.push(allElements[i].value);
Hi I'm having trouble sending html form array to JS. I have dynamic html form and some fields:
<div id="fields">
<input type="text" name="ppav[]" id="p" />
<input type="text" name="quantity[]" id="q" size="3" />
<input type="text" name="price[]" id="pr" size="10" />
<input type="text" name="sum" id="su" size="10" disabled="disabled"/>
<br />
</div>
in JS i tried using this function but getting undefined alert instead of result:
var welements = document.getElementsByName('ppav[]');
for (var i = 0, j = welements.length; i < j; i++) {
var an_element = welements[i];
alert(an_element.selectedIndex);
}
What did you expect? the selectedIndex property returns the index of the selected option in a select element. If you want the value of your input fields, try alert(an_element.value);