We Keep Coding

Get textbox value after append - jQuery

First I'll append some value to a textbox using jQUery :
$('#textboxId').val('someval');
Now the value is empty, when I see in console.log
This will not work, since the value is empty.
var someVar = $('#textboxId').val();
How do I get the appended value again in jquery?

This will not work, since the value is empty.
No, your code is valide and will work, you can notice that the value is added to the input field, but the value attribute always shows the default value. Browser Inspector never displayed the current value in the attribute. The current value is always visible just on the screen.
$('#textboxId').val('someval');
alert($('#textboxId').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='textboxId'/>

Try like this:
$('#textboxId').append('someval');
var someVar = $('#textboxId').val();

Getting an empty value with val()

I have table with the following id inside one of the rows
<td class="firstRow"> <span id="randomWordToTranslate"></span></td>
the firstRow class just include padding preferences in css.
In my java script class, I am calling two functions
the first randomly assigned a value to this id , so when I am loading my page I will get a different word each time : this part is working
$("#randomWordToTranslate").html(current_dict[listOfKeys[Math.floor(Math.random() * listOfKeys.length)]]);
the second inside a button listener trying to get the value of the word inside this field whenever the button is clicked
var spanishWord = $("#randomWordToTranslate");
var inputValue = $(spanishWord).val();
but when I doing console.log(inputValue) I am printing an empty row into my log.
Any ideas?
thanks

Since the <span> isn't an <input> tag (or other form input like <select>), it will not have a .val() (value). Instead, you need either .html() or .text():
var spanishWord = $("#randomWordToTranslate");
var inputValue = spanishWord.text();
// Or:
var inputValue = spanishWord.html();

.val() and .text() don't work?

I want to email div contents via php and form tag. I have 2 divs with these classes:
.simpleCart_items
.simpleCart_total
I want to fetch contents from these divs and insert their contents in inputs or textareas, then submit the form to my php file.
I wrote this JQuery code:
$('#shopform').submit(function(){
var items = $('.simpleCart_items').text();
var tprice = $('.simpleCart_total').text();
$('#itemsinfo').val(items);
$('#totalprice').val(tprice);
});
and these are my inputs:
<textarea id="itemsinfo" style="width:320px; height:160px"></textarea>
<input type="text" id="totalprice"/>
but it doesn't work. The contents didn't move to the input tags.

It must be something else in your HTML or script that you are showing us because when I set up a simple test using your code, it works fine here: http://jsfiddle.net/jfriend00/7q6DP/.
This works perfectly fine for me (in Chrome, Firefox, Safari and IE):
HTML:
<button id="submitForm">Submit</button>
<div class="simpleCart_items">simpleCart items text</div>
<div class="simpleCart_total">simpleCart total</div>
<textarea id="itemsinfo" style="width:320px height:160px"></textarea><br>
<input type="text" id="totalprice"/>
Javascript (after page is loaded):
$('#submitForm').click(function(){
var items = $('.simpleCart_items').text();
var tprice = $('.simpleCart_total').text();
$('#itemsinfo').val(items);
$('#totalprice').val(tprice);
});
Please show the rest of your code and HTML.
The things to check are:
Are there any javascript errors showing in the error console or in the debugger console?
Are you initializing your event handlers after the page has loaded?
Do any javascript errors show in the debug console when you press the submit button?
Is your submitForm event handler getting called? If you set a breakpoint or put an alert in their, does it get hit?
Can you set a breakpoint in your submit handler and see what's happening with the values of items or tprice?
Make sure your class names don't have the leading period on them when you put them in your HTML. It should be class="simpleCart_items", not class=".simpleCart_items".

Your code works just fine when I put it in a page:
http://jsfiddle.net/Guffa/krYQh/
When you click the submit button, the fields are populated with the data. (I added a return false in the submit event handler just to keep the form from posting.)
Some possible errors in your code:
You have used class=".simpleCart_items" instead of class="simpleCart_items".
The form doesn't have id="shopform".
You have use the ids shopform, itemsinfo or totalprice on any other elements.

I guess you should use ".html()" instead of ".text" something like below.
$('#shopform').submit(function(){
var items = $('.simpleCart_items').html();
var tprice = $('.simpleCart_total').html();
$('#itemsinfo').html(items);
$('#totalprice').val(tprice);
});

I suppose you should use .innerHTML instead of .text()

You should be able to use the .val() to get the value for the text areas instead of using .text().
Try using alert(items); before you set the div's contents just to make sure you are actually getting data.

How to set the value of a text input with MooTools

I have just begun playing with MooTools, and I don't understand why the following happens:
var input = new Element('input');
input.set('type','text');
input.set('value','this is the value');
console.log(input);
results in: <input type=​"text">​, so setting the value hasn't worked.
But if I do this:
var input = new Element('input');
input.set('type','text');
input.set('someValue','this is the value');
console.log(input);
I get the expected result of <input type=​"text" somevalue=​"this is the value">​.
Am I overlooking something, is what I am trying to do not allowed, is this a bug in Chrome (11.0.696.71, OS X) or am I doing something else wrong?
Update: thanks for your answer! You are right, the value is actually being set; console.log(input.get('value')) gives back the proper value and I can see the value in the input field when I append the input object to the DOM.
Apparently, the value setting is just not reflected as an attribute of the HTML element, but only stored internally.

Are you sure the value isn't being set?
What do you get when you call: input.get('value')
I tested this (in firefox) and even though the console just logs <input type=​"text"> the value does in fact get set. Try adding the element to the page and you'll see it :)

I've had a similar problem with this 'red herring' which I've since solved, and thought I'd share.
I'm trying to make certain cells of a table row editable when the user clicks on the row:
var cells = this.getElements("td");
for (var ix=0;ix<cells.length; ix++){
if (cells[ix].hasClass("edType_text")){
var celltext = cells[ix].get("text");
cells[ix].set('text','');
var editTag = new Element ('input',{type:'text','value':celltext});
editTag.inject(cells[ix]);
}
}
This seemed to work OK but when I clicked on the cell I couldn't edit it. Firebug and Chrome tools showed the added input tag as
<input type='text'>
instead of the expected:
<input type='text' value='xxxxxx' />
However this is perfectly normal as commented on above.
Spotted the 'deliberate' error ?
Of course when I clicked on the input field it triggered the mouse event on the row again, thus preventing me getting at the input!!!! :-{
To avoid this just add this line of code at the end of the if block:
editTag.addEvent("mousedown",function(event){event.stopPropagation();});

How do I get the value of the input field?

this is my input field:$("<td class='testclass'><input id='field-search' value='' type='text'></td>")
How do I get the value of the input field?
I tried it this way:
var mytest =$('#field-search').val();
alert(mytest);
The result is that I get an alert being undefined though the input field has got a value e.g. 10.
Is there a way to get the value when the value of the input field changes?
A link or an example would be very helpful. Thank you.
Link to the code: http://www.file-upload.net/download-2902420/test.user.js.html

That's because you've not appended that html to the page. Either do that (someElement.append($("<td>...</td>"));), or search in that part specifically
var e = $("<td class='testclass'><input id='field-search' value='1' type='text'></td>");
var mytest =e.find('#field-search').val();
alert(mytest);
You don't insert element into the page just by calling $("...").

In jQuery
var myVal = $('#field-search').val();
In vanilla JavaScript
var myVal = document.getElementById('field-search').value;