Error checking radio with if

Question

Error checking radio with if

Navigation

#1 by (1 votes)

0

I'm trying to do a simple check for if and else, but I'm not getting it, because it only returns true when in fact in case I'm trying to test it was to return false.

Here's how I'm trying:

function FinalizarCompra(){
  var ainput = document.formMonteCaixa.creditCard.checked;
  var ainput2 = document.formMonteCaixa.creditCard2.checked;
  var ainput3 = document.formMonteCaixa.creditCard3.checked;
  var ainput4 = document.formMonteCaixa.creditCard4.checked;
  var ainput5 = document.formMonteCaixa.creditCard5.checked;
  if(ainput5 == false){
    alert('Por favor, selecione o Tipo de Endereço.');
    alert(ainput5);
  }else{
    alert('funciono');
    alert(ainput5);
  }
}

I'm calling this function by a click of a button that is out of this could be what is causing this?

Radius HTML

<div class="ModeloCaixaBloco1 cc-selector">
    <p><strong>ESCOLHA O MODELO DE SUA CAIXA</strong></p>  
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4A">
          <input id="Caixa Basica" alt="Caixa Basica" title="Caixa Basica" type="radio" name="creditCard" value="20" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixaBasica" alt="Caixa Basica" title="Caixa Basica" for="Caixa Basica"></label>
          <span>Básica</span>
        </div>
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4B">
          <input id="Caixa Premium" alt="Caixa Premium" title="Caixa Premium" type="radio" name="creditCard" value="40" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixaPremium" alt="Caixa Premium" title="Caixa Premium" for="Caixa Premium"></label>
          <span>Premium</span>
        </div>
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4C">
          <input id="Caixa Cesta" alt="Caixa Cesta" title="Caixa Cesta" type="radio" name="creditCard" value="50" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixaCesta" alt="Caixa Cesta" title="Caixa Cesta" for="Caixa Cesta"></label>
          <span>Cesta</span>
        </div>
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4D">
          <input id="Caixa 50 Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" type="radio" name="creditCard" value="160" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixa50Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" for="Caixa 50 Tons"></label>
          <span>50 Tons</span>
        </div>
    </div>

It is not the complete one, because it would be very extensive, but the other blocks are practically the same thing.

javascript html

asked by anonymous 11.06.2018 / 02:32

1 answer

Retrieve captured id with JS in modal Compare values using SQL

score 1 · Accepted Answer

What you should do is to check that radio returns a value, and is not checked, since they are several.

Do this to validate, changing checked to value :

function FinalizarCompra(){
  var ainput = document.formMonteCaixa.creditCard.value;
//  var ainput2 = document.formMonteCaixa.creditCard2.checked;
//  var ainput3 = document.formMonteCaixa.creditCard3.checked;
//  var ainput4 = document.formMonteCaixa.creditCard4.checked;
//  var ainput5 = document.formMonteCaixa.creditCard5.checked;
  if(ainput == false){
    alert('Por favor, selecione o Tipo de Endereço.');
    alert(ainput);
  }else{
    alert('funciono');
    alert(ainput);
  }
}

// só para não dar erro
function calcularPrimeiro(){}

<form name="formMonteCaixa">
<div class="ModeloCaixaBloco1 cc-selector">
    <p><strong>ESCOLHA O MODELO DE SUA CAIXA</strong></p>  
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4A">
    <input id="Caixa Basica" alt="Caixa Basica" title="Caixa Basica" type="radio" name="creditCard" value="20" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixaBasica" alt="Caixa Basica" title="Caixa Basica" for="Caixa Basica"></label>
    <span>Básica</span>
  </div>
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4B">
    <input id="Caixa Premium" alt="Caixa Premium" title="Caixa Premium" type="radio" name="creditCard" value="40" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixaPremium" alt="Caixa Premium" title="Caixa Premium" for="Caixa Premium"></label>
    <span>Premium</span>
  </div>
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4C">
    <input id="Caixa Cesta" alt="Caixa Cesta" title="Caixa Cesta" type="radio" name="creditCard" value="50" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixaCesta" alt="Caixa Cesta" title="Caixa Cesta" for="Caixa Cesta"></label>
    <span>Cesta</span>
  </div>
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4D">
    <input id="Caixa 50 Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" type="radio" name="creditCard" value="160" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixa50Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" for="Caixa 50 Tons"></label>
    <span>50 Tons</span>
  </div>
</div>
</form>
<button onclick="FinalizarCompra()">Finalizar compra</button>