Clear Input When Choosing Another Option

Asked

Viewed 195 times

5

What I wish to do

The guy has in the form the option of registering natural or legal person. I want that when he clicks on the radio of the individual, he cleans the legal person input, and vice versa.

What I did

I feel like a fool. I made this code and then looked on the Internet to verify if there was something wrong. To take the test, I typed in the CNPJ, and then clicked in person, and filled out the CPF. After that I returned to legal person, and the CNPJ was still inside, so I clicked again in person, and the CPF had disappeared, remaining only the CPF placeholder, but when I clicked to fill the value appeared. inserir a descrição da imagem aqui

My Code

HTML form

<section class="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

  • Quotation marks missing: $("#id_receiver-cnpj"). val(). Correct would be $("#id_receiver-cnpj"). val('');

  • Sorry @Emirmarques, I have this in the code, I accidentally took it. I updated the question.

  • I posted the resolution in the first reply

2 answers

5


Missing you include the filter checked at the moment pick 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>
<section class="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"/>

  • I made that change. It "clears" the field, showing the placeholder, but when you click on the field it comes back with the value I had typed. I show it in the question gif.

  • Did you spin my example? I couldn’t simulate such behavior

  • As you can see too, the fields have mask. This would influence something ?

  • I did a test, and within the function, after changing any value, I gave an Alert in the fields. Let’s say I filled in cnpj and clicked in person. It in the value of cnpj it shows nothing, and if I click in legal person it shows nothing in Cpf value, but if I click inside the input, the old value returns.

  • Could be, remove that mask and do a test

  • 1

    @Allanramos does not change the intention of the post with an edit. Warn the OP that there is something wrong or post a response of its own with the solution.

  • Modified @jbueno. Or better, I went back to the original mode and gave my answer.

Show 2 more comments

4

The reply from @Emirmarques is correct. I just added the part of Mask again in my code. Because even cleaning, when you click on the field it comes back with the previous value. With this definition of the masks, it prevents this.

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: "_"});
    }
},

Browser other questions tagged javascript jquery

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