HTML Select Form with Option to Enter Custom Value

HTML select form with option to enter custom value

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

Update: As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality. See caniuse for detailed browser support.

It looks like this:

<input type="text" list="cars" /><datalist id="cars">  <option>Volvo</option>  <option>Saab</option>  <option>Mercedes</option>  <option>Audi</option></datalist>

HTML select form with option to enter value does not store the entered value as object field in django

DeptXYZ or any department entered manually does not exist in the database.

dept has a ForeignKey relationship with EmployeeInformation model. Hence, to store DeptXYZ or any other department entered manually, the department should exist in the database. Since, DeptXYZ is not present in the database, Django is storing null instead.

To store DeptXYZ or any other department entered manually, you will need to create the corresponding department first. You will need to override the form_valid() method of AddEmployeeInfo as described here to create and save the manually entered department first.

Hope this help!

Can we customize select option form?

You can definitely do so, although it will require some JavaScript.

In your HTML, create the select element as you would usually do, and enclose it inside a div. The select element will contain the actual options that you want to be displayed, while the div will be targetted by JavaScript to create your custom select which can be customized with CSS afterward. W3C offers a really good example with the required HTML, CSS, and JS.

While the previous gives you more control and customization, here is an alternative with no JavaScript whatsoever.

how to have a custom select option

You can just use radio buttons, give them a group so only one can be choosen and style them nicely.

I think you don't want to send your number input so you can assign it to a different form just like I did by giving our form form="this-form" and applied form="different-form" to number input, the form you assign it to doesn't have to exist.

For your last radio to send information written in number input I used some Javascript so everytime input changes the change is assigned to value of the last radio button.

let number = document.getElementById("number");
let radio = document.getElementById("radio-5");

number.addEventListener("input", () => {
    radio.value = number.value;
})

let form = document.querySelector("form");

form.addEventListener("submit", (event) => {
    let input = document.querySelector("input[name=group]:checked");
    event.preventDefault();
    console.log(input.value)
})

.container {
    border: 1px solid black;
    width: 200px;
    padding: 1em;
    border-radius: 20px;
    flex-direction: column;
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

input[type=submit] {
    display: block;
    margin: 1em auto 0;
}

input[type=number] {

    margin: auto;
    max-width: 80px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
</head>
<body>
    <div class="container">
        <form form="this-form">
            <div class="flex-container">
                <label for="group">Number 1</label>
                <input type="radio" required value="Number 1" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <label for="group">Number 2</label>
                <input type="radio" value="Number 2" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <label for="group">Number 3</label>
                <input type="radio" value="Number 3" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <label for="group">Number 4</label>
                <input type="radio" value="Number 4" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <input id="number" form="different-form" type="number" >
                <label for="num">Num Here</label>
                <input  type="radio" id="radio-5" name="group" value="">
            </div>
            <input type="submit" id="submit" value="Submit">
        </form>
    </div>
</body>
</html>

HTML select drop-down with an input field

You can use input text with "list" attribute, which refers to the datalist of values.

<input type="text" name="city" list="cityname">    <datalist id="cityname">      <option value="Boston">      <option value="Cambridge">    </datalist>

HTML Select Form with Option to Enter Custom Value