Fill value in combobox when you click checkbox

Asked

Viewed 381 times

0

I’m registering clients and has a checkbox that fills an input with "EXEMPT, leaves it as "READONLY" and needed to fill a combobox with a value that is in options. But I’ve tried everything and I can’t do it, can you give me some light? Follow the code I made.

function IEcli() {
  var cbocontribuinte = document.getElementById('tp_contribuinte');
  if ($('#iecli').prop("checked")) {
    $('#estadual').val("ISENTO");
    $('#estadual').attr("readOnly", true);
    cbocontribuinte.selectedIndex = 2;

  } else {
    $('#estadual').val("");
    $('#estadual').removeAttr("readOnly");
    cbocontribuinte.selectedIndex = 0;
  }
}
<label class="col-xs-1 control-label" id="esterg">I. Estadual</label>
<div class="col-xs-2">
  <input type="text" class="form-control" name="estadual" id="estadual" placeholder="" value="" />
</div>
<div class="checkbox col-xs-2">
  <input type="checkbox" name="iecli" id="iecli" onclick="IEcli()"> Isento?</label>
</div>
</div>
<div class="form-group">
  <label class="col-xs-1 control-label">Insc.Municipal</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="nome" placeholder="" value="" />
  </div>
  <label class="control-label col-xs-1"> Contribuinte </label>
  <div class="col-xs-2">
    <select class="form-control selectpicker" name="tp_contribuinte" id="tp_contribuinte" onchange="atualizaIEDest();">
      <option value="0">Selecione</option>
      <option value="1">1 - Contribuinte ICMS</option>
      <option value="2">2 - Contribuinte isento de inscrição no cadastro de contribuintes</option>
      <option value="9">9 - Não contribuinte, que pode ou não possuir inscrição no cadastro de contribuintes</option>
    </select>
  </div>

javascript html5
  • 1

    Can you join code to play the example? So we can respond with working code.

  • Good afternoon Sergio. Of course. I’m putting the code

  • Sergio, I could only put the snippet, because the code is too big and does not allow saving the question.

  • I believe that what is missing is to include jquery in your page

  • Good night, you guys. I would like to thank everyone, all the help worked perfectly, I was using the bootstrap-select.min.js page and it was influencing the code, so it wasn’t working. One question: It is possible to mark all as a valid answer?

4 answers

0

.val() is Jquery. Pure Javascript .value.

In Jquery:

function IEcli () {

    var cbocontribuinte = $( '#tp_contribuinte' );

    if ( $( '#iecli' ).prop( 'checked', true ) ) {
        $( '#estadual' ).val( 'ISENTO' );
        $( '#estadual' ).prop( 'readonly', true );
        cbocontribuinte.prop(n'selectedIndex', 2 );

    } else {
        $( '#estadual' ).val( '' );
        $( '#estadual' ).prop( 'readonly', false );
        cbocontribuinte.prop( 'selectedIndex', 0 );
    }

}

Pure Javascript:

function IEcli () {

    var cbocontribuinte = document.getElementById( 'tp_contribuinte' ),
        iecli = document.getElementById( 'iecli' ),
        estadual = document.getElementById( 'estadual' );

    if ( ieclie.checked === true ) {

        estadual.value = 'ISENTO';
        estadual.readOnly = true;
        cbocontribuinte.selectedIndex = '2';

    } else {

        estadual.value = '';
        estadual.readOnly = false;
        cbocontribuinte.selectedIndex = '0';

    }

}

0


You can do this only with Javascript and using the object property directly.

function IEcli() {
  var cbocontribuinte = document.getElementById('tp_contribuinte');
  var iecli = document.getElementById('iecli').checked;
  var estadual = document.getElementById('estadual');

  estadual.value = iecli ? "ISENTO" : "";
  estadual.readOnly = iecli;
  cbocontribuinte.selectedIndex = iecli ? 2 : 0;
}
<label class="col-xs-1 control-label" id="esterg">I. Estadual</label>
<div class="col-xs-2">
  <input type="text" class="form-control" name="estadual" id="estadual" placeholder="" value="<?php echo $cliente->getInscestRg() ?>" />
