We Keep Coding

get html element value after changing it

In a view, I'm trying to retrieve the value of an html input box AFTER I have changed it. In other words, the page loads with
<input id="input_one" type="text" value = "apple" />
When the page opens the input box has the word apple in it. I click on this input box, erase the word apple, and then write the word "orange" in instead. when I do the following:
$('#input_one').click(function() {
console.log($('#input_one').attr('value'));
});
the result is "apple" not orange. Is there a way to get the new value I just input without submitting the form? I'm trying to make client side validation using javascript on the page, if the value is something, submit form, otherwise display message "value must be something"
maybe I can do something like
$('#input_one').attr('value', 'new value');
but how do I get the new value I just put in? where is this new value stored? innerHTML? or text() maybe?

attr() will get the attribute of the <input>, which is the initial value of the element.
The current value of the element is a property. If we wanted to get any element property:
$('#input_one')[0].value;
$('#input_one').prop('value');
However, jQuery has the perfect method, .val(), for you:
$('#input_one').val();
What is the difference between attribute and property?

Try .val() instead:
$('#input_one').val();

Try something like this:
$("#input_one").blur(function() {
alert(this.value);
});
This alerts the new value of the input box every time you put it out of focus.

Cant set input value via JS after manually deleted the value (Chrome & FF)

Im creating a simple HTML form that lets you click on a text and set the value in an input field.
The problem is when I manually delete the value, I cant click and set a new value.
I created a JSFiddle: http://jsfiddle.net/s4faujvo/
document.getElementById("pnr").setAttribute("value", this.textContent);
(Click on 2222 and 9999 to see it change, delete/blank the value manually, click on 222 or 999 again)
IE9: Working
FF 25: Not working
Google chrome 30.0.1599.66: Not working
Am I doing something wrong here?

Value is a property, not an attribute. To access, use:
document.getElementById("pnr").value=this.textContent; .

Can javascript "show" a field's input value?

I have a field that shows a value 4 in the UI. The site is built using a complex build process that I do not totally understand (I work as part of a team).
When I inspect the HTML for the field, I don't see the value 4.
I am confused about how this might happen. Is it possible that javascript is "showing" the value of the input field?

DOM elements have attributes and properties. The two are not always identical. The web inspector, in general, shows attributes as part of the DOM structure, like.
<input type="text" value="4" />
However, if there is no value attribute, this does not mean that the element has no value. For example, consider the following HTML:
<input type="text" id="test" />
When you load the page, the attribute document.getElementById("test").getAttribute("value") is null, and the property document.getElementById("test").value is "" (empty string). When you enter 4 into the input field, the attribute "value" is still null, but the property value has changed to "4".
Long story short, the web inspector is not obligated to show the value of an input since it is does not always appear in the DOM as an attribute.

yes, you can change the value in javascript. and that is what is happening in your case
document.getElementById("materials_price_1").value = "4";

I am not sure what the issue is.
If the input contains a 4 that does not mean the attribute value will be equal to 4.
It just means that the value of the input is 4.

Just check value of this field with JavaScript:
document.getElementById('materials_price_1').value;
Or with jQuery:
$('#materials_price_1').val();

Yes, if you using chrome you can in inspect element stand with the mouse on the elemnet in 'Elements' tab and right click.
Now choose 'Inspect DOM Properties' this will open you bottom of the tab the console tab. there you can find the DOM object of your field. open the object and find property value. this is the active value right now

Sure. it happens in the DOM. you can simply make it blank by writing this code in your body tag :
<script>
document.getElementById('materials_price_1').value='';
</script>
just make sure you put the code after your other Javascript codes.

Javascript/jQuery String issue with IE8

I'm having an issue in IE 8 where I'm trying to store a value from a form field select box using jQuery's val(). The String shows up fine in all browsers except IE 7/8 where it shows up as null. I'm assuming it has to do with the characters (quotes?) in the field, but I'm not sure how to work around this. Code below:
var $size = $("#size");
var size = $size.find('option:selected').val(),
The actual value of the selected field is:
L: 158.375" x 80.5" 4023mm x 2045mm
Thanks in advance for any help.

Assuming that #size is the id of the select box, why are you using find('option:selected')? Whatever the currently selected option is will be the val() of the select element.
e.g. $('select#size').val(); should return the value of the selected option.

Thanks all for the feedback. It appears it was a bug with an older version of jQuery (1.4.1). I've updated to 1.7.2 and it works correctly now.

jQuery 1.7.1 - Text input's 'value' not updating in Firebug Inspect element but is on screen

Using jQuery 1.7.1, I have noticed that the value attribute/property of a text input field does not update when I view it in Firebug's Inspect Element tool, but does update on the screen, i.e. in the actual visible text box.
For example, when changing the value of a text with the following (used inline):
jQuery(function() {
jQuery('#event').val("test");
});
the text box itself displays test but Firebug's Inspect Element does not represent the change:
<input type="text" value="" placeholder="" id="event" name="event" class="input-text">
I'm sure I have seen the value change in Firebug before using older jQuery, however not in this scenario, nor that of a colleague of mine also using jQuery 1.7.1.
Is this a quirk/bug of this particular version of jQuery or have I missed a step somewhere?

The value attribute always shows the defaultValue. Firebug never displayed the current value in the attribute.
The current value is always visible on the screen.
This has nothing to do with Firebug or jQuery, it is the HTML standard.

The attribute value never changes, only the property.
http://jsfiddle.net/cc5Pm/1/
var input = document.getElementsByTagName("input")[0];
setInterval(function(){
input.value = parseInt(input.value) + 1;
console.log(input.value, input.getAttribute("value"));
},1000);

Sometimes Firebug doesn't always reflect some changes, I have noticed this before.
If there is a refresh I haven't found it. You can either turn Firebug off and on again or just use the console to check the value has changed
console.log($("#event").val());

I've seen this too: i.e the value attribute of an input does NOT change in Firebug. Last time I paid attention to this was a while ago (like 2 years). Incidentally, I was using jQuery too, but I really doubt jQuery has anything to do with this. It's just how Firebug works (or at least worked).
Of course, you could still use the Firebug console to definitively get the value:
console.log( $('input#event').val() )