I'm trying to get the browser to autocomplete searches based on values from a list.
here is the relavant part from the dbc.Input docs:
list (string; optional): Identifies a list of pre-defined options to suggest to the user. The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.
here is my code:
but still, when I start typing there are just no suggestions:
what's wrong?
You are providing string instead of variable, this doesn't seem right?
Related
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.
I'm making a dojo widget that parses a <select> object along with its <options> and creates a facade select object out of other elements with accessibility and such and a hidden select element. While trying to figure out how to be able to prevent a user from being able to use an <option> without a value, I attempted to try to utilize some facets from this question which says to add an option with an empty string value and make it selected and disabled.
That's all well and good, but the user is still able to submit the form if the "placeholder" option is still selected. To fix this, I made the <select> required so that the user would have to pick an option.
Now, in Firefox, trying to submit this form without choosing a different option pops up the tooltip on the select saying "Please select an item in the list". In Chrome though, the form submits just fine with no warning. IE11 is the same as Chrome, Opera as well.
Considering 3 out of the 4 browsers I tested in, the form ignores the required is it safe to say that that in this case, the requirement is a gray area or is Firefox the only one implementing this correctly? Either way, I'm going to need to find another way to get this to work.
HTML
<form action="#" method="get">
<select name="sel" required>
<option disabled selected>Hello</option>
<option value="1">World</option>
<option value="2">Foo</option>
<option value="3">Bar</option>
</select>
<button type="submit">Send</button>
</form>
Edit
I guess one of the things that confuses me is that whenever I inspect the <option> its value is automatically set to its innerText which is kind of expected and happens in all browsers. However, whenever the form is submitted, that value is not actually given as the value of the select. Instead, there is no value, considering that there is no query param appended. I'm using the following to grab the value:
document.getElementsByTagName("option")[0].value;
Edit 2
Another thing, according to the HTML spec that first option without a value should be the placeholder label option:
If a select element has a required attribute specified, does not have
a multiple attribute specified, and has a display size of 1; and if
the value of the first option element in the select element's list of
options (if any) is the empty string, and that option element's parent
node is the select element (and not an optgroup element), then that
option is the select element's placeholder label option.
And stemming from that this select option is suffering from being missing:
Constraint validation: If the element has its required attribute
specified, and either none of the option elements in the select
element's list of options have their selectedness set to true, or the
only option element in the select element's list of options with its
selectedness set to true is the placeholder label option, then the
element is suffering from being missing.
Does "Suffering from being missing mean that the form should not submit"?
You need to give it an empty value:
<option disabled selected value="">Hello</option>
If an option doesn't have a value attribute, it defaults to the text in the option. A required input will be considered valid if the value is not the empty string, so you need to provide the attribute explicitly.
I think the discrepancy in behavior between the browsers is permitted because the original HTML was not valid. The specification says
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1, then the select element must have a placeholder label option.
In the original code, there was no placeholder label option because the first option's value was not the empty string. So it violated the must have requirement in the second paragraph. This gives the browsers some license to interpret the HTML differently.
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
I have a form and it contains multiple input fields. What if i don't provide an id or name to each and every field. will that field be submitted with some default name or won't be submitted at all.
This is just a query. No code involved.
Thanks
Form controls without names cannot be successful controls and will not be submitted.
The value of a control without a name will not be included in the submitted form data.
See HTML 4:
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
or HTML 5:
If any of the following conditions are met, then skip these substeps for this element … The field element is not an input element whose type attribute is in the Image Button state, and either the field element does not have a name attribute specified, or its name attribute's value is the empty string.
The id is irrelevant to the success of a control. Only the name matters there.
The id is still important to include as it is the best way to associate a <label> element with a control (and has other uses via JS and CSS).
The form will still get submitted but you won't be able to get the 'post' values when the form has been submitted.
I have access to form field in the administrative view.
Example
<label>Number:</label>
<input type="text" name="title" size="50"/><br/>
I do not have access to modify the html syntax, the only thing i can do is updating the form field with a value.
In the form field i want to update it with a number. I also want to have a link assigned to that number.
So when i click that number it directs us to the link.
Is there a way i can do that?
This method is tedious, but you could use the jQuery nth-selector to select the specific form element that you are dealing with.
http://api.jquery.com/nth-child-selector/
This method is risky, however, since you might add other form elements before it, altering the index of your target input element.
Afterwords, you could use the .val() jQuery method to change your input value.
Nonetheless, again, this method is not safe because the index of the form element could change. I would beg the powers of be to be able to add an ID or some identifying attribute to that form element.