I don't know if this question has been asked here on SO, i just don't know the right word.
I have this input tag:
<input type = "text" class="inputbox holdout-7"></input>
How do I get the holdout's value of 7 from the class using javascript?
This is because I wanted to add custom attributes but when the page is rendered, my custom attribute is not displayed. Some advised me to put them in a class instead.
For example:
<input type = "text" class = "inputbox" holdout="7"></input>
when the page is rendered, the holdout is not included, therefore I cannot get the value.
var inputBox = document.querySelector(".inputbox"),
classname = inputBox.className,
regEx = /holdout-(\d+)/,
holdoutValue = classname.match(regEx)[1];
It will return you 7
To set that as attribute in your input box:
inputBox.setAttribute("data-holdout",holdoutValue);
it's recommended to use data-holdout instead of holdout.
Related
Hello I am trying to understand how setting values via the chrome console work and I had success until i tried it on this site : https://www.zalando.de/login/?view=register
It wont let me fill the fields via the chrome console anyone knows why ?
var firstname = "Teodor"
document.getElementById("rjqNeP Upa9lO").value = firstname
You are refering to the wrong element.
Try selecting the input element directly, not the wrapping div:
document.getElementById("text-xt7my").value = firstname
At the same time, you were using an ID selector trying to get a class:
<div class="rjqNeP Upa9lO">
<input id="text-xt7my" type="text" name="register.firstname" placeholder="Vorname" >
<div>
In case the id is generated dynamically, refer to the class, and traverse down the DOM to find the correct input field:
document.getElementsByClassName("rjqNeP Upa9lO")[0].childNodes[0].value = firstname
Simply select textbox by its ID = "text-1u2un"
document.getElementById("text-1u2un").value = firstname;
I want to create input field like given below using java script.Please provide me appropriate solution.
<input type="text" name="package_location[]" class="form-control" >
Element is created but When I am posting form I am getting none of the values. I have used this code.
var parinput=document.createElement('input');
parinput.type="text";
parinput.name="package_location[]";
you can create input element but you have to append into body using jquery
var parinput=document.createElement('input');
$(parinput).attr("type","text");
$(parinput).attr("name","package_location[]");
$('body').append(parinput)
My java script code is right Only the error is that I have created input field name like package_location[] .And getting it as Package_location the difference of capital P and small p that is the gotcha.
The problem with your code is that you forgot to append the element to the DOM. Using pure JavaScript, simply use the element you made and append it to the body:
var parinput = document.createElement('input'); //Create element
parinput.type = "text"; //Add attribute "text"
parinput.name = "package_location[]"; //Add attribute "name"
document.getElementsByTagName("body")[0].appendChild(parinput) //Append to the first body element found
This solution works without JQuery.
How to find the value of text field using onblur() in next input field.
I tried:
function get_value() {
var inv_nrs;
inv_nrs = document.getElementsByTagName('text1').value;
alert(inv_nrs);
}
text1 is name of input which I am trying to get value.
text2 is name of input where onblur() is triggered.
Two problems:
To get elements by their name attribute, use document.getElementsByName(), not document.getElementsByTagName.
Since these functions return a collection, not a single element, you have to index them to get a specific element.
So the function should be:
function get_value() {
var inv_nrs;
inv_nrs = document.getElementsByName('text1')[0].value;
alert(inv_nrs);
}
Here's a simple snippet which illustrates a way to do this.
(You may wish to use alert in place of console.log)
document.getElementById("text2").onblur = function() {
console.log(document.getElementById("text1").value)
}
<input type="text" id="text1" value="123" />
<input type="text" id="text2" />
Are you looking for an element with id = "text1" or real name = "text1"?
At least if it's their id try getElementById("text1"), that returns one single element. If you talking about the name-attribute, take getElementByName("text1"), this may return more than one element (if there are more then one with the same name).
i think you want this???
function get_value()
{
var inv_nrs;
inv_nrs = document.getElementById('txt1').value;
document.getElementById('txt2').value=inv_nrs;
}
<input type="text" id="txt1" >
<input type="text" id="txt2" onblur="get_value()">
If you search with tagname then you need to insert a tagname:
document.getElementsByTagName('input')[whole_number].value which also
returns a live HTMLCollection
Eg. document.getElementsByTagName("input")[0].value; ,if this is the first textbox in your page.
You can get the value of an html element also on different ways:
document.getElementsByName('text1')[whole_number].value which also
returns a live NodeList
Eg. document.getElementsByName("searchTsxt")[0].value; if this is the
first textbox with name 'searchtext' in your page.
You can also get element by Id:
document.getElementById('IDHere').value to get the value of desired
box
You can also get it by way of Classname:
Use document.getElementsByClassName('class_name')[whole_number].value
which returns a Live HTMLCollection
Good luck
I have a written HTML form with some text fields on which I need to work with Javascript. I want to select them using the method getElementsByClassName because I don't know their exact number (so I can't assign ids one by one).
<form ...>
<input type = "text" name = "test1" class = "myClass">
<input type = "text" name = "test2" class = "myClass">
</form>
<script type = "text/javascript">
var fields = document.getElementsByClassName("myClass");
</script>
Using console.log(fields[0]) writes undefined, so I am not able to iterate into the node by using a for loop (it seems like there is no element into the variable "fields", even though console.log-ging it it shows an array-like structure (as it should be).
I already tried using the "form" object but the situation is the same.
Change to:
var fields = document.getElementsByClassName("myClass");
So the classname matches up with the html elements you used.
I have some input fields that has its id's number changes dynamically.
For example, the below code shows an input field that has "id="field14". The word (field) in the id does not change, but the (number) is changing dynamically. So it may be field14, field13, or field20, etc, and there is no limit for numbers.
<input type="text" name="field[14]" id="field14" value="" size="30" style="height: 24px;">
I'm using the following code to style the input field:
document.getElementById("field14").style.height = "24px";
Note, the application's PHP code is encoded & I'm editing in smarty template.
The input code in the template is like this: {$field.input} So when I inspect element on the live page it shows the above code of the input with the dynamic number of the id.
I want a way that allow me to style any input field of the page that starts with the word (field) and ends with a dynamic (number). Any suggestions please?
For a pure CSS approach, I would check the name instead, so you should only look for input elements whose attribute starts with field[ and ends with a closing bracket ].
e.g.
input[name^="field["][name$="]"] {
...
}
From the code you posted you can reasonably suppose that the name of all the elements containing a numeric index inside brackets [] are also the same elements with that dynamic index as a part of your id.
otherwise you may write a more complex set of selectors looking for an id starting with field and ending with a digit [0..9]
e.g.
input[id^="field"][id$="0"],
input[id^="field"][id$="1"],
input[id^="field"][id$="2"],
input[id^="field"][id$="3"],
input[id^="field"][id$="4"],
input[id^="field"][id$="5"],
input[id^="field"][id$="6"],
input[id^="field"][id$="7"],
input[id^="field"][id$="8"],
input[id^="field"][id$="9"] {
...
}
or even combine both the methods
input[name^="field["][name$="]"][id$="0"],
input[name^="field["][name$="]"][id$="1"],
...
input[name^="field["][name$="]"][id$="9"] {
...
}
You can use an attribute selector:
input[id^=field] {
/* Styles */
}
It will match all input elements whose id attribute begins with "field". Using some separator between "field" and the number may be better to prevent matching things like "fieldone".
input[id^=field] {
background: red;
}
<input id="field1" />
<input id="field2" />
<input id="field3" />
<input id="field15" />
<input id="field99" />
i strongly recommand using a class attribute:
HTML
<input type="text" class="fields" name="field[14]" id="field14" value="" size="30" style="height: 24px;">
CSS
.fields {
/*style*/
}
I want a way that allow me to style any input field of the page that
starts with the word (field) and ends with a dynamic (number). Any
suggestions please?
This is a very specific question that wants us to key on the fact that the id starts with "field" and ends in a dynamic number. IMHO this solution answers your question exactly as asked using only CSS, plus it doesn't require you to change your HTML or add a class attribute (although this would be much better).
This CSS code will find any <input> tag that has an id starting with "field" and ending in a number. It will also exclude those that start with "field" but do not end in a number.
input[id^='field'][id$='0'],input[id^='field'][id$='1'],input[id^='field'][id$='2'],input[id^='field'][id$='3'],input[id^='field'][id$='4'],input[id^='field'][id$='5'],input[id^='field'][id$='6'],input[id^='field'][id$='7'],input[id^='field'][id$='8'],input[id^='field'][id$='9']
{
// styling code
}
Demo code: http://jsfiddle.net/Drakes/7wpnL/671/
If you need JS approach:
http://codepen.io/knitevision1/pen/LEaXxW
var num = 2;
document.getElementById("input" + num).style.backgroundColor = "blue";
If I get you right, you need all your new input look somewhat unique or something.
You can think of getting a number of the currently presenting inputs, then get the last of them, then attach your style based on what you want it to look like.
Using jquery:
var inputs = [];
function getFields(){
$('input').each(function() {
if($(this).attr('id').substring(0,5)=='field'){
inputs.push($(this));
}
});
}
you can modify each input inside the "each" loop, or you can use the "inputs" variable.
Demo: http://jsbin.com/kubaku/1/edit?html,js,output
JS
var inputs = document.getElementsByTagName('input');
var ID = 'field';
var i;
for(i = 0; i < inputs.length; i++) {
var input = inputs[i];
var regex = new RegExp("^" + ID);
if(regex.test(input.id)) {
input.style.border = '1px solid #c00';
}
}