Skip to content

Instantly share code, notes, and snippets.

@yakserr
Created October 25, 2022 10:39
Show Gist options
  • Save yakserr/4f02200f4d17f5e793e7dd65082efea2 to your computer and use it in GitHub Desktop.
Save yakserr/4f02200f4d17f5e793e7dd65082efea2 to your computer and use it in GitHub Desktop.
Dropdown dependenciees
<!-- BEGIN: JS Assets-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- END: JS Assets-->
<script>
function onChangeSelect(url, id, name) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: url,
type: 'GET',
data: {
id: id
},
success: function (data) {
const arrRegion = ['province', 'city', 'district', 'village'];
const index = arrRegion.indexOf(name);
for (let i = index; i < arrRegion.length; i++) {
$(`#${arrRegion[i]}`).empty();
$(`#${arrRegion[i+1]}`).prop('disabled', true);
}
$('#' + name).append(`<option>Select ${name} </option>`);
$.each(data, function (key, value) {
$('#' + name).append('<option value="' + key + '">' + value + '</option>');
});
}
});
}
$(function () {
$('#province').on('change', function () {
$('#city').prop('disabled', false);
onChangeSelect('{{ route("cities") }}', $(this).val(), 'city');
});
$('#city').on('change', function () {
$('#district').prop('disabled', false);
onChangeSelect('{{ route("districts") }}', $(this).val(), 'district');
})
$('#district').on('change', function () {
$('#village').prop('disabled', false);
onChangeSelect('{{ route("villages") }}', $(this).val(), 'village');
})
});
</script>
<label for="my-modal-4" class="modal cursor-pointer">
<label class="modal-box max-w-2xl relative" for="">
<h3 class="text-xl font-bold text-center">New Address</h3>
<label for="my-modal-4" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
<form action="#" method="POST">
@csrf
<input type="hidden" name="user_id" value="{{ Auth::user()->id }}" class="form-control">
<div>
<label class="label">
<span class="label-text text-lg font-medium">Label Address</span>
</label>
<input type="text" placeholder="e.g Home, Apartment, Office"
class="input input-bordered w-full max-w-xs" />
</div>
<div class="flex gap-4">
<div>
<label class="label">
<span class="label-text text-lg font-medium">Recipient's name</span>
</label>
<input type="text" placeholder="Citra" class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label class="label">
<span class="label-text text-lg font-medium">Phone Number</span>
</label>
<input type="text" placeholder="08xxxxxxxxxx" class="input input-bordered w-full max-w-xs" />
</div>
</div>
<div class="flex justify-between gap-4">
<div class="w-full">
<label class="label">
<span class="label-text text-lg font-medium">Province</span>
</label>
<select class="select select-bordered w-full max-w-xs" name="province" id="province">
<option>Select Province</option>
@foreach ($provinces as $province)
<option value="{{ $province->id }}">{{ $province->name }}</option>
@endforeach
</select>
</div>
<div class="w-full">
<label class="label">
<span class="label-text text-lg font-medium">cities</span>
</label>
<select class="select select-bordered w-full max-w-xs" name="city" id="city" disabled>
<option>Select City</option>
</select>
</div>
</div>
<div class="flex justify-between gap-4">
<div class="w-full">
<label class="label">
<span class="label-text text-lg font-medium">Districts</span>
</label>
<select class="select select-bordered w-full max-w-xs" name="district" id="district" disabled>
<option>Select District</option>
</select>
</div>
<div class="w-full">
<label class="label">
<span class="label-text text-lg font-medium">Villages</span>
</label>
<select class="select select-bordered w-full max-w-xs" name="village" id="village" disabled>
<option>Select Village</option>
</select>
</div>
</div>
<div>
<label class="label">
<span class="label-text text-lg font-medium">Zip Code</span>
</label>
<input type="text" placeholder="56371" class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label class="label">
<span class="label-text text-lg font-medium">Full Address</span>
</label>
<textarea class="textarea textarea-bordered w-full" placeholder="Full Address"></textarea>
</div>
<div>
<label class="label">
<span class="label-text text-lg font-medium">Notes</span>
</label>
<textarea class="textarea textarea-bordered w-full" placeholder="Notes"></textarea>
</div>
</>
<div class="modal-action">
<label for="my-modal-4" class="btn">Submit</label>
</div>
</form>
</label>
</label>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment