How to clear the value of an INPUT after selecting the radio button?

Question

How to clear the value of an INPUT after selecting the radio button?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

-2

I have two radiobuttons , which have the function of showing / hiding an input each, these two inputs can not receive values together, only the input that is inside the radiobutton selected, I would like that when you select a radiobutton erase the input from the other radiobutton, is there any 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

asked by anonymous 25.10.2017 / 13:23

3 answers

1

You can create a function that does this:

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

for example:

function zeraMeuID(){

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

}

in the click of the button you put this function calling

25.10.2017 / 13:43

1

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

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

Looking like this:

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

25.10.2017 / 13:44

Object is not persisted when using Entity Framework How do I remove a part of a string?

score 1 · Accepted Answer

I recommend you separate your HTML and JavaScript for readability. So you can do it as follows:

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