What are the ways to get and render an input value using jQuery?
Here is one:
$(document).ready(function() {
$("#txt_name").keyup(function() {
alert($(this).val());
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<input type="text" id="txt_name" />
//Get
var bla = $('#txt_name').val();
//Set
$('#txt_name').val(bla);
You can only select a value with the following two ways:
// First way to get a value
value = $("#txt_name").val();
// Second way to get a value
value = $("#txt_name").attr('value');
If you want to use straight JavaScript to get the value, here is how:
document.getElementById('txt_name').value
There is one important thing to mention:
$("#txt_name").val();
will return the current real value of a text field, for example if the user typed something there after a page load.
But:
$("#txt_name").attr('value')
will return value from DOM/HTML.
You can get the value attribute directly since you know it's an <input> element, but your current usage of .val() is already the current one.
For the above, just use .value on the DOM element directly, like this:
$(document).ready(function(){
$("#txt_name").keyup(function(){
alert(this.value);
});
});
You have to use various ways to get current value of an input element.
METHOD - 1
If you want to use a simple .val(), try this:
<input type="text" id="txt_name" />
Get values from Input
// use to select with DOM element.
$("input").val();
// use the id to select the element.
$("#txt_name").val();
// use type="text" with input to select the element
$("input:text").val();
Set value to Input
// use to add "text content" to the DOM element.
$("input").val("text content");
// use the id to add "text content" to the element.
$("#txt_name").val("text content");
// use type="text" with input to add "text content" to the element
$("input:text").val("text content");
METHOD - 2
Use .attr() to get the content.
<input type="text" id="txt_name" value="" />
I just add one attribute to the input field. value="" attribute is the one who carry the text content that we entered in input field.
$("input").attr("value");
METHOD - 3
you can use this one directly on your input element.
$("input").keyup(function(){
alert(this.value);
});
I think this function is missed here in previous answers:
.val( function(index, value) )
You can get the value like this:
this['inputname'].value
Where this refers to the form that contains the input.
To get the textbox value, you can use the jQuery val() function.
For example,
$('input:textbox').val() – Get textbox value.
$('input:textbox').val("new text message") – Set the textbox value.
You can simply set the value in text box.
First, you get the value like
var getValue = $('#txt_name').val();
After getting a value set in input like
$('#txt_name').val(getValue);
For those who just like me are newbies in JS and getting undefined instead of text value make sure that your id doesn't contain invalid characters.
Try this. It will work for sure.
var userInput = $('#txt_name').attr('value')
You can try
let quantity = $('input[name = quantity]').val()
where the name of the input field is quantity
Shortest
txt_name.value
txt_name.onkeyup = e=> alert(txt_name.value);
<input type="text" id="txt_name" />
Related
Below is my HTML snippet,
<div class="direct-service hide">
..
<input handle="input" type="hidden" name="./season" value="spring">
<input handle="input" type="hidden" name="./season" value="">
...
</div>
I want to iterate all element inside direct-service class and look for ./season name attribute and check if the value is empty. If it is empty I need to modify the element as
<input handle="input" type="hidden" name="./season#Empty" value="">
I tried to get the value based name property with below code
$("input[name='./season']").val();
But it is giving me the value for first element and not giving me the second element. Seemed like I need to scan all element inside the div class. Could you anyone tell me the best way to manage this case?
Use .map() to iterate and return an array of all the values.
$("input[name='./season']").map(function() {
return this.value;
}).get();
Or if you want to do something to each of them, use .each()
$("input[name='./season']").each(function() {
if (this.value == "") {
$(this).setAttr("value", "");
}
}).get();
You can use .eq() function, example:
$("input[name='./season']").eq(0).val(); // Get first element
$("input[name='./season']").eq(1).val(); // Get second element
Have been looking for this answer in SO, but perhaps I'm not frasing it correctly or there is actually no answer yet for this.
I am using an input component that uses a key to render it valid (green border) or invalid (red border) and I would like to add it dynamically:
<Input type="select" valid /> //This input has green border
<Input type="select" invalid /> //This input has red border
Since they key valid/invalid has no value like true or false, I'm not sure how to change it dynamically through a function since as far as I'm aware, I can change values dynamically with a JSX expression, but not add a key itself.
Can you please suggest a way to add 'valid' or 'invalid' tag dynamically without value?
"Without value" is actually not accurate. What you see there is syntactic sugar for valid={true} and invalid={true}.
So, the same can be accomplished by:
const valid = // whatever logic here to determine if it's valid.
<Input type="select" valid={valid} invalid={!valid} /> // Either return or assign to something.
Alternatively:
let inputProps = {type: 'select'};
if (/* whatever logic here to determine if it's valid*/) {
inputProps.valid = true;
}
else {
inputProps.invalid = true;
}
<Input {...inputProps} />; // Either return or assign to something.
But the latter is a lot more verbose.
Not sure if this will work but give it a try.
JSX reads properties without values/= as boolean/true.
Set null values:
<Input type="select" invalid={null} />
You can then conditionally show valid or invalid input elements
I am able to create an input field with a datalist in html5 with Reactjs. The reactjs code looks like this:
const Container = props => {
const countryList = props.countries.map(c => <option key={c} value={c} />);
return (
<div>
<input list="countries" name="Country" />
<datalist id="countries">{countryList}</datalist>
</div>
);
};
This code is proved to work properly, say the input field is there and if user type something in the field, relevant list will show. The problem is that the input field is empty without any label. So an indicator for telling what the field is about is needed, for instance, a label can be added to the left side or the top of the input field, but this would take more space on the page.
Therefore, I would like to add some light-colored text indicator/label inside the input field, and when user click this input field, the text indicator would disappear and the user can insert value and also get data list
Anyone can give some suggestion on how to achieve this goal?
<input list="countries" name="Country" placeholder="sometext"/>
I have here a html text box. It has an ng-model and an initial value on it. The problem is the initial value is not shown when there's an ng-model present and I need both of the ng-model and the initial value for the textbox.
HTML:
<input type="text"
ng-model="selPcode"
name="missionId"
value="123">
JS:
$scope.setPcode = function(site){
$scope.selPcode = site.id};
Can anyone suggest a way how to make the value show in the text box and keep the ng-model present? Thanks in advance.
Set an initial value to the ng-model on your controller's scope. Something like $scope.selPcode = 123. Set it to what your value would have been. That way, it'll display initially and then you can also change it.
Well, Angular works with two-way data binding, so why not simply set the initial value in your controller?
$scope.selPcode = 123;
This way, you'll see it in your input.
Use ng-init without having to touch the controller and keep the code in the HTML readable, like you would with the value= syntax for the standard use of the Inputbox. Plunkr here
Example Here (Controller As Syntax):
<div ng-controller="myController as my">
<h1>Hello {{my.name}}</h1>
<input type="text"
ng-init="my.selPcode=123"
ng-model="my.selPcode"
name="missionId">
</div>
Controller:
myApp.controller('myController', function($scope) {
this.name = "Gene";
});
This is very strange to me:
document.getElementById('orderNumber')
returns <button class="popup" id="orderNumber">order Number</button>
document.getElementById('orderNumber').value
returns ''
all the operation is after dom fully loaded and after I input the type,
If you want the value of the element, that element has to have a value attribute set:
<button class="popup" id="orderNumber" value="this is the value">order Number</button>
The value being retrieved by:
var value = document.getElementById('orderNumber').value;
or if you want the text of the element, try retrieving the textContent (or innerText):
var ordernumberEl = documet.getElementById('orderNumber'),
text = orderNumberEl.textContent || orderNumberEl.innerText;
A general JS Fiddle proof of concept.
Try:
document.getElementById('orderNumber').innerHTML