Restrict the input field value of a form to options only - html

Question

I am using a form to insert the value to the database.I want the stationerytype field to insert only the option value.My code allows user to insert the typed value.i dont want to insert this typed value.
There are two datalist for the option and the value of datalist depends upon the value selected on 'purpose' field. My code is
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<script>
function random() {
document.querySelector('[name="stationerytype[]"]').value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
}
</script>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="form-control" autocomplete="off" required>
<datalist id="datalist1">
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
</datalist>
<datalist id="datalist2">
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
</datalist>
</td>

Answer 1

Refering to this post, you have to set the pattern attribute of your input. If the pattern has been set, if the user select any other option other than the value from data list, the input will be invalid.
If the input is not a valid one, you can clear the value of the input on change event.
Working fiddle
function random() {
const input = document.querySelector('[name="stationerytype[]"]');
input.value = ""
var a = document.getElementById('purpose').value;
if (a === "Meeting") {
var datalist = "datalist1";
} else if (a === "Departmental") {
var datalist = "datalist2";
}
const options = Array.from(document.getElementById(datalist).options).map(option => option.value);
input.setAttribute("list", datalist);
input.setAttribute("pattern", options.join('|'));
}
function ondataListSelect() {
const input = document.getElementById('stationerytype');
if (!input.validity.valid) {
input.value = '';
}
}
<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required >
<option></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
<td>
<input type="text"
name="stationerytype[]"
id="stationerytype"
class="form-control"
onchange="ondataListSelect()"
autocomplete="off"
required>
<datalist id="datalist1">
<option value=""></option>
<option value="MEETING PEN">MEETING PEN</option>
<option value="NOTEPAD">NOTEPAD</option>
<option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
</datalist>
<datalist id="datalist2">
<option value=""></option>
<option value="A4 GREEN REAM">A4 GREEN REAM</option>
<option value="A4 WHITE REAM">A4 WHITE REAM</option>
<option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
</datalist>
</td>