Input value doesn't display. How is that possible?

Question

This must be something utterly stupid that I've done or am doing, but I have an input with a value attribute that simply isn't being displayed:

<div class="input text required">
  <label for="Product0Make">Make</label>
  <input name="data[Product][0][make]" 
         type="text" 
         maxlength="255" 
         value="AC Make" 
         id="Product0Make">
</div>

Has anyone ever seen this before? Do I have some kind of typo that I'm just blind to? For whatever it may be worth, here's the CakePHP code that's generating this line:

<?php echo $this->Form->input( 'Product.' . $index . '.make', array( 'default' => $product['Product']['make'] ) ) ?>

I have a small form with a handful of text inputs, 1 textarea and 2 selects. None of the text input values display, but everything else is fine.

Any thoughts would be appreciated. I can't even believe I'm having to ask this question, but that's how crazy it's making me.

Rabies

I assume the issue remains the same if you remove all the classes from this div? – Lakes

I can believe you are asking this question, since it is very odd behaviour. To make it even more mysterious, it DOES work on my PC. Did you try to restart your computer ? :) – Priggery

is the text perhaps the same colour as the background? (you never know! :D) – Tristantristas

or .. perhaps you need to explicitly close the input tag with /> instead of just > (you have malformed XHTML) – Tristantristas

@Frits - The text is black, so that's not it, and the paste is from Firebug. The actual source does have the close tag. Firebug strips it out for whatever reason. – Rabies

Per Frits's suggestion, try running your page through the w3c validator – Annuitant

Disable styles, disable javascript, then see what happens. This makes no sense by itself, there has to be a simple explanation. – Lail

Try to put this code in empty test html file and run it. – Sharpwitted

Try to refresh with Shift+F5 (or just hitting enter on the url bar) especially on Firefox it could keep the last value. Also try to disable JavaScript - it's possible that some piece of code handles this on page load. – Lordosis

Answer 1

Argh. I knew this was going to be something beyond stupid. There was a bit of Javascript that was clearing data. The clearing was useful in other places, but I didn't know it was executing so it was a serious pain to track down. Once I prevented the clearing in this scenario, my values actually appeared. Because I was looking at the code in web inspector, I assumed that it would be a "live" view, but I guess that's not entirely true.

Thanks for your help, everyone.

Rabies

Congrats on solving your problem. You should accept your own answer if you've solved your own question. – Thayne

I just realized this myself. I thought I was going completely insane... value was gone, and couldn't be added in any scenario. I spent hours going backwards. WOW brain is toast now – Phraseogram

So the real WTF is that the debugging tool does not show the actual DOM element's value. I've got the same issue, and its happening in Chrome and FF. How is that possible?! – Incompetence

Those are the bugs when someone says : "Woo, I'm not stupid and I am sure this can't happen, but it does.". 99.999999% of time, the issue shall be attributed to us and not the IDE/browser/etc we are using, but you know! I also had a similar situation in a different language. – Ascariasis

hi guys.. how do i prevent this clearing/see where this clearing is happening? – Christianity

Solved my issue when i debug my jQuery, i was doing .val('') – Dynamic

Answer 2

For my side, it was a problem only for Firefox.

I resolved by adding the attribute autocomplete="off" in the input field.

<input type="text" value="value must appear" autocomplete="off"/>

Naranjo

Same with chrome ! – Dorcia

Answer 3

Mine was related to AngularJS

I was trying to put both an HTML Value and an ng-Model, thinking that the ng-Model would default to the Value, because I was too lazy to add the Model to the $scope in the Controller...

So the answer was to assign that default value to the $scope.variable in the controller.

Quittance

Answer 4

For me it was browser caching. Changing the URL string or clearing history can help.

Diatomaceous

Same here on FF 45.0 – Kasper

Instead of refreshing, I selected the url and pressed the enter key on the PC. The new value appeared. – Inhibitory

Answer 5

For Googler's who may have the same issue: This can happen if you have a non-numeric value in a number type input field.

For example:

<input type="number" value="<? echo $myNumberValue; ?> "/>

This will show nothing even though Dev tools says the value is there, since the extra space after ?> makes it non-numeric. Simply remove the extra space.

Bauhaus

Thanks! This was my problem. I had '-' signs in the value I tried to insert. – Tove

me too... i was populating a numeric input with a result from toLocaleString() -- d'oh! – Bowse

Answer 6

Same problem occured on electron:

I was clearing the field with document.getElementById('_name').value = '' instead of document.getElementById('_name').setAttribute('value', "").

So I guess simple quote broke the field or input has a second value hidden attribute because I could rewrite on the fields and it won't change the value on the inspector

Filagree

Answer 7

Are you confusing the uses of the 'default' and the 'value' parameters for $html->input()?

If you're are using 'default' => $product['Product']['make'] and $this->data is present, the field will not be populated. The purpose of the 'default' parameter is to display a default value when no form data ($this->data) is present.

If you want to force display of a value, you should use the 'value' parameter instead. 'value' => $product['Product']['make']

Annuitant

Answer 8

For me it was because I was using the <input> tag without enclosing it inside a <form> tag

Floccose

Answer 9

Does not directly address the original question's code snippet, but for anyone else wondering about value not showing up, the value attribute is supported on text input elements but not on textarea.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

Clove

Answer 10

Had a similar problem with input value retrieved via ajax, correctly set and verifiable via browser console, but not visible. The issue was another input field having the same id, and it was not evident because of several JSP files included, many of them having forms.

Espagnole

Answer 11

I even set autocomplete to "off" with no result. I ended up putting the next jquery snippet at the document.ready event.

myForm.find("input").each((i, el) => {
  $(el).val($(el).attr("value"));
});

Adittionally, this would be the equivalent in pure es2015:

document.querySelectorAll("myForm input").forEach(el => {
  el.value = el.getAttribute("value");
});

If your not using a precompilor like Babel and you need compatibility for old browser's versions, change the "(el) =>" for "function(el)". I tried both codes in my scenario and worked fine.

Sitra

Answer 12

For me the problem was that I had multiple inputs with the same id. I could see the value in the field, but reading it via javascript gave an empty value because it was reading a different input with the same id - I was surprised that there was no javascript error, just could not read the values I could see in the form.

Bathos

Answer 13

For me it was wrong number format: Chrome expected "49.1", but ASP.NET passed "49,1", and it just didn't display!

<input type="number" value="49,1"/>    // Should have been 49.1 !!!

Tamalatamale

Posted as separate answer because this could be missed if added as a comment to @chakeda 's answer. – Tamalatamale

Answer 14

I had the same problem of @Rob Wilkerson, a onchange() was cleaning the value of the input with "", so i changed to 1. Such a dumb problem!

HTML
<input class="form-control inputCustomDay" type="text" id="txtNumIntervalo" onkeyup="changeTipoOptions()" value="1" min="1" />

Jquery
$("#txtNumIntervalo").val(1);

Ebonize

Answer 15

Mine was related to Angular.

I just ran into the same issue recently and realized that when you use NgIf to display a template, the said template does not automatically use display the data from the variables in the component.

As a quick fix I used ngClass just to Hide it and display it.

Meijer

Answer 16

If anybody happens to be here because their input with type="dateTime-local" is not displaying the value... the value must be in format YYYY-MM-DDThh:mm

Alimentation