Interestingly, some input elements of Blazor Forms don't have the data stored in HTML as value (attribute) of the input-field. The fields doesn't even have a value attribute!
When I inspect and use 'Store as global object' functionality in chrome and check the value of the element in console (temp1.value), I can see the value.
I'm wondering where this value is being stored in the browser.
The value attribute is not set by changing the DOM's .value property.
Consider the following minimal example:
<input id=time>
<script>setInterval("time.value = new Date()", 1000);</script>
<input type=button onclick=alert(time.value) value=read>
You can inspect the clock and see that there's never a value attribute, yet the input's value property can be both setted and getted by script.
Thus, the value of the form input in your question can come from almost anywhere. It's likely embedded deep inside the other library support code that makes it easy to shuttle data back and forth, but that's speculation on my part. It's a JS variable of some sort, that much we know. The main thing is that attributes are not needed when making heavy use of JS.
Related
I am working on a network graph editor with an inspector view on the right side.
The inspector is a separate web component built with Lit.
When I click on a node I would like to be able to view and change properties of the node, like the node title, in the inspector view. That works well as long as I don't change any value in the input field. Once I changed the value the input field keeps it's manual value even if set a new value during re-rendering.
To provide an example. This is how the web inspector of Safari shows the HTML element:
If I now change the node value it looks like this:
Now, I change to the second node I get this:
As you can see, the value attribute changed, even the id is different. However, Safari (and Chrome), keep the existing value, hence showing me the wrong title for the second node.
The input field shows the node's value each time, as long as I don't change the value manually. After that the input field maintains the manually set value.
The corresponding line in render() is
<input id="text_${this.currentElement.id}" value="${this.currentElement.text}"/>
I specifically change the id but that has no impact on the result.
What do I need to do in order to 'loose' the manual value during re-rendering? Many thanks in advance!
You should use .value to bind to value property.
<input id="text_${this.currentElement.id}" .value="${this.currentElement.text}"/>
You could read more on property-expressions.
I have an input bound to an object property and with a filter applied to it.
<input value="{{object.field | filter}}">
The problem is that if I programmatically change object.field, the value displayed inside the input doesn't change, however in the DOM Inspector I see the correct (new) value. I verified to digest/apply the changes to the scope and the object.field variable does change correctly, the issue seems to be only in the input displayed value.
I cannot provide an example since there's too much code involved.
Does anyone know where I should look for errors??
No need to set value in that way. ng-model takes care of it.
Valid syntax is:
<input ng-model="object.field">
For filtering you can look at this answer:
Using angularjs filter in input element
I think you should use ng-model to bind your data into input box instead {{expression}}
I've seen a few articles here trying to bind computed fields but my preferred solution; getComponent is just not working for me. I'd rather not have hidden "real" fields. Here's what I have. A computed VAT Tax percentage field called VP
<xp:text escape="true" id="VP" value="#{FInvoiceDoc.VP}" style="text-align:right">
<xp:this.converter>
<xp:convertNumber pattern="0.00"></xp:convertNumber>
</xp:this.converter>
</xp:text>
Here is one of the calculations where I set the value of this field;
XSP.getElementById("#{id:VP}").innerHTML = tmp.toFixed(2);
tmp calculates correctly, VP displays the correct expected value on the page.
Then in my querySaveDocument event, I do the following
var VP = getComponent("VP").getValue();
FInvoiceDoc.replaceItemValue("VP",VP);
and what gets stored is a Null value. I've even confirmed that the VP variable is null by doing a "Print (VP)" command after setting the VP variable then checking the log. There's got to be something I'm missing.
At page submit you don't get a computed text field's value back to server as it is read only.
You are looking for a solution where you can:
show a document's field in read mode
set new values to this field on client side with CSJS
save the value back to document's field on submit
The first two points working already with your solution.
The third point you can achieve with adding an input text field "VPdoc" which is bound to your document's field "VP" and hidden with style="display:none".
<xp:inputText
id="VPdoc"
value="#{FInvoiceDoc.VP}"
style="display:none">
<xp:this.converter>
<xp:convertNumber pattern="0.00"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
At submit copy the current value (innerHTML) from computed text field "VP" to input text field "VPdoc" using the following CSJS code in submit button:
<xp:this.script><![CDATA[
XSP.getElementById("#{id:VPdoc}").value =
XSP.getElementById("#{id:VP}").innerHTML
]]></xp:this.script>
This way the value which was set on client side to field "VP" is saved to document.
You do NOT assign a value, but replace the html- representation by some html code. With that you simply break the element and kind of "convert" it to a stupid div (sorry, don't know how to explain better)...
Never mess around with the frontend: the element is bound to an item in your document. Modify that value, and the element representing it will represent the change.
And: you do not need that lines of code in querysavedocument to save back the value... This will be done automatically, that's what binding (value property of element) is for...
Perhaps, instead of manipulating the innerHTML, you used
getComponent("VP").setValue(tmp.toFixed(2));
Would that work? You'd be setting the value of the component then, I think.....
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.
I have a script as below
document.getElementById('lan').innerHTML=lan;
document.getElementById('city').innerHTML=city;
document.getElementById('text1').value=city+'|'+lan;
The variables lan and city contain text, for example 'kalmar'.
What I want to do is to take the contents of these two variables and combine them and set that combined string to be a form field's value, as to be able to use the regular submit function of the form to save it to database.
In Chrome and FF it works perfectly, but not in IE (surprise).
If I do alert(document.getElementById('text1').value) to see what value it holds IE only prints
[object]
Any clues as to what has happened/what I can do to make it compatible?
It's a big document but I cut and paste the essentials here:
HTML-element to receive the final combined value
<input type='hidden' name='text1' id='text1' value=''>
HTML-element (link) to assign value to above HTML element:
<div id="searchResult">Kalmar i Kalmar<br></div>
function populateFields(lan,city)
{
document.getElementById('lan').innerHTML=lan;
document.getElementById('city').innerHTML=city;
document.getElementById('text1').setAttribute('value',city+'|'+lan)
document.getElementById('save_button').style.zIndex='auto';
alert('LAN: '+document.getElementById('lan').innerHTML);
alert('CITY: '+document.getElementById('city').innerHTML);
alert('TEXT1: '+document.getElementById('text1').value);
}
Also - the alert() checks now print the correct values (i.e. Kalmar|Kalmar) but the form still doesn't save teh value that I have set the text1 field to!
In IE you could use setAttribute('value',city+'|'+lan).
Hope it fits your needs.
So I discovered there were a number of issues here.
First, the function populate_fields() had local variables named the same as some html elements in the document. IE does not like that, hence it printed [object] when I tried to read the value stored in my variables (since there was already an html element/DOM object with the same name, I guess my function variables just never declared).
Once that was sorted out, I also realized that the form didn't save my value, though it seemed that the form item had received the correct value (I checked using alert).
Turns out that I had a nested form, I.e.
<form>
<form>
</form>
<input last inputfield of first form>
</form>
and that made IE totally disregard the last form field... for some reason none of the other browsers had a problem...
Thanks for the attention guys!