Limit the maximum value of an input number and at the same time show that value in an input text

Question

I have a form where for each type of expense there will be a limit value to be sent by the user. What I am using in my form is the type of the expense (being an option), the amount of the expense to be sent by the user (being a number) and I used a readonly with, for example, "R$30 limit".

The problem is that this value would change as the user changes the type of expense. For example: Assuming the user selects an X expense that has a limit of R$20

• If he selects this expense, he can only put in the value field (which is enabled by ) the maximum of R$20, more than this will be filled the R$20.

In my code below, I did only the test so that there is this field where the user can not change (in case the "R$30 limit").

<select name="tipoDespesa" required>
        <option value="" disabled selected>Tipo</option>
        <option>Almoço</option>
        <option>Jantar</option> 

</select>
        <input type="number" name="precoDespesa" placeholder="R$" id="valor" step=".01" required placeholder="Insira um valor!">
        <p><input type="text" name="limiteDespesa" id="limite" readonly value="Limite de R$30"></p>

Answer 1

I believe that the best way to do this is with Javascript, because with it you can take the event when the user changes the type of expense and use to change values of other fields without the need to send to the server.

<select name="tipoDespesa" required>
<option value="" disabled selected>Tipo</option>
<option>Almoço</option>
<option>Jantar</option> 

</select>
        <input type="number" name="precoDespesa" placeholder="R$" id="valor" step=".01" required placeholder="Insira um valor!">
        <p><input type="text" name="limiteDespesa" id="limite" readonly value="Limite de R$30"></p>

<script>
  let tipoDespesa = document.getElementsByName("tipoDespesa")[0]
function mudaLimiteDespesa(valor){
  let limiteDespesa = document.getElementsByName("limiteDespesa")[0];
  limiteDespesa.value = valor
}
 tipoDespesa.addEventListener("change", function(despesa){
   switch(tipoDespesa.value) {
  case "Almoço":
    mudaLimiteDespesa("Limite de R$30")
    break;
  case "Jantar":
     mudaLimiteDespesa("Limite de R$20")
    break;
  default:
     mudaLimiteDespesa("Limite de R$0")
}
});
</script>

If you don’t master js for web follow some link that can help you.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement https://www.w3schools.com/js/js_htmldom.asp

Answer 2

The complete solution goes through JQUERY

When selecting a option

• the value do input text mute
• the maximum value for the input number mute
• When submitting the form is sent only if the condition max (maximum value) is satisfied
  • O atributo max especifica o valor máximo para um elemento <input>

	$( document ).ready(function() {
	
		$('.select').change(function (e) {
		    var selectedIndex = $('select').prop("selectedIndex");
		    var selectedOption = $('select').find("option")[selectedIndex];
		    
		    $('input[type=number]').attr('max', $(selectedOption).data('max'));
		    
		    $("#limite").val("Limite de R$" + this.value);
		    
		});
	
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<form>
	
	<select size="1" name="options" class="select">
	  <option value="" disabled selected>Tipo</option>
	  <option value="20" data-max="20">Almoço</option>
	  <option value="30" data-max="30">Janta</option>
	</select>
	
	     <input type="number" name="precoDespesa" placeholder="R$" id="valor" step=".01" required min="1" max="30">
	     <p><input type="text" name="limiteDespesa" id="limite" readonly value="Limite de R$30"></p>
	        
	<input type=submit>
	
	</form>