Show input field under select option based on click button

Question

this code still not working..my requirement is to show input field under select option / dropdown based on click button.

$(document).on("click", ".btneditsec1_2", function (e) {
    e.preventDefault();
    var _self = $(this);
    var myacc = _self.data('acc');
    var mywacc = _self.data('wacc');
    var myitc = _self.data('itc');
        $('#id_accreditation').val(myacc);
        $("#id_w_accreditation").val(mywacc);
        $("#id_issue_the_certificate").val(myitc);
    }); 


  $('select[name=accreditation]').on('change', function() {
    if (this.value == 'Y') {
      $("#accr").show();
    } else {
      $("#accr").hide();
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 </script>
 <br>
<div align="right" style="margin-right: 30px;">
  <button id="btneditsec1_2" 
          type="button" 
          class="btn btn-warning btn-sm btneditsec1_2"
          data-acc="Y"
          data-wacc="Accreditation A"
          data-itc="Mr. Jones">
    <span class="glyphicon glyphicon-tasks"></span> Edit Section 1.2</button>
</div>

<table>
  <tr>
    <td>
      <label>Has the management / building achieve any accreditation ?</label>
      <br/>
      <select name="accreditation" id="id_accreditation" class="form-control" title="Please Select">
        <option selected></option>
        <option value="Y">has achieved</option>
        <option value="N">hasn't achieved</option>
      </select>
    </td>
    </tr>
    <tr>
    <td>
      <div id="accr" class="form-group" style="display: none;">
        <label>What Accreditation :</label>
        <input type="text" class="form-control input-sm" id="id_w_accreditation" name="w_accreditation"/><br/>
        <label>Who issue the certificate :</label>
       <input type="text" class="form-control input-sm" id="id_issue_the_certificate" name="issue_the_certificate" /><br>
      </div>
    </td>
  </tr>
</table>

in there, input text w_accreditation and issue_the_certificate still not showing when click button edit section 1.2 Help me please..

Answer 1

I guess you need to show text fields automatically depending upon the value present in data-acc="Y". Please correct me if I am wrong. As per this you just need to trigger the change event for your select box after setting its value as follows:

$(document).on("click", ".btneditsec1_2", function (e) {
    e.preventDefault();
    var _self = $(this);
    var myacc = _self.data('acc');
    var mywacc = _self.data('wacc');
    var myitc = _self.data('itc');
        $('#id_accreditation').val(myacc).change(); //trigger the change event so that associated event handler will get called
        $("#id_w_accreditation").val(mywacc);
        $("#id_issue_the_certificate").val(myitc);
    }); 


  $('select[name=accreditation]').on('change', function() {
    if (this.value == 'Y') {
      $("#accr").show();
    } else {
      $("#accr").hide();
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 </script>
 <br>
<div align="right" style="margin-right: 30px;">
  <button id="btneditsec1_2" 
          type="button" 
          class="btn btn-warning btn-sm btneditsec1_2"
          data-acc="Y"
          data-wacc="Accreditation A"
          data-itc="Mr. Jones">
    <span class="glyphicon glyphicon-tasks"></span> Edit Section 1.2</button>
</div>

<table>
  <tr>
    <td>
      <label>Has the management / building achieve any accreditation ?</label>
      <br/>
      <select name="accreditation" id="id_accreditation" class="form-control" title="Please Select">
        <option selected></option>
        <option value="Y">has achieved</option>
        <option value="N">hasn't achieved</option>
      </select>
    </td>
    </tr>
    <tr>
    <td>
      <div id="accr" class="form-group" style="display: none;">
        <label>What Accreditation :</label>
        <input type="text" class="form-control input-sm" id="id_w_accreditation" name="w_accreditation"/><br/>
        <label>Who issue the certificate :</label>
       <input type="text" class="form-control input-sm" id="id_issue_the_certificate" name="issue_the_certificate" /><br>
      </div>
    </td>
  </tr>
</table>