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.

I assume the issue remains the same if you remove all the `class`es from this div? — Brad, Apr 24 '11 at 17:42
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 ? :) — Caspar Kleijne, Apr 24 '11 at 17:44
is the text perhaps the same colour as the background? (you never know! :D) — Halcyon, Apr 24 '11 at 17:47
or .. perhaps you need to explicitly close the input tag with /> instead of just > (you have malformed XHTML) — Halcyon, Apr 24 '11 at 17:48
@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. — Rob Wilkerson, Apr 24 '11 at 17:51
Per Frits's suggestion, try running your page through the [w3c validator](http://validator.w3.org/#validate_by_input) — Tyler, Apr 24 '11 at 17:52
Disable styles, disable javascript, then see what happens. This makes no sense by itself, there has to be a simple explanation. — Wesley Murch, Apr 24 '11 at 17:55
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. — Nik Chankov, Apr 24 '11 at 20:54

score 122 · Accepted Answer · edited Jan 08 '19 at 03:43

122

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.

edited Jan 08 '19 at 03:43

Neuron

5,141
5
38
59

answered Apr 24 '11 at 23:36

Rob Wilkerson

40,476
42
137
192

2

Congrats on solving your problem. You should accept your own answer if you've solved your own question. – Kevin Ji Apr 25 '11 at 04:25
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 – Maciek Semik Apr 10 '14 at 04:32
3

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?! – Michael Böckling May 27 '15 at 18:19
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. – Master DJon Jan 19 '17 at 08:01
hi guys.. how do i prevent this clearing/see where this clearing is happening? – swyx Jun 19 '17 at 17:37
Solved my issue when i debug my jQuery, i was doing .val('') – PriyankMotivaras Apr 13 '21 at 06:22

score 27 · Answer 2 · answered Dec 13 '18 at 22:19

27

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"/>

answered Dec 13 '18 at 22:19

J.BizMai

2,621
3
25
49

2

Same with chrome ! – Buddha_Peace Apr 12 '19 at 03:55

score 16 · Answer 3 · answered Jun 14 '16 at 14:03

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.

score 8 · Answer 4 · edited Apr 08 '21 at 16:47

8

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

edited Apr 08 '21 at 16:47

isherwood

58,414
16
114
157

answered Oct 16 '15 at 13:48

Fanky

1,673
1
18
20

Same here on FF 45.0 – Filip Krstic Mar 14 '16 at 03:09
Instead of refreshing, I selected the url and pressed the enter key on the PC. The new value appeared. – Polymath Aug 11 '22 at 01:09

chakeda · Answer 5 · 2018-05-31T19:43:44.933

4

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.

edited May 31 '18 at 19:43

answered May 31 '18 at 19:38

chakeda

1,551
1
18
40

Thanks! This was my problem. I had '-' signs in the value I tried to insert. – Joel Fernando Jul 27 '21 at 21:10
me too... i was populating a numeric input with a result from toLocaleString() -- d'oh! – Benjamin Johnson Dec 20 '22 at 00:37

score 1 · Answer 6 · answered Feb 23 '19 at 13:09

1

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

answered Feb 23 '19 at 13:09

Kewal Shah

1,131
18
29

score 1 · Answer 7 · answered Apr 24 '11 at 17:59

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']

score 1 · Answer 8 · edited Feb 11 '20 at 14:54

1

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

edited Feb 11 '20 at 14:54

SHR

7,940
9
38
57

answered Feb 11 '20 at 14:23

Thophile

11
1

score 0 · Answer 9 · answered Jul 11 '18 at 16:35

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.

score 0 · Answer 10 · answered Feb 21 '19 at 16:16

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.

score 0 · Answer 11 · answered Feb 27 '19 at 22:45

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.

score 0 · Answer 12 · answered Dec 11 '19 at 01:28

0

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 !!!

answered Dec 11 '19 at 01:28

alexkovelsky

3,880
1
27
21

Posted as separate answer because this could be missed if added as a comment to @chakeda 's answer. – alexkovelsky Dec 11 '19 at 01:29

score 0 · Answer 13 · edited May 28 '20 at 15:53

0

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);

edited May 28 '20 at 15:53

Jared Forth

1,577
6
17
32

answered May 28 '20 at 14:55

vini b

59
10

score 0 · Answer 14 · edited Dec 26 '21 at 02:19

0

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.

edited Dec 26 '21 at 02:19

cigien

57,834
11
73
112

answered Dec 26 '21 at 00:57

Tgold brain

399
5
13

score 0 · Answer 15 · answered Sep 16 '22 at 22:30

0

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

answered Sep 16 '22 at 22:30

Hugobop

125
10

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

15 Answers15

Linked