CODEWITHSUNDEEP
htmlcakephpcakephp-1.3
Rob Wilkerson
Rob Wilkerson

Reputation: 41256

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

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.

Upvotes: 63

Views: 173611

Answers (16)

Hope
Hope

Reputation: 11

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

Upvotes: 1

Hugobop
Hugobop

Reputation: 480

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

Upvotes: 0

Tgold brain
Tgold brain

Reputation: 419

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.

Upvotes: 0

Fanky
Fanky

Reputation: 1795

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

Upvotes: 8

vini b
vini b

Reputation: 49

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

Upvotes: 0

Thophile
Thophile

Reputation: 21

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

Upvotes: 2

alexkovelsky
alexkovelsky

Reputation: 4208

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

Upvotes: 0

user6096790
user6096790

Reputation: 430

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.

Upvotes: 0

Kewal Shah
Kewal Shah

Reputation: 1260

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

Upvotes: 1

Fabio Sungurlian
Fabio Sungurlian

Reputation: 37

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.

Upvotes: 0

Rob Wilkerson
Rob Wilkerson

Reputation: 41256

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.

Upvotes: 127

J.BizMai
J.BizMai

Reputation: 2787

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

Upvotes: 30

marco bonfigli
marco bonfigli

Reputation: 168

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.

Upvotes: 0

Chihuahua Enthusiast
Chihuahua Enthusiast

Reputation: 1580

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.

Upvotes: 4

Suamere
Suamere

Reputation: 6258

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.

Upvotes: 16

Tyler
Tyler

Reputation: 2126

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

Upvotes: 1

Related Questions