If HTML5 specifies that there is no value for the "checked" attribute that is reliably interpreted as the checkbox being unchecked*, is the behavior of the following JSX code potentially inconsistent between browsers? (It seems to work as expected for me in Chrome and IE.)
<input type="checkbox" checked={node.props.checked} />
If so, what is the standard way to accomplish this, considering that the following JSX is invalid?
<input type="checkbox" {node.props.checked? "checked" : ""} />
What values for checked and selected are false?
You will need to conditionally add the entire checked attribute, not just the value of the attribute. That way, if you don't add the attribute at all, you will reliably get an unchecked checkbox.
If you are using ReactJS, then according to this answer:
React is intelligent enough to omit the attribute if the value you
pass to it is not truthy.
Related
<input type="radio" :value="myValue" v-model="value" />
I'm trying to create a radio button and wrap it in a component, so value becomes a variable. The problem is that I'm getting the following error:
:value="myValue" conflicts with v-model on the same element because the latter already expands to a value binding internally
I've tried to replace v-model with direct bindings but I cannot replicate the same functionality. Why does this error appear in this case? This is taken directly from official docs for the radio buttons.
v-model is just shorthand for :value="someVar" #input="someVar = $event". meaning you are assigning the value twice. Depending on your need you can do :value="someVar" and then have a custom function handle the input like so:
#input="someFunc" this function would accept the input (by default) and then you could update myVar as you desire.
See here for a more detailed explanation
I'm new to React, sorry if my questions are trivial.
In React, if I write:
<input value="" />
then it will be an read-only field, and React forces me to add an onChange handler as:
<input value={this.state.greeting} onChange={this.handleChange} />
where handleChange() update component's state.greeting, therefore value gets updated too
Below are my questions:
Q1-why <input value="" /> is not read-only in plain html but read-only in React? How does React make it read-only
Q2-I found that if I write the code as below it also works, the input is not read-only
<input onChange={this.handleChange} />
and isn't that this approach better and more concise? because the internal value will get updated automatically in the browser, therefore we don't need to include an value attribute to read the data back from the state, which is unnecessary in most of times, so why I always see code like:
<input value={this.state.greeting} onChange={this.handleChange} />
Additional info:
some says it is controlled form elements that needs to have value attribute, but why we need to have a value attribute to read from the state? and when we type sth into the input, the onChange handler already updates the state, so it is still controlled.
To know how React makes your tags readonly, you will need to study the source-code that runs at your end and/or view the generated HTML. If still unsure about it, then you might want to send your first question to the authors of the tool.
The state is not on the server, unless you are polling or doing something of the like. It's in your browser as well. The value property specifies the initial value of your HTML element, that is, before you do anything your tag will have a value. In your case, your tag is controlled by React, but you need to initialize it. Benefits:
you will have the initial value
you will have a more readable code
your code will be written in the React-way, so you will not need to worry of unpleasant surprises
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 want to use prop() to set the attribute of a checkbox to checked.
When I use prop("checked",true) I can visually see that the checkbox is checked, but if I look at the HTML there is no attribute value called checked.
For example:
<input type="checkbox" class="my_class" checked>
is what I would expect to see after using prop("checked", true).
However, I don't see any change in the HTML code. I want to later reference whether or not the attribute checked is set, but since there is not attribute called checked in the HTML, then I'm unable to reference it.
When using prop() you are changing the property and not the attribute, so the changes can't be seen in a DOM inspector, but it is for all intents and purposes changed.
To later see if the element is checked, you'd do:
$('.my_class').is(':checked')
which would return true when checked or false when unchecked, regardless of what you might see in a DOM inspector.
Is there a specific reason you wouldn't use attr() for this application?
If not, that's what you should be using instead of prop()
I need to access to a value in a checkbox, the atribute value has content, so i need to place the id somewhere else i created a label, but i have not access to that value
alert(check[i].label); // doesnt work
where else can i place a value in checkbox.
Please dont write that i can do this
<input type='checkbox' id='bla' name='mybla' vlaue='myvalue'> Hy
Where can i place some other values ?
I tryed with this
<input type='checkbox' id='bla' name='mybla' vlaue='myvalue' label='myothervalue'> Hy
first i get all checkbox ect... and in the for loop i did this
alert(check[i].label); // doesnt work
How can i do that?
It is indeed possible to store the extra data as a custom attribute on the <input> element. When you want to read the value, you can do it like this:
alert(check[i].getAttribute('label'));
Since you have tagged the question jQuery, here's the trendy version:
alert($(check[1]).attr('label'));
See these discussions if you are woried about using custom HTML attributes.
When I am being tempted to do this, I prefer to use a related hidden element to store the "other value". It feels cleaner to me, and I also don't have to wade through the validation warnings that otherwise could come at me.
Is that something you can use here?