how to get value in javascript from document.getElementsByClassName('myTxtBox'); - javascript

The html for the textbox I was to get the value from is created from a .js file -- from javascript. I tried this to get the value that I enter into myTxtBox which is defined by a className:
<input type='text' class='myTxtBox editable' name='myTxtBox' value='' maxlength='200' size='90'/>
....
I try to retrieve the value I enter into myTxtBox as follows:
var txtval = document.getElementsByClassName('myTxtBox');
alert(txtval);
...more stuff where I set a breakpoint
the alert says I have [object htmlcollection]
intellisense does not give me .value -- I only get txtVal.valueOf, but when I break into the code and hover over txtval I get a listing for >Methods, ..., >myTxtBox. When I expand the >myTxtBox list if I scroll to the bottom of that listing I DO see "value" in >myTxtBox list and it DOES equal what I entered on the web page.
How do I retrieve that value? I have tried all sorts of options from the intellisense, but it either gives an error msg or [object htmlcollection] on the alert. How do I retrieve the value I entered? Or -- do I use something different than document.getElementsByClassName('myTxtBox') for my scenario?

You would need to return the index + value as getElementsByClassName returns a HtmlCollection so there are many elements to it.. try this:
var val = document.getElementsByClassName('myTxtBox')[0].value
alert(val)

getElementsByClassName returns a HtmlCollection which is array like. Do this like this:
var txtval = document.getElementsByClassName('myTxtBox')[0].value
alert(txtval)

