Can javascript "show" a field's input value? - javascript

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.

Related

Re-render input field without keeping current value / Shadow DOM

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.

Where does Blazor store form data?

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.

CSJS Not Updating Computed Field

I very seldom use CSJS, but in this case I'm trying to get it to update a computed field. While the field has the value updated so that I can get to it with an alert, I can't get it to display on the XPage. I've tried using an editable field with Read Only checked, but the data doesn't appear on the XPage with it either.
I'm invoking a CSJS script block and I know you need to refresh to get the change to display, but I've put a panel around the field and tried it with that and a div. Neither produces an error message, but nor does the value display.
I'm using XSP.partialRefreshGet("#{id:remaining}"); right after I set the value. I've tried it with .partialRefreshPost, which doesn't do anything, but then I read in Stephan Wissel's post "Meet the XSP object" that "...For POST the refreshId must point to a form..." and this XPage is not attached to a form. I have also tried using the parameter immediate:true.
I've read Teresa Monahan's article "Client Side JavaScript Libraries in XPages", Serdar Basegmez's "10 Mistakes You and Every XPages Developer Make", anything I can find on the web, as well as the "Mastering XPages" book. I know this shouldn't be that difficult, so I believe I'm just missing something (probably stupid).
Per the above, neither the XPage, nor the particular field is bound to any form. This is on the first tab of a tabbed table, and is just displaying a calculated value. The value does not need to be saved anywhere.
I am invoking the function in my agent by using onChange="Testing()" in dijit/form/ComboBox selections because I want the tiny boxes and again, I don't need the field values after the selections have been made.
Here is the simple text in the script block:
function Testing(){
XSP.getElementById("#{id:remainingPts}").value = "100";
var rewards = XSP.getElementById("#{id:numOfRewards1}").value;
alert("rewards: " + rewards);
XSP.partialRefreshGet("#{id:remaining}");
}
And here is what the field looks like:
<xp:panel id="remaining">
<xp:text escape="true" id="remainingPts" value="0">
</xp:text>
</xp:panel>
What am I doing incorrectly?
I think xp:text is rendered as a <span> tag, in which case you need to set .innerHtml() instead of .value(). See How do I change the text of a span element in JavaScript. You won't need to refresh to see the change.

jQuery 1.7.1 - Text input's 'value' not updating in Firebug Inspect element but is on screen

Using jQuery 1.7.1, I have noticed that the value attribute/property of a text input field does not update when I view it in Firebug's Inspect Element tool, but does update on the screen, i.e. in the actual visible text box.
For example, when changing the value of a text with the following (used inline):
jQuery(function() {
jQuery('#event').val("test");
});
the text box itself displays test but Firebug's Inspect Element does not represent the change:
<input type="text" value="" placeholder="" id="event" name="event" class="input-text">
I'm sure I have seen the value change in Firebug before using older jQuery, however not in this scenario, nor that of a colleague of mine also using jQuery 1.7.1.
Is this a quirk/bug of this particular version of jQuery or have I missed a step somewhere?
The value attribute always shows the defaultValue. Firebug never displayed the current value in the attribute.
The current value is always visible on the screen.
This has nothing to do with Firebug or jQuery, it is the HTML standard.
The attribute value never changes, only the property.
http://jsfiddle.net/cc5Pm/1/
var input = document.getElementsByTagName("input")[0];
setInterval(function(){
input.value = parseInt(input.value) + 1;
console.log(input.value, input.getAttribute("value"));
},1000);
Sometimes Firebug doesn't always reflect some changes, I have noticed this before.
If there is a refresh I haven't found it. You can either turn Firebug off and on again or just use the console to check the value has changed
console.log($("#event").val());
I've seen this too: i.e the value attribute of an input does NOT change in Firebug. Last time I paid attention to this was a while ago (like 2 years). Incidentally, I was using jQuery too, but I really doubt jQuery has anything to do with this. It's just how Firebug works (or at least worked).
Of course, you could still use the Firebug console to definitively get the value:
console.log( $('input#event').val() )

How do I get the title attribute of an option tag that I am setting in it using my xml

I need to populate the dropdown and onchange of this dropdown I have to set the values in two text fields. I have set the value attribute for option tag and I can use it to put this in my first text box. Now my second textbox should have the value coming from the same xml. I cannot use value attribute twice in xml, so what I did was that I added an title attribute to this option tag. And now I want this title to be put in my second text box, but it doesn't happen. here us what I am suing:
$("#country").change(function() {
$(".firsttextbox").attr("value",$(this).val()); //this works
$(".secondtextbox").attr("value",$(this).attr('title').val()); //this doesn't work
})
$(".secondtextbox").attr("value",$(this).find("option:selected").attr("title"));
Added this line to solution, Example can be found at http://jsfiddle.net/pHpr2/
Using $(".secondtextbox").attr("value",$(this).attr('title').val()); fins the <select title="title"> that is the issue was with you.
I'm a little confused by what you're trying to do here. I think, however, that the solution is probably simple.
attr retrieves the attribute (or property, in some cases) as a string (or at least it does for the title attribute) so there is no need to use val() on it – indeed you can't!
$(".secondtextbox").attr("value",$(this).attr('title'));
Note that it would probably suffice simply to use this.value and this.title, depending on whether the code is in fact XML or if it's HTML.
Instead of $(this).attr('title').val(), try using only $(this).attr('title')

Categories