Clear Input When Choosing Another Option

Question

Clear Input When Choosing Another Option

Navigation

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

4

What I want to do

The guy has on the form the option to register individual or legal entity. I want it when it clicks on the person's radio, it clears the input from legal person, and vice versa.

What I did

I feel like a fool. I made this code and then searched the internet to validate if there was anything wrong. To do the test, I typed the CNPJ, and then clicked on individual, and filled in the CPF. After that I returned to a legal entity, and the CNPJ was still inside, so I clicked again on a physical person, and the CPF had disappeared, leaving only the CPF placeholder, but when I clicked to fill in the amount appeared.

MyCode

HTMLForm

<sectionclass="col col-md-3">
     <label for="id_receiver-destiny_type_people_0">
         <input id="id_receiver-destiny_type_people_0" type="radio" value="juridic" checked name="receiver-destiny_type_people">
             Pessoa Jurídica
     </label>
</section>
<section class="col col-md-3">
    <label for="id_receiver-destiny_type_people_1">
        <input id="id_receiver-destiny_type_people_1" type="radio" value="individual" name="receiver-destiny_type_people">
            Pessoa Física
    </label>
</section>

<input id="id_receiver-cnpj" name="receiver-cnpj" placeholder="CNPJ" type="text" />
<input id="id_receiver-cpf" name="receiver-cpf" placeholder="CPF" type="text" />

jQuery

$("input[name='receiver-destiny_type_people']").bind('click', $.proxy(this.checkCompanyType, this));

checkCompanyType: function(){
    companyType = $("input[name='receiver-destiny_type_people']").val();
    if(companyType == "juridic") {
        $("#id_receiver-cpf").val("");
    } else if (companyType == "individual") {
        $("#id_receiver-cnpj").val("");
    }
},

javascript jquery

asked by anonymous 21.10.2015 / 18:02

2 answers

3

@Marques's answer is correct. I just added the mask part back into my code. For even cleaning, when you click on the field it returns with the previous value. With this setting of masks, it prevents it.

checkCompanyType: function(){
    companyType = $("input[name='receiver-destiny_type_people']:checked").val();
    if(companyType == "juridic") {
        $("#id_receiver-cpf").val("");
        $('#id_cpf, #id_receiver-cpf').mask('?999.999.999-99', {placeholder: "_"});
    } else if (companyType == "individual") {
        $("#id_receiver-cnpj").val("");
        $('#id_cnpj, #id_receiver-cnpj').mask('?99.999.999/9999-99', {placeholder: "_"});
    }
},

21.10.2015 / 18:55

Scrollbar Customization INSERT in two different tables - MySql

score 4 · Accepted Answer

You do not have to include the currently checked filter to get the selected option.

$ ("input [name = 'receiver-destiny_type_people']: checked"). val ()

$("input[name='receiver-destiny_type_people']").bind('click', $.proxy(this.checkCompanyType, this));

function checkCompanyType(){
    companyType = $("input[name='receiver-destiny_type_people']:checked").val();

    if(companyType == "juridic") {
        $("#id_receiver-cpf").val("");
    } else if (companyType == "individual") {
        $("#id_receiver-cnpj").val("");
    }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="col col-md-3">
     <label for="id_receiver-destiny_type_people_0">
         <input id="id_receiver-destiny_type_people_0" type="radio" value="juridic" checked name="receiver-destiny_type_people">
             Pessoa Jurídica
     </label>
</section>
<section class="col col-md-3">
    <label for="id_receiver-destiny_type_people_1">
        <input id="id_receiver-destiny_type_people_1" type="radio" value="individual" name="receiver-destiny_type_people">
            Pessoa Física
    </label>
</section>

<input id="id_receiver-cnpj" name="receiver-cnpj" placeholder="CNPJ" type="text" />
<input id="id_receiver-cpf" name="receiver-cpf" placeholder="CPF" type="text"/>