0
<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>I have two input where the first receive the value of 25, wanted to know how to make the second not receive a value less than the first.
4
Use the attribute [min][1].
<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required min="25">4
If you’re going to do this dynamically, use Javascript with the event blur, equalling the value if lower.
The min can be used for validation purposes if you are using a form to be submitted.
If this is not the case, you can use the event blur down below:
document.querySelector("[name=valor-em-dinheiro]").onblur = function(){
// valor do primeiro input. Se for vazio vira 0
var total = document.querySelector("[name=total]").value || 0;
// valor do segundo input
var dindin = this.value;
// se o segundo for menor que o primeiro, iguala
if(Number(dindin) < total) this.value = total;
}<input type="number" name="total" value="25" required>
<br>
Digite um valor menor e tecle TAB:
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>If you submit the form, you can change the min dynamically:
document.querySelector("[name=total]").oninput = function(){
// altera o min do segundo input de acordo com o valor digitado
document.querySelector("[name=valor-em-dinheiro]").min = this.value;
}
document.querySelector("[name=valor-em-dinheiro]").oninput = function(){
// seleciona o primeiro input
var total = document.querySelector("[name=total]");
// altera o min de acordo com o valor de total
this.min = total.value;
}<form>
<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>
<br>
<button>Enviar</button>
</form>but to forbid the user to enter a smaller number this function of typing the tab to activate the function would not be cool for me.
I understand. You will submit this form?
Yes, I will submit
The problem is this: if the guy wants to type "200", it is greater than 25, only when typing the initial number "2", it is less than 25. So you have to have some final event to know what value the guy typed in. When he makes a Blur, it is because he has already typed the value he wanted and left in the input.
It does not have to type in TAB. TAB was just an example to exit the field.
Ahhh got it, agr if I wanted to do this with a div instead of input
Let’s go continue this discussion in chat.
I usually put the trigger on the event change. Whether the guy leaves the field (Blur) or submit the form (Submit), the change will be executed.
@Lipespry The problem is that the change only has an effect on the arrows, and IE doesn’t even have an arrow. Then it will have the same effect as Blur, because the change is only triggered when it takes the focus off the field.
@Sam I always used change. I was curious about your answer and went to test! I put 2 triggers in an input: change and Blur. I edited the input and pressed Enter (Submit). In Chrome only change was fired. IE both were fired...
1
document.querySelector('[name=valor-em-dinheiro]').onchange = function() {
console.log('change disparado');
if(this.value < document.querySelector('[name=total]').value) {
alert('Valor em dinheiro deve ser maior ou igual ao total!');
// ...
}
}
// No Chrome (atualizado) não é acionado o blur caso o usuário pressione "enter" para submeter o formulário.
//document.querySelector('[name=valor-em-dinheiro]').onblur = function() {
// console.log('blur disparado');
//}
document.querySelector('[id=formul]').onsubmit = function(ev) {
if(document.querySelector('[name=valor-em-dinheiro]').value < document.querySelector('[name=total]').value) {
ev.preventDefault();
console.log('submit interrompido');
} else {
ev.preventDefault(); // LEMBRE-SE DE COMENTAR ESTA LINHA APÓS TESTAR.
console.log('submit não interrompido');
}
} <form action="/dev" method="get" id="formul">
<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>
<input type="submit" value="Submit">
</form>Use as an example. Change as needed. In order to test, I put a alert() and a preventDefault() if the user tries to submit the form with the lower value.
Thus (onchange), the trigger will be triggered even when the user presses enter after setting the value of the second field.
Browser other questions tagged php javascript html5
You are not signed in. Login or sign up in order to post.
But the value of the first and dynamic
– Vision Development
You can change the minimum value with JS too, doing
document.getElementById("elemento").min = "25";, for example.– João Pedro Henrique