Radio enable field, checked from bank

Question

Radio enable field, checked from bank

Navigation

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

0

Personally I have a problem!

I have a Radio that I get 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>

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

follow 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 get the value from the bank and step to the radio which will receive Checked, it does not disable or enable, it does not execute the function only when I click on the radio that will execute the function. how do I use the

checked

instead of

change

in function?

Look at 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

asked by anonymous 30.05.2017 / 05:46

3 answers

1

The ideal would be to send the hidden fields of the server. So the fields do not appear before JavaScript runs and you can keep the code as you have it.

To run the function when the page loads you can keep it as it is (it is useful when the value changes) and only make .change() to run this 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();
});

30.05.2017 / 06:40

-1

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

30.05.2017 / 15:57

View upload files on an HTML page SpringBoot Merge

score 1 · Accepted Answer

This happens because the change function was not called, since the page was loaded and the radio preselected. you can solve your problem by activating 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'm inserting an alternative function that would solve your problem, as I did 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>