Java set maximum and minimum value of the textbox according to the option selected from dropdown menu

Question

This is my html code:

<!DOCTYPE html>
<html>
<head>
<script>
function Check(e) {
  var text=document.getElementById("text");
  var inputnum = document.getElementById("number");
  if (e.value == "option1") {
    inputnum.min = "5";
    inputnum.max = "10";
    text.innerHTML ="input the value from 5 to 10";
  } else if (e.value == "option2") {
    inputnum.min = "20";
    inputnum.max = "30";
    text.innerHTML ="input the value from 20 to 30";
  }
}
</script>
</head>
<body>


<select id="selectMe" onChange="Check(this);">
   <option value=""></option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
</select>
<br><br><br>

<input name="number" type= "number" id="number">
<p id="text"></p>
</input>

</body>
</html>

I need little modification in this code which sets the minimum and maximum value of the number input box as per the option selected from drop down.

For eg: If user selects option1 then the minimum value must be 5 and maximum most be 10. Similarly If user selects option2 then the minimum value must be 10 and maximum most be 20. And it also should show the message (inside html below the text box (not as alert message) showing please input the value from xxx to xxx

Please help me with this. thankyou in advance.

Simone Rossaini · Accepted Answer · 2020-07-07T11:25:26.703

0

See my example, when selectbox change (so use onChange), active a function check the value of selectbox then change min/max of input

  var text=document.getElementById("text");
  var inputnum = document.getElementById("number");
window.onload = function() { inputnum.disabled=true; text.innerHTML =""; };
function Check(e) {

  if (e.value == "option1") {
    inputnum.disabled=false;
    inputnum.min = "5";
    inputnum.max = "10";
    text.innerHTML ="input the value from 5 to 10";
  } else if (e.value == "option2") {
    inputnum.disabled=false;
    inputnum.min = "20";
    inputnum.max = "30";
    text.innerHTML ="input the value from 20 to 30";
  } else if (e.value == "empty"){
  inputnum.disabled=true;
  text.innerHTML ="";
  
  }
}

<select id="selectMe" onChange="Check(this);">
  <option value="empty"></option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
</select>
<br /><br /><br />

<input name="number" type="number" id="number" />
<p id="text"></p>

the function must be in <script></script> tag.

Add after comment:

i add onload function, where page is load input is disabled.

edited Jul 07 '20 at 11:25

answered Jul 07 '20 at 09:30

Simone Rossaini

8,115
1
13
34

I have modified the code but it is not working please have alook – Nalim Yednap Jul 07 '20 at 10:07
use script at bottom – Simone Rossaini Jul 07 '20 at 10:09
i add msg on `
`
– Simone Rossaini Jul 07 '20 at 10:10
thankyou sir this code worked BUT there is still one problem. When i pass a valid value it will show valid result but when i do back after giving the valid value it again starts accepting invalid values also dont know why – Nalim Yednap Jul 07 '20 at 10:58
mmh i don't understand. can you reformulate? – Simone Rossaini Jul 07 '20 at 11:01
Suppose I entered value 6 selecting option1 and submitted a form ok. Then it allows me to submit the form. It generates no error. But after succesfull submission if i pressed back buttton in the browser and again enter value 22 instead of 6 it doesnot show error. Why it is accepting that invalid value when back button is pressed? OR should i refresh the page each time to get the script worked – Nalim Yednap Jul 07 '20 at 11:12
try new code and say me if it's ok. acept my question and mark up please. – Simone Rossaini Jul 07 '20 at 11:25
Previous code was better than this. This even didnt work. Please try this in php if u can solve this https://stackoverflow.com/questions/62755542/using-if-then-with-multiple-conditions-along-with-operators-in-php – Nalim Yednap Jul 07 '20 at 11:33
start to acept my answer. i solve your question problem. – Simone Rossaini Jul 07 '20 at 11:35

Java set maximum and minimum value of the textbox according to the option selected from dropdown menu

1 Answers1