Add inputs if it is filled with a certain value

Asked

Viewed 44 times

-4

I have a registration screen that has 30 inputs and in it I will report values from 0 to 99 and I have another Total input. I need that, when certain quantities of inputs are filled in, the Quantity of Inputs is multiplied by 5. Example:

<input type="text" class="form-control" id="numero1" name="numero1" value="10"><br>
<input type="text" class="form-control" id="numero2" name="numero2"value="15"><br>
<input type="text" class="form-control" id="numero3" name="numero3"value="20"><br>
<input type="text" class="form-control" id="numero4" name="numero4" value="25"><br>
<input type="text" class="form-control" id="numero5" name="numero5" value="30">

Note that among the 30 Inputs existing on the page, I had only 5 filled. Therefore, this quantity will be multiplied by 5 showing the calculation in the TOTAL Input.

<label>Total: </label><input type="total" class="form-control" id="total" name="total">

php javascript

  • Sorry but your question and explanation are not clear enough to understand what you want.

  • I need the calculation to be done according to the number of fields (inputs) filled and not by the value contained in each of them E that this quantity is multiplied by R$: 5.00

  • In this case, you want the value of the total to be 25? In case 5 filled inputs multiplied by 5. That would be it?

  • Exactly, Rebekah.

1 answer

1


Put inside a <div id="divInputs"> only the necessary inputs the question, ie the 30.

In each input the onBlur event that occurs (in this case triggers the javascript function) when an object loses focus onblur="quantComValue()" You can choose another event that fits your needs better

function quantComValue(){

// Obtenha o div que você deseja examinar.
var div = document.getElementById("divInputs");

// Obtem todos os inputs dentro do seu div
var inputs = div.getElementsByTagName('input');

// Obtem o número de inputs encontrados
var totalInputs = inputs.length;

// Percorra-os e verifique qual deles tem um valor.
var inputsComValue = 0;
for(var i=0; i<totalInputs; i++)
    if(inputs[i].value!=='')
        inputsComValue +=1;   
        
/*Caso queira preencher o total a partir de 
determinado numero de inputs preenchidos
utilize um if informando o valor, ex: >2 */

if (inputsComValue>2){

     document.getElementById('total').value = inputsComValue*5;
     
}

}
<div id="divInputs">
<input onblur="quantComValue()" type="text" class="form-control" id="numero1" name="numero1" value=""><br>
<input onblur="quantComValue()" type="text" class="form-control" id="numero2" name="numero2"value=""><br>
<input onblur="quantComValue()" type="text" class="form-control" id="numero3" name="numero3"value=""><br>
<input onblur="quantComValue()" type="text" class="form-control" id="numero4" name="numero4" value=""><br>
<input onblur="quantComValue()" type="text" class="form-control" id="numero5" name="numero5" value=""><br>
<input onblur="quantComValue()" type="text" class="form-control" id="numero6" name="numero6" value=""><br>

</div>
<input type="total" class="form-control" id="total" name="total" placeholder="total">

  • Leo, thank you so much. That’s exactly what I needed.

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.