How to make a radio button choice limit the range of a number input box-CodePudding

I'm sure this is answered somewhere but I can't find it. I have a radio button and a number field like below. I want to make it so that when the first radio button is checked, the number box has a max value of 1 and when the other radio button is checked, the max value restriction is removed.

So like this when the first radio is checked

<form action="test.html" method="POST">
      <input id="mySelect" type="radio" name="isunique" value="0"> Unique
      <input id="mySelect" type="radio" name="isunique" value="1"> Not Unique
      <input type="number" min="0" max="1" step="1" name="qty">
</form>

And like this when the second radio is checked

<form action="test.html" method="POST">
      <input id="mySelect" type="radio" name="isunique" value="0"> Unique
      <input id="mySelect" type="radio" name="isunique" value="1"> Not Unique
      <input type="number" min="0" step="1" name="qty">
</form>

I tried doing it by using a function call

onchange="unlimitqty()"

where the function is

function unlimitqty() {
  var x = document.getElementById("mySelect").value;
    document.getElementById("qlimit").innerHTML = "<input type=\"number\" min="0\" step=\"1\" name=\"qty\">\n";
}

And another function limitqty()

function limitqty() {
  var x = document.getElementById("mySelect").value;
    document.getElementById("qlimit").innerHTML = "<input type=\"number\" min=\"0\" max=\"1\" step=\"1\" name=\"qty\">\n";
}

Then I put this in the form

<p id="qlimit">

That produces the right behavior on the page, but the variable does not get passed through when the form gets submitted.

I'm not really looking to fix this approach, I feel there must be a better way. There must be some javascript built in function that limits number fields. I just haven't been able to find it.

Any help would be hugely appreciated!

CodePudding user response：

You can limit the maxvalue of your number-input by setting it's attribute. The first parameter of the setAttribute function takes the value you want to change e.g: 'max', 'min', etc. The second parameter takes the value you want to set to the first parameter. In your case you can change the max value to 1 by doing this:

document.getElementById('numberboxID').setAttribute('max', 1);

To make the value be infite you can change the parameter 2 to Infinity:

document.getElementById('numberboxID').setAttribute('max', Infinity);

CodePudding user response：

Here is one way of doing it:

const inp=document.querySelector("input[type=number");
document.getElementById("max1").onchange=ev=>{
  inp.max=ev.target.checked?"1":undefined;
}

<form action="test.html" method="POST">
  <label><input type="checkbox" id="max1"> max 1</label>
  <input type="number" min="0" step="1" name="qty" style="width:50px">
</form>

I took the liberty of replacing your two radio buttons with a single checkbox. This avoids the initial undefined stage (with no radio button selected) and is easier to operate in any case.