Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
Related
Facing a weird issue. I have an input field in my react app.
I am setting the value of my input field using the defaultValue prop.
But my input field is not populating. Its showing as empty ( "" ). But i can see the value in its value attribute in the dom.
Here are the react props of that input
Any idea what i am missing here?
You could use defaultValue only on uncontrolled components, but your input have onChange prop, and that makes it controlled. You should set your default value through the value prop.
https://reactjs.org/docs/uncontrolled-components.html - here some info about it.
I am using react-rails gem to work with ReactJS for Rails.
The weird thing is if I set a non-empty value property when rendering React component, the input field won't receive any keyboard event
This doesn't work!
React.DOM.input
type: 'text'
className: 'form-control'
value: "ABC"
But it works
React.DOM.input
type: 'text'
className: 'form-control'
value: ""
Any idea guys? Thanks a lot!
I have answered to one question similar to this, i don't know how to share that answer to you. So i am re-typing that.
In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.
In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.
In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.
Instead of using call back function, we can use valuelink property to add value to input text. like:
getInitialState: function(){
return {
value:'' //for empty text value
}
}
For value link, we have to give state value instead of variable value. For complete understanding please refer:
https://facebook.github.io/react/docs/two-way-binding-helpers.html
whenever we enter the text in text box, the state get updated and the value of the input text set to state value.
I would like to retrieve an value from a different input to my button's input value.
I have an input, which is hidden and an input in which my costumers can change the value as they desire. I would like to retrieve this value and put into my hidden inputs value, when clicked on a button.
I've been adviced to use a OnSubmit code, but I'm not very familiar with it and can't seem to get it working, so I was hoping to meet someone who may help me.
The input in which I would like to retrieve the value from my other input is coded as shown:
input type="hidden" name="quantity"
The input in which i would like to retrieve value FROM is coded as shown:
INPUT TYPE=TEXT NAME="PROD_VK_1.4" SIZE=3 MAXLENGTH=3 value=1 onChange="CalculateTotal(this.form)"
You can retrieve value from the above input tag using the js function getElementsByName
It returns a collection of elements of the name specified.So if there is only one element you can access as the zeroth element by accessing zeroth index as if it is an array.See the below example
var input_val = document.getElementsByName("PROD_VK_1.4")[0];
To put the value to the hidden input use the following code
document.getElementsByName("quantity")[0].value = input_val;
More on getElementsByName
You should have an ID attribute on your hidden variable; suppose it is id="quantity". Also an ID attribute on the sending data will make things easier; make it "PROD_VK_1.4". Then, if you want the hidden variable to get a copy of the visible variable when the form is submitted, you'd code something like this:
<form action="whatever" onsubmit="moveData();" >
the moveData function would look something like this:
function moveData() {
document.getElementById("quantity").value =
document.getElementById("PROD_VK_1.4").value;
}
I haven't tested this, but if there are no fumble-finger errors, it ought to work.
If you didn't want to hook this to the submit event, perhaps you could edit your question a bit.
I am curious... why do you want to do this when you could just use the value of the original input element when the form is submitted?
If both of the <input>s have ids, you can do this:
document.getElementById('to').value = document.getElementById('from').value;
Here is an example:
http://jsfiddle.net/b2eDj/5/
I'm having a problem with a template: I'm trying to display a form for changing a value, in which the user enters the current value in a textarea and the old value is kept inside a hidden field for auditing purposes. This value is generally some HTML, and when I render the page this HTML in the hidden field seems to get partially rendered: the value attribute of my hidden field gets closed by the first quotation marks inside the entered HTML, and the rest of the HTML spews out onto my page. I've tried using the escape decorator but that hasn't changed anything.
Firstly, a better solution might be to keep the audit value in a separate model field defined with editable=False. You can still perform checks against the value in a form's clean method:
def clean(self):
cleaned_data = super(SomeForm, self).clean()
if instance.the_audit_field == cleaned_data['the_editable_field']:
...raise a validation error?
You can also modify the value of the audit field from within the model's save method.
Secondly, assuming you must do it the way you are now, let me address the non-escaped value in your template. I assume you're using something like the following:
<textarea value="{{ form.the_audit_field.value }}"></textarea>
You should instead use the following:
<textarea>{{ form.the_audit_field.value }}</textarea>
Note, the value goes inside the textarea, instead of in the value attribute of it.
An even better way to do it is to simply allow Django to render the field for you like the following:
{{ form.the_audit_field }}
I am using the djFilteringSelect control to show values in a dropdown as user type a value.
The lookup and typehead is working fine. The user type a letter and the dropdown allow the user to select a value which is then displayed in the dropdown field.
If the user now decide to remove the value first selected so that the combobox is empty and leave the field, then the first value in the list is now automatically filled in.
The consequence of this is that if the user have added a value there is no way to remove the value and leave the box emtpy.
I am using required=false for both the control and the dojo attribute but it does not seem to help. There are also a few other djFilteringSelect attributes I have tried like "Autocomplete" and "trim" but it does not work
Here is the code
<xe:djFilteringSelect id="test" type="select" store="jsondata" searchAttr="data" required="false" labelType="html" invalidMessage="Not valid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djFilteringSelect>
Initally the field is not required, but if the user have entered a value it is required.
My question is if there a way to prevent the djFilteringSelect control to always populate the field if I have previously added a value
I found someone who solved this in another stack overflow topic, by creating an empty entry in my data store. but I could not get this to work
Dojo: Select of empty value for FilteringSelect while required=false
I do this quite a lot. Right now I don't have a working sample to show you (since I moved to bootstrap - and have to code the selects by manually adding select2 controls) but something like this should do it...
I add an "empty" value at the top of my select - and that seems to work no matter whether I am using a combobox, djCombobox or combobox with select2 from bootstrap. My markup typically looks like:
<xp:comboBox id="inputLocationSelector" value="#{User.catchListType}" disableClientSideValidation="true">
<xp:selectItem itemLabel="(none)" itemValue=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[${Configuration.meta.listLocationTypeOptions}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
Then you could specify "(none)", "All" or " " for the "not-selected" value depending on your needs.
Validation is a different thing so just specifying "required=false" does not give you the "empty" value.
/John