I'm looking to craft a JQuery script to fill all textboxes on a page with a single string of text.
The textboxes on this page have no name or ID, so I need to fill them in by class.
<td>
<input class="form-control input-sm" placeholder="Optional Comment" value="" style="">
</td>
Thank you everyone.
Are you familiar with vanilla JS DOM manipulation?
var allTextboxes = document.querySelectorAll(".CLASS_SELECTOR");
for(var i = 0, len = allTextboxes.length; i < len; i++){
allTextboxes[i].value = "YOUR_VALUE";
}
Related
I have several inputs element. When the page load, I disabled the input. Then when the user click edit, remove the disabled attribute so the user can edit it. But when the edit button is pressed and the disabled is removed, the input style still using disabled input style.
How can I fix this?
js:
document.querySelector('#enable-update').addEventListener('click', function () {
var i;
var inputs = document.querySelectorAll('#manage-data input');
for (i=0; i < inputs.length ; i++){
inputs[i].disabled = false;
}
inputs[0].focus();
var textareas = document.querySelectorAll('#manage-data textarea');
for (i=0; i < textareas.length ; i++){
textareas[i].disabled = false;
}
this.style.display = 'none';
});
html:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input disabled class="mdl-textfield__input" type="text" id="name" name="name" value="user">
<label class="mdl-textfield__label" for="name">Nama</label>
</div>
PS : I'm using Material Lite Design
**Update**
jsfiddle
(*I edit some syntax on the js file)
what I want to achieve is make this
to this (notice the "name" text is blue)
when i check the inspect element, it show this (notice the "fieldset[disabled]" but the input don't have disabled attribute)
Here is a fiddle with the fixed version of your code:
https://jsfiddle.net/5kpqsc9t/4/
Your first problem is that you were selecting inputs inside #manage-data, but didn't add that ID to the wrapping div.
Your second problem was the inputs[0].focus(); outside the for loop.
There is no need for var i; when you declare it inside the for loop.
document.querySelector('#enable-update').addEventListener('click', function () {
var inputs = document.querySelectorAll('#manage-data input');
for (var i = 0; i < inputs.length ; i++){
inputs[i].disabled = false;
inputs[i].focus();
}
this.style.display = 'none';
});
And the HTML:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" id="manage-data">
<input disabled class="mdl-textfield__input" type="text" id="name" name="name" value="user">
<label class="mdl-textfield__label" for="name">Nama</label>
</div>
<button id="enable-update">
Enable
</button>
Answer to edit
The color that you think means it's disabled is the color that material design makes input fields. In the 'Elements' section in chrome, you can see that:
fieldset[disabled] .mdl-textfield .mdl-textfield__input
Is a light grey, being that's not what is being targeted.
What is being targeted is:
.mdl-textfield.is-disabled .mdl-textfield__input
I want to make readonly to these textboxes in javascript. Readonly property apply to several textboxes by single javascript. how to make this.
<div class="box-body" id="readonly_owner">
<label for="owner_deviceid">Owner Device Id</label>
<input type="text" class="form-control readonly_owner" id="owner_deviceid">
<label for="owner_name">Owner Name</label>
<input type="text" class="form-control readonly_owner" id="owner_name">
</div>
I have using javascript like this or there is an option for apply this property to class. Iam using getElementsByClassName() but it doesn't work
document.getElementById('readonly_owner').readOnly ="readonly";
How to apply readonly property to group of textboxes and also remove readonly property
With jQuery, you can do this in a single line:
$('.readonly_owner').attr('readonly', 'readonly');
Or without jQuery:
var items = document.getElementsByClassName('readonly_owner');
for(var i = 0; i < items.length; i += 1) {
items[i].readOnly = true;
}
I am trying to get the value of an input field in a html list.
I don't want the value which I set as the page loaded, i want the changed value (typed something in like abcd).
I tried it with innerHTML, innerText, textContent but its all the theme the old value.
The only thing that works ist getting the value with the id from input, but that does not work for me and my project.
May anyone can help me.
Here is the list code:
<li id="testlist">
<img onclick="functionxyz()" src="" height="40px" ondblclick="" width="50px"></img>
<input id="id1" class="textlist" type="text" name="" value="old value"></input>
<select id="id2" class="selectshortlist" name=""></select>
<textarea id="" class="textfield1" cols="1" maxlength="1000" rows="1" name=""></textarea>
<div class="ui-state-default sortable-number"></div>
<input type="button" class="removelist"></input>
</li>
And that's the JavaScript code:
function()
{
var sort1 = document.getElementById("testlist");
alert(sort1);
var liste = sort1;
alert(liste.value);
alert(liste.innerHTML);
var savelist = new Array();
for (var i = 0; i < liste.length; i++)
{
alert(liste[i].value);
console.log(liste[i].value)
//savelist.push(liste[i].textContent);
}
}
You tagged this with jquery, so the answer is, use jquery :)
var valueThatYouSeek = $('#testlist input.textlist').val();
console.log(valueThatYouSeek);
alert(valueThatYouSeek);
You can do it without jquery pretty easily if you're going that route.
function getInputVal() {
var input = document.getElementsByClassName("textlist")[0];
console.log(input.value);
}
FIDDLE
I would like to select all the contents of the text-boxes when a user clicks on it. But, since my document contains almost 5 text-boxes, instead of giving each text-box an ID selector or onfocus attribute, I would like to select all the text-boxes.
For example: var x = document.getElementsByTagName("p");
The above code selects all the paragraphs in a document. So, I need a similar code for all textboxes. I have tried replacing input and input[type=text] Nothing worked.
Try this out:-
http://jsfiddle.net/adiioo7/zvgHx/
JS:
var x = document.getElementsByTagName("INPUT");
var y = [];
var cnt2 = 0;
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "text") y.push(x[cnt]);
}
alert("Total number of text inputs: " + y.length);
HTML:
<input type="text" id="input1" value="input1"></input>
<input type="text" id="input2" value="input2"></input>
<input type="text" id="input3" value="input3"></input>
<input type="text" id="input4" value="input4"></input>
<input type="text" id="input5" value="input5"></input>
So, array y will hold all inputs with type as text.
Use jQuery: $('input[type=text]') That will do the trick.
http://jquery.com/
In the below table which is generated dynamically, I want to traverse and find html controls (input,select,textarea) using JavaScript DOM. I don't want span and div values.
Can anyone give an idea on how to traverse?
<html>
<head>Html</head>
<body>
<tr>
<td>
<div id="one"></div>
</td>
<td>
<input type="text" name="textbox" id="txtid" value=10"/>
</td>
<td>
<select id="cuskstatus" name="cuskstatus" class="selectStyleBorder">
<option selected value="LOCAL">Local</option>
<option value="GLOBAL">Global</option>
</select>
</td>
</tr>
<tr>
<td>
<textarea id="tareaid" name="" value="10"/>
</td>
<td>
<span id="span1">value</span>
</td>
</tr>
</body>
</html>
I would do it like this
var desired_tag_names = new Array('select', 'input', 'textarea');
function getElements(e) {
var elements = new Array();
for (i=0; i<e.length; i++) {
var el = document.getElementsByTagName(e[i]);
for (j=0; j<el.length; j++) {
elements.push(el[j]);
}
}
return elements;
}
var all_the_desired_elements = getElements(desired_tag_names);
In plain JavaScript, just use form.elements.
Assuming that you've a <form id="formid">:
var inputs = document.getElementById("formid").elements;
// ...
Or if you want to traverse all forms of the document on a per-form basis, just use document.forms to get all forms first.
for (var i = 0; i < document.forms.length; i++) {
var form = document.forms[i];
var inputs = form.elements;
// ...
}
If you're already using jQuery, or are open to, use :input selector.
var $inputs = $(':input');
// ...
Applying jQuery makes this problem trivial:
$('input','select','textarea')
This will return a jQuery collection of all input, select and textarea elements.