</div>
<div class="checkbox col-xs-2">
  <input type="checkbox" name="iecli" id="iecli" onclick="IEcli()"> Isento?</label>
</div>
</div>
<div class="form-group">
  <label class="col-xs-1 control-label">Insc.Municipal</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="nome" placeholder="" value="<?php echo $cliente->getInscMunicipal() ?>" />
  </div>
  <label class="control-label col-xs-1"> Contribuinte </label>
  <div class="col-xs-2">
    <select class="form-control selectpicker" name="tp_contribuinte" id="tp_contribuinte" onchange="atualizaIEDest();">
      <option value="0">Selecione</option>
      <option value="1">1 - Contribuinte ICMS</option>
      <option value="2">2 - Contribuinte isento de inscrição no cadastro de contribuintes</option>
      <option value="9">9 - Não contribuinte, que pode ou não possuir inscrição no cadastro de contribuintes</option>
    </select>
  </div>

0

In this way, your example is working perfectly.

Particularly I avoid using . attr() in such cases.

OBS.: . val() in addition to entering values, can also be used to select options.

function IEcli() {
    if ($('#iecli').prop("checked")) {
        $('#estadual').val("ISENTO");
        $('#estadual').prop("readonly", true);
        $('#tp_contribuinte').val("2");
    } else {
        $('#estadual').val("");
        $('#estadual').prop("readonly", false);
        $('#tp_contribuinte').val("0");
    }
}

  • Particularly I avoid using . attr(). Why?

  • http://api.jquery.com/prop/

  • The Difference between Attributes and properties can be Important in specific situations. Before jQuery 1.6, the . attr() method sometimes Took Property values into Account when retrieving some Attributes, which could cause inconsistent behavior. As of jQuery 1.6, the . prop() method provides a way to explicitly Retrieve Property values, while . attr() retrieves Attributes.

  • Sometimes I have had problems with changes specifically in forms, values, readonly and checked, the best is to use . val() and . prop()

  • Good night, you guys. I would like to thank everyone, all the help worked perfectly, I was using the bootstrap-select.min.js page and it was influencing the code, so it wasn’t working. One question: It is possible to mark all as a valid answer?

0

There are no errors in your code! Simply, as Marceloboni said in the comment Acredito que o que falta é incluir o jquery na sua pagina which should have been Falta é incluir o jquery na sua pagina. To corroborate such comment I run your code here with jquery.

        function IEcli() {
  var cbocontribuinte = document.getElementById('tp_contribuinte');
  if ($('#iecli').prop("checked")) {
    $('#estadual').val("ISENTO");
    $('#estadual').attr("readOnly", true);
    cbocontribuinte.selectedIndex = 2;

  } else {
    $('#estadual').val("");
    $('#estadual').removeAttr("readOnly");
    cbocontribuinte.selectedIndex = 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label class="col-xs-1 control-label" id="esterg">I. Estadual</label>
<div class="col-xs-2">
  <input type="text" class="form-control" name="estadual" id="estadual" placeholder="" value="" />
</div>
<div class="checkbox col-xs-2">
  <input type="checkbox" name="iecli" id="iecli" onclick="IEcli()"> Isento?</label>
</div>
</div>
<div class="form-group">
  <label class="col-xs-1 control-label">Insc.Municipal</label>
  <div class="col-xs-2">
    <input type="text" class="form-control" name="nome" placeholder="" value="" />
  </div>
  <label class="control-label col-xs-1"> Contribuinte </label>
  <div class="col-xs-2">
    <select class="form-control selectpicker" name="tp_contribuinte" id="tp_contribuinte" onchange="atualizaIEDest();">
      <option value="0">Selecione</option>
      <option value="1">1 - Contribuinte ICMS</option>
      <option value="2">2 - Contribuinte isento de inscrição no cadastro de contribuintes</option>
      <option value="9">9 - Não contribuinte, que pode ou não possuir inscrição no cadastro de contribuintes</option>
    </select>
  </div>

If you really want to use pure Javascript use Sergio’s answer

Browser other questions tagged javascript html5

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