How do I limit character input length depending on options selected from dropdown?
Example: When OptionA-1 (value) is selected the input character limit will be only 2 digits (you can't write more than 2 digits) and When OptionB-1 (value) is selected input limit will be 5 digits (also you can't write more than 5 digits to the input box)? I've tried everything I could but I can't find any solution.
Is there a way to create jQuery or JavaScript Function and set maxLength of a number input? using ID of input box and id of options (like OptionA, OptionB, OptionC etc...). Thanks for reading and your help!
<select id="options" name="searchtype">
</optgroup>
<optgroup label="OptionA" >
<option id="OptionA" value="0/2">OptionA-1</option>
<option id="OptionA" value="0/4">OptionA-2</option>
<option id="OptionA" value="0/0">OptionA-3</option>
<option id="OptionA" value="0/1">OptionA-4</option>
<option id="OptionA" value="0/5">OptionA-5</option>
<option id="OptionA" value="0/3">OptionA-6</option>
</optgroup>
</optgroup>
<optgroup label="OptionB" >
<option id="OptionB" value="1/2">OptionB-1</option>
<option id="OptionB" value="1/4">OptionB-2</option>
<option id="OptionB" value="1/0">OptionB-3</option>
<option id="OptionB" value="1/1">OptionB-4</option>
<option id="OptionB" value="1/5">OptionB-5</option>
<option id="OptionB" value="1/3">OptionB-6</option>
</optgroup>
</select>
<input id="searchbox" type="number" size="40"></input>
Here is an example how to do that. I stored the maxLength values in a data-max attribute of every option. Maybe you could store them in the values, but I don't know, if you need the values for another reason.
const select = document.querySelector("#options");
const input = document.querySelector("#searchbox");
let maxLength = 0;
function setMax(input, max) {
max = parseInt(max);
maxLength = max;
let number = "";
for (let i = 0; i < maxLength; i++) {
number += "9";
}
input.max = number;
validateLength(input, max);
}
function getMax(select) {
const selected = select[select.selectedIndex];
const maxLength = parseInt(selected.dataset.max);
return maxLength;
}
function validateLength(input, length) {
input.value = input.value.substr(0, length);
}
select.addEventListener("change", (event) => {
const max = getMax(select);
setMax(input, max);
});
const max = getMax(select);
setMax(input, max);
input.addEventListener("input", () => {
validateLength(input, maxLength);
});<form>
<select id="options" name="searchtype">
<optgroup label="OptionA">
<option id="OptionA" value="0/2" data-max="2">OptionA-1</option>
<option id="OptionA" value="0/4" data-max="2">OptionA-2</option>
<option id="OptionA" value="0/0" data-max="2">OptionA-3</option>
<option id="OptionA" value="0/1" data-max="4">OptionA-4</option>
<option id="OptionA" value="0/5" data-max="2">OptionA-5</option>
<option id="OptionA" value="0/3" data-max="2">OptionA-6</option>
</optgroup>
<optgroup label="OptionB">
<option id="OptionB" value="1/2" data-max="5">OptionB-1</option>
<option id="OptionB" value="1/4" data-max="5">OptionB-2</option>
<option id="OptionB" value="1/0" data-max="5">OptionB-3</option>
<option id="OptionB" value="1/1" data-max="3">OptionB-4</option>
<option id="OptionB" value="1/5" data-max="7">OptionB-5</option>
<option id="OptionB" value="1/3" data-max="2">OptionB-6</option>
</optgroup>
</select>
<input id="searchbox" type="number" size="40">
<button type="submit">Submit</button>
</form>I would use HTML data attribute.
It allows you to add values to an HTML tag.
Reference to HTML data attribute documentation.
Based on it, it is my solution -
const selectRef = document.getElementById('options')
const inputRef = document.getElementById('searchbox')
selectRef.addEventListener('change',function(e){
const selected = selectRef.options[selectRef.selectedIndex]
const newMax = selected.dataset.value
inputRef.setAttribute('max',newMax)
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select id="options" name="searchtype">
</optgroup>
<optgroup label="OptionA" >
<option id="OptionA" value="0/2" data-value="2">OptionA-1</option>
</optgroup>
</optgroup>
<optgroup label="OptionB" >
<option id="OptionB" value="1/2" data-value="5">OptionB-1</option>
</optgroup>
</select>
<input id="searchbox" type="number" size="40" max=2 ></input>
</body>
</html>Please note if the user enters data by writing and not by clicking the validation won't catch it. In this case, I recommend you add an event listener to the input and check the input size.