Limiting Character Input on HTML depending on different options?-CodePudding

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>

CodePudding user response：

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");

function setMax(input, max) {
  input.max = max;
}

function getMax(select) {
  const selected = select[select.selectedIndex];

  const maxLength = parseInt(selected.dataset.max);

  let number = "";

  for (let i = 0; i < maxLength; i  ) {
    number  = "9";
  }

  return number;
}

select.addEventListener("change", (event) => {
  const max = getMax(select);

  setMax(input, max);
});

const max = getMax(select);

setMax(input, max);

<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>

CodePudding user response：

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.