Hi,
I have 2 select/dropdown fields in my form. Field2 is dependent on the selected values of Field1, and I am pulling the values of Field2 via Javascript/Ajax URL by feeding it the value of Field1 when selected.
<div class="col-sm-3">
<select name="ministry" class="form-control">
<option value="">All ministries</option>
@foreach ($mins as $min)
<option value="{{ $min->id }}" @if($min->id==$ministry) selected @endif>{{ $min->name }}</option>
@endforeach
</select>
<span class="help-block">Ministry</span>
</div>
<div class="col-sm-3">
<select name="department" id="department" class="form-control">
</select>
<span class="help-block">Select Department</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="ministry"]').on('change', function() {
var mhID = $(this).val();
if(mhID) {
$.ajax({
url: 'admin/departmentajax/'+mhID,
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="department"]').empty();
$('select[name="department"]').append('<option value="">Select Department...</option>');
$.each(data, function(key, value) {
$('select[name="department]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="department"]').empty();
}
});
});
</script>
The problem is that after the form submission, the ministry value is pre-selected in the dropdown (logically fine, since the result is related to the selected ministry), but the department value is not populated with the requested value, it is always blank.
Any help please?
Thanks, Saad
Yes, you are not populating it when you load the page, I'm not that much into so much JS now so I can't provide what to do, but $('select[name="ministry"]').on('change', function() { this will only trigger when the select box is changed. What you will need here is a function that triggers after page load or something like that.
EDIT: Seems you could do this
$(window).on('load', function() {
// code here
});
$(window).on('load', function() { populate() });
function populate(){ $('select[name="ministry"]').on('change', function() { var mhID = $(this).val(); if(mhID) { $.ajax({ url: 'admin/departmentajax/'+mhID, type: "GET", dataType: "json", success:function(data) {
$('select[name="department"]').empty();
$('select[name="department"]').append('<option value="">Select Department...</option>');
$.each(data, function(key, value) {
$('select[name="department]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="department"]').empty();
}
});
});
@ahkeravi, I don't think this is OK. You are still using onchange event inside the populate function, which will not output values unless the ministry dropdown is moved. Isn't it so?
yes i have tried but this gonna not work properly.
Please or to participate in this conversation.