I discovered that I could add an ID to my input element 'myTxtBox' and use jquery to retrieve the desired value, so I did this -- added an ID to the textbox and use jquery in the alert to do a document.getelementbyID
//--generate the html section here
"...<input type='text' class='myTxttBox editable datepicker' id='myTxtBox' name='myTxtBox' value='' size='10'/>..."
function NextButton_Click()
{
try
{
alert($("#PositionStartDateTextBox").val()); <---and this displays the value entered into this textbox
....
The whole deal is I have to evaluate some date textboxes because users can enter values in manually -- I guess the best fix would be for this textbox to not be editable. That would be another question -- how to add a datepicker and not have an editable textbox.

Related

Set and get value of input with jStorage

I'm using jStorage to store the value of an input, when I click the save button. Then I want to set the stored value as the current input value on page load. It ain't working too well though.
HTML
<input type='text' id='name'>
<div id="save">Save</div>
JS
$('#save').click(function() {
$.jStorage.set("key", $("#name").val());
});
var input_value = $.jStorage.get("key");
It's a little tangled up:
$.jStorage.set("key", $("#name").val());
var input_value = $.jStorage.get("key");
When you're passing a selector to jQuery you have to pass a valid string, not just the raw CSS selector syntax. That is, you've got to get the selector expression into JavaScript first, and you do that by creating a string constant.
edit — If you want your <input> to show the last-saved value when the page loads, you'd do something like this:
$(function() {
$('#name').val( $.jStorage.get("key") || "" );
});
Wrapping the activity in a $(function() { ... }) wrapper ensures that the code won't run until the <input> field has been seen and parsed by the browser, but still very soon after the user sees the page load (essentially immediately).
Adding the extra || "" bit after the jStorage call ensures that if the value is null or undefined the user won't see that. If there's no stored value, in other words, that'll have the input just be empty. You could put any other default value in there of course.

unexpected behaviour in option tag in HTML

I have the following code
<select id="part">
<option>noun</option>
<option>verb</option>
<option>adjective</option>
</select>
In the above code, I don't have any value attribute each option tag.
there is only text node.
when I access the option tag
$("#part").val(); I get what is selected in dropdown box. ie, "noun"
but when I access $("#part").text(), there is empty string.
but when I create, option tags dynamically in jquery for
<select id="part"></select>
using
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
Here the value is attribute is needed to get the option selected.
without value attribute, $("#part") is undefined.
can somebody explain the discrepancy here? of if my understanding is not correct. Thanks
Check here DEMO http://jsfiddle.net/yeyene/yH4Fb/
You need to get only the selected option text coz there are three options,
when you get $("#part").val(); you directly get the selected value (only one selected value). But when you get $("#part").text().. you are getting the text of the whole select text where you have three options and three types of text.
JQUERY
$(document).ready(function(){
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
$("#part").on('change', function() {
alert('Value is '+$(this).val());
var text = $("#part option:selected").text();
alert('Text is '+text);
});
});
$("#part").text() doesn't return nothing but it won't return what you expect (see this fiddle).
Explanation: text returns the text of the object strips out the html (see jQuery docs examples), so what you will be getting is the inner contents of the select after the html was stripped out.
If you want the text of the selected value, include the selected option in your jquery selector: i.e. $('#part option:selected').text() which uses the jQuery psuedo-selector (also in my fiddle).

Picking value from Text Box in jquery by ID

I am having 3 textbox where the ids are
"ctl00_m_g_8b41d68e_7c2d_49c3_a4b5_316440ad77e1_SpListPicker_SelectionBox", "ctl00_m_g_9b41d68e_7c2d_49c3_a4b5_316440ad77e1_SpListPicker_SelectionBox" and "ctl00_m_g_8a41d68e_7c2d_49c3_a4b5_316440ad77e1_SpListPicker_SelectionBox".
Now the id which is getting generated dynamically, but the "SpListPicker_SelectionBox" is constant.
Now I am having a requirement, onClick of a button either of the 3 textbox will have the value, which is to be fetched. How can I get the value of textbox.
Any help is appreciated. Can we get the value on the like operator? where ID like '%SpListPicker_SelectionBox' ??
Try this:
var $inputs = $('input[id$="SpListPicker_SelectionBox"]')
Where $= is the Attribute Ends With Selector
Then you can loop through each textbox and get the values like:
$inputs.each(function( index ) {
alert( index + ": " + $(this).val() );
});
use attribute selector with $ ,this fetch all the elements ending with the given string..
docs
$('input[id$="SpListPicker_SelectionBox"]').val()
you can write Javascript or jquery code runtime by using code while textboxs generated and use exact textbox id associate with jquery statement.

assigning initial value of input text field with jquery

I am trying to assign an initial value to a text box with using jquery. This is the text field
<input type="text" class="info"/>
This creates more than one text fields and I need to populate the text fields with initial values which come from database. I am having problem since I am trying to it with jquery adapter.
Any clue on this?
Thanks in advance.
Here is the detailed code:
I include index.html
<?php include "index.html"?>;
which puts some text fields to record.php:
...
...
After including index.html I am using this code to assign intial value to the text boxes which have a class name "info":
$('.info').each(function() {
$('.info').val('yourvalue');
});
Instead of assigning a constant value (here it is "yourvalue") I am going to assing some database records to each input fields.
$('.info').val('yourvalue');
replace yourvalue with the value you want to set..
Set this value in the success callback of your ajax request..
$('.info').val('value-to-be-set');
.val( value ) - Set the value of each element in the set of matched
elements
Above code will set the value of the input fields where the class name if 'info'
Read More here
$('.aciklama').each(function() { $('.aciklama').val('yourvalue'); });
you know $('.aciklama') is an array , and when you iterator you array get the object, you still get the $('.aciklama') array and set the array value, as I see It is not correct.
You should write like this:
$('.aciklama').each(function(index, item) { $(item).val('yourvalue'); });

Replace hidden value in a form with javascript variable

I'm working with Google Checkout and am creating a simple Buy Now button. The button will be on many pages and have many values for the form.
What I'm looking to do is to use Javascript, to get a value on a text_field, and replace a hidden field value.
To get the value, I have this code:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
return false;
});
Then, in the form from google, I have this:
<input type="hidden" name="item_quantity_1" value="1"/>
What I need to be able to do, is replace the value on this hidden input, with my quantity variable. I know this is probably really easy, but I'm amazingly confused at how to do this. I should have to select the hidden field, but I don't know how to update the value?
Here ya go:
$('input[name="item_quantity_1"]').val(quantity);
You just have to construct a jQuery selector to get that field and then use the .val(xxx) method to set its value.
jQuery loves to overload the same method for different behaviors based on what you pass as arguments. In the case of .val(), if you pass no arguments, it retrieves the field value. If you pass an argument like .val(quantity), it sets that value into the field like this:
$('#payment_quantity input').keyup(function() {
var quantity = $('#payment_quantity input').val();
$("input[name='item_quantity_1']").val(quantity);
return false;
});

Categories

Resources