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..
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>