-2

Possuo dois radiobuttons, os quais possuem a função de mostrar/esconder um input cada, esses dois inputs não podem receber valores juntos, apenas o input que está dentro do radiobutton selecionado, gostaria que quando selecionasse um radiobutton apagasse o input do outro radiobutton, tem alguma maneira simples de fazer isso?

código html:

<input type="radio" name="formapag" value="debito" id="deb" onclick="document.getElementById('debito').style.display='inline';document.getElementById('credito').style.display='none';" />Venda
<input type="number" placeholder="R$0,00" min="0,01" step="0.01" name="debito" id="debito" placeholder="valor" style="display:none;">
<input type="radio" name="formapag" value="credito" id="cred" onclick="document.getElementById('debito').style.display='none';document.getElementById('credito').style.display='inline';" />Compra
<input type="number" placeholder="R$0,00" min="0,01" step="0.01" name="credito" id="credito" placeholder="valor" style="display:none;">
1
  • Esses radio têm o mesmo name? Podes mostrar o HTML?
    – Sergio
    Commented 25/10/2017 às 11:25

3 Respostas 3

1

Recomendo você separar seu HTML e JavaScript, por questões de legibilidade. Logo, pode fazer da seguinte maneira:

(function () { 
   let radioButtons = document.querySelectorAll('.radio-limpar-inputs');
   for (let i = 0; i < radioButtons.length; i++) {
     radioButtons[i].addEventListener('click', limparInputs);
   }
  
   function limparInputs () {
     let inputs = document.querySelectorAll('.limpar-ao-selecionar-radio');
     for (let i = 0; i < inputs.length; i++) {
       inputs[i].value = '';
     }
   }
})();
<input type="radio" class="radio-limpar-inputs" name="formapag" value="debito" id="deb" onclick="document.getElementById('debito').style.display='inline';document.getElementById('credito').style.display='none';" />Venda</a>
<input type="number" class="limpar-ao-selecionar-radio" placeholder="R$0,00" min="0,01" step="0.01" name="debito" id="debito" placeholder="valor" style="display:none;">
<br><br><input type="radio" class="radio-limpar-inputs" name="formapag" value="credito" id="cred" onclick="document.getElementById('debito').style.display='none';document.getElementById('credito').style.display='inline';" />Compra</a>
<input type="number" class="limpar-ao-selecionar-radio" placeholder="R$0,00" min="0,01" step="0.01" name="credito" id="credito" placeholder="valor" style="display:none;">

1

você pode criar uma função que executa isso:

document.getElementById("id_do_seu_input").value = "";

por ex:

function zeraMeuID(){

     document.getElementById("id_do_seu_input").value = "";

}

ai no click do botão vc coloca chamando essa função

1

É só adicionar comandos extras em cada onclick que você já usa respectivamente:

document.getElementById('credito').value=''
document.getElementById('debito').value=''

Ficando assim:

<input type="radio" name="formapag" value="debito" id="deb" onclick="document.getElementById('debito').style.display='inline';document.getElementById('credito').style.display='none';document.getElementById('credito').value=''" />Venda
<input type="number" placeholder="R$0,00" min="0,01" step="0.01" name="debito" id="debito" placeholder="valor" style="display:none;">
<input type="radio" name="formapag" value="credito" id="cred" onclick="document.getElementById('debito').style.display='none';document.getElementById('credito').style.display='inline';document.getElementById('debito').value=''" />Compra
<input type="number" placeholder="R$0,00" min="0,01" step="0.01" name="credito" id="credito" placeholder="valor" style="display:none;">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .