Radio enabled field, bank checked

Asked

Viewed 182 times

0

Guys I got a problem!

I have a Radio that I receive the value of the bank

                            <div class="radio">
                            <label>
                                <input  type="radio" name="empresa_tipo"  value="J" <?php echo ($empresa->empresa_tipo == "J") ? "checked" : null; ?>  class="ace" />
                                <span class="lbl"> Pessoa Jurídica</span>
                            </label>
                            <label>
                                <input type="radio"  name="empresa_tipo" value="F"  <?php echo ($empresa->empresa_tipo == "F") ? "checked" : null; ?>  class="ace" />
                                <span class="lbl"> Pessoa Física</span>
                            </label>
                        </div>

however this radio, when selected executes the function in js that enables or disables some fields

follows script

$(document).ready(function() {
                $('input:radio[name="empresa_tipo"]').on("change", function() {
                        if (this.checked && this.value == 'J') {
                                $("#razao_social, #CNPJ").show();
                                $("#data_nascimento, #CPF, #estado-civil, #sexo").hide();
                        } else {
                                $("#data_nascimento, #CPF, #estado-civil, #sexo ").show();
                                $("#razao_social, #CNPJ").hide();
                        }
                });
        });

however when I receive from the bank the value and pass to the radio which will receive Checked, it does not disable or enable, does not execute the function only when I click on the radio that will perform the function. how do I use the

checked

instead of

change

in function?

Observe the fields

<div class="form-group" id="sexo"  >
                        <label class=" col-sm-3 control-label bolder blue">Sexo</label>

                        <div class="col-sm-9">
                        <div class="radio">
                            <label>
                                <input  type="radio" name="empresa_sexo" id="empresa_sexo" value="M" <?php echo ($empresa->empresa_sexo == "M") ? "checked" : null; ?>   class="ace" />
                                <span class="lbl">Masculino</span>
                            </label>
                            <label>
                                <input type="radio"  name="empresa_sexo" id="empresa_sexo" value="F" <?php echo ($empresa->empresa_sexo == "F") ? "checked" : null; ?>   class="ace" />
                                <span class="lbl">Feminino</span>
                            </label>
                            <label>
                                <input  type="radio" name="empresa_sexo" id="empresa_sexo" value="O" <?php echo ($empresa->empresa_sexo == "O") ? "checked" : null; ?>   class="ace" />
                                <span class="lbl">Outros</span>
                            </label>
                        </div>


                    </div>
                </div>
                        <div class="space-4"></div>

                        <div class="form-group" id="CPF" >
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CPF </label>

                            <div class="col-sm-9">
                                <input type="text" id="empresa_cpf" name="empresa_cpf"  value="<?= $empresa->empresa_cpf ?>"  class="col-xs-10 col-sm-5 input-mask-eyescript" />
                            </div>
                        </div>
                        <div class="form-group" id="CNPJ" >
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CNPJ </label>

                            <div class="col-sm-9">
                                <input type="text" id="empresa_cnpj" name="empresa_cnpj"  value="<?= $empresa->empresa_cnpj ?>"  class="col-xs-10 col-sm-5 input-mask-eyescript-2" />
                            </div>
                        </div>
                        <div class="space-4"></div>
php javascript html

3 answers

1


This happens because the change function was not called, since the page was loaded and the radio preselected. you can solve your problem by triggering the change function as soon as the page loads. Example:

$(document).ready(function() {
  $('input:radio[name="empresa_tipo"]').trigger("change");
  $('input:radio[name="empresa_tipo"]').on("change", function() {
    var estado = this.checked && this.value == 'J';
    $("#razao_social, #CNPJ").toggle(estado);
    $("#data_nascimento, #CPF, #estado-civil, #sexo").toggle(!estado);
  }).change();
});

Edit:

I am inserting an alternative function that would solve your problem as I could not find the exact answer:

<script>
    $(document).ready(function() {

        verificaCpfCnpj();

        $('input:radio[name="empresa_tipo"]').change(function() {
            verificaCpfCnpj();
        });
    });

    function verificaCpfCnpj(){
        if($(":radio:checked").val()  == 'J'){
            $("#razao_social, #CNPJ").show();
            $("#data_nascimento, #CPF, #estado-civil, #sexo").hide();
        }else{
            $("#data_nascimento, #CPF, #estado-civil, #sexo ").show();
            $("#razao_social, #CNPJ").hide();
        }
    }
</script>

  • The intention is this when loading the page, according to what will come from the bank is PF = F or PJ = J. I did what you said, but it did not occur as expected, appeared all field, only hidden when I clicked on the radio

  • yes, I get it. You need to add this line to your code: $('input:radio[name="empresa_type"]'). Trigger("change"); as follows in the example. so that after loading the page, it triggers the function that will validate the disabled inputs and display in the correct way.

  • edited the question by placing the fields that have to appear and hide

  • I’ve used your example Diego, but it didn’t work

  • Jean, I’m sorry, I don’t know why I can’t call change Rigger. I found an alternative solution by mixing javascript in jquery, see what you think. At least it works. Hugs, I hope I’ve helped

  • 1

    That’s the way you went, thank you very much

  • happy to have helped, hugs

  • Dear Diego, you would have an example of this, but using the Select tag??

  • just manipulate the selectors...where $('input:radio[name="empresa_type"]')val() and $(":radio:checked"). will be $("#id_do_select").

  • did so: $(Document). ready(Function() { $('#orgao_type"]'). on("change", Function() { if (this.value == 'F') { $("#status, #municipal"). Hide(); } if (this.value == 'E') { $("#state"). show(); $("#municipal"). Hide(); } Else { $("#state, #municipal "). show(); } }); });

  • but I succeeded.

  • great, the important thing is to understand what you are doing to learn, mto bem jean!

  • Thank you very much Diego!

Show 8 more comments

1

Ideally send the hidden fields from the server. So the fields do not appear before Javascript runs and you can keep the code as you have.

To run the function when the page loads you can keep it as is (because it is useful when the value changes) and do only .change() to run that code.

$(document).ready(function() {
  $('input:radio[name="empresa_tipo"]').on("change", function() {
    var estado = this.checked && this.value == 'J';
    $("#razao_social, #CNPJ").toggle(estado);
    $("#data_nascimento, #CPF, #estado-civil, #sexo").toggle(!estado);
  }).change();
});

-1

$(function(){
  $('.radio input').change(function(){
      if ($(this).val() === 'J'){
         //...
      }
      else {
         //...
      }
  })
});

Browser other questions tagged php javascript html

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