Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

202
Visualizações
Using JS variable as the property of HTML input Form

I have a form which have two field "optin" and "Qty".The quantity field of the form accept the number.The minimum number which can be entered in this field(QTY) depends upon the the value of the Option field i.e. If the option fiels value is red then the minimum value propert of the Qty field should be 5 and if it is 'Red' then the minimum property of the Qty field should be 10. I am doing it by the given code but its not working.

<td><input type="text" name="option" onkeydown="random()" class="form-control"  >

<script>
            function random()
            {
                
                var a=document.getElementById('option').value;
                if(a==="red")
                {
                    var minimum = '5';
                }
                else if(a==="green")
                {
                    var minimum= '10';
                }
                    
            }
       </script>
       <input type="NUMBER" name="qty"  class="form-control" min=<?php var minimum ?>  ></td>
over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

<!-- This is the code you provided -->
<td><input type="text" name="option" onkeydown="random()" class="form-control"  >

<script>
            function random()
            {
                
                var a=document.getElementById('option').value;
                if(a==="red")
                {
                    var minimum = '5';
                }
                else if(a==="green")
                {
                    var minimum= '10';
                }
                    
            }
       </script>
       <input type="NUMBER" name="qty"  class="form-control" min=<?php var minimum ?>  ></td>

Let's see... First of all lets change your if else case with a switch:

switch(a){
    case "red":
        var minimum = 5;
        break;
    case "green":
        var minimum = 10;
        break;
}

Now I will remove the php tag and add a line to change the min value of the input.

<td><input type="text" id="option" onkeydown="random()" class="form-control"  />

<script>
            function random()
            {
                var a=document.getElementById('option').value;
                switch(a){
                    case "red":
                        var minimum = 5;
                        break;
                    case "green":
                        var minimum = 10;
                        break;
                }
                document.getElementById("input").setAttribute("min", minimum)//this line adds an attribute or sets it to a given value
            }
       </script>
       <input type="NUMBER" id="input"  class="form-control" /></td>

Now let's see this code in action! Run the following snippet.

<td><input type="text" id="option" onchange="random()" class="form-control"  />

<script>
            function random()
            {
                var a=document.getElementById('option').value;
                switch(a){
                    case "red":
                        var minimum = 5;
                        break;
                    case "green":
                        var minimum = 10;
                        break;
                }
                document.getElementById("input").setAttribute("min", minimum)//this line adds an attribute or sets it to a given value
            }
       </script>
       <input type="NUMBER" id="input"  class="form-control" /></td>

And done! Also, I changed the onkeydown to onchange.

over 4 years ago · Santiago Trujillo Relatório

0

  1. Added more rows in case there are many rows with the same fields.
  2. Secondly, I have added an event listener instead of direct function call but you can do either.
  3. Extracting into calculatingMinimunQuantity for easier readibility and calling setAttribute (min) there.

var options = document.querySelectorAll(".option");
options.forEach(function(option) {
  option.addEventListener("change", function() {
    calculatingMinimunQuantity(option);
  });
});

function calculatingMinimunQuantity(option) {
  var minimum = 0;
  var value = option.value;
  if (value === "red") {
    minimum = "5";
  } else if (value === "green") {
    minimum = "10";
  }
  //   getting the quantity input field
  option.nextElementSibling.setAttribute("min", minimum);
}
<td>
  <div>
    <input type="text" class="option form-control" placeholder="option" name="option" />
    <input type="NUMBER" class="form-control" name="qty" placeholder="quantity" />
  </div>
</td>

<td>
  <div>
    <input type="text" class="option form-control" placeholder="option" name="option" />
    <input type="NUMBER" class="form-control" name="qty" placeholder="quantity" />
  </div>
</td>

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda