Can javascript “show” a field's input value?

Question

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?

Answer 1

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.

Answer 2

yes, you can change the value in javascript. and that is what is happening in your case

document.getElementById("materials_price_1").value = "4";

Answer 3

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.

Answer 4

Just check value of this field with JavaScript:

document.getElementById('materials_price_1').value;

Or with jQuery:

$('#materials_price_1').val();

Answer 5

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

Answer 6

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.