How to clear the value of an INPUT after selecting the radiobutton?

Asked

Viewed 1,286 times

-2

I have two radiobuttons, which have the function of showing/hiding a input each, these two inputs cannot receive values together, only the input that is within the radiobutton selected, would like when selecting a radiobutton to erase the input from the other radiobutton, has some simple way to do this?

html code:

<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;">
javascript html html5

  • Those radio have the same name? You can display the HTML?

3 answers

1


I recommend you separate your HTML and Javascript for legibility reasons. So you can do it this way:

(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

you can create a function that performs this: 

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

for ex:

function zeraMeuID(){

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

}

ai at the click of the button you place calling this function

1

Just add extra commands to each onclick that you already use respectively:

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

Thus remaining:

<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;">

Browser other questions tagged javascript html html5

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