I want to create a select input, where there are some options that can be selected by the user. And as the last option, there should be a text input area where the user can type anything if he does not want to choose from the given option. How can I do that?
Currently, I am using this code in the HTML section
<div class="form-group">
<label for="postCategory">Catagory</label>
<select class="form-control" name="category">
<option name="table1" value="1" selected="true" disabled="disabled">Select A Category</option>
<option name="category1" value="general">General</option>
<option name="Category2" value="tech">Tech</option>
</select>
</div>
In the backend, I am receiving the input by the following code after submitting the form.
app.post('/compose', function(req, res) {
console.log(req.body.category);
});
How can I add a text input in the last option of the select if a user does not want to choose the general or tech category and wants to create a new category of his own? How can I receive that from the backend?
It will be very difficult if we want to have a text input as an option. The best we can do is to have like the below,
<input placeholder="Select a category" type="text" list="categories" name="category" />
<datalist id="categories">
<option name="table1" value="1" selected="true" disabled="disabled">Select A Category</option>
<option name="category1" value="general">General</option>
<option name="Category2" value="tech">Tech</option>
</datalist>
PS: <datalist> only works in the latest versions of Chrome, Safari and Firefox. Most of the contemporary browsers will also support this except for older versions of the above browsers and Internet Explorer. Please refer to https://caniuse.com/datalist for usage info.