How to show form action result in modal - php

Question

i want to show my action result in modal, after submit button is clicked, i want modal popup show my action result...........................................................................
This is html form
<form class="g-py-15" id="submit-button" action="<?php echo base_url('cekongkir/cek_ongkir') ?>" method="POST" role="form">
<div class="row">
<div class="col-xs-12 col-sm-6 mb-4">
<div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0">
<center><label><strong>From</strong></label></center>
<select name="province_id" id="provincefrom" onchange="loadCityfrom()" class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required="">
<?php
echo "<option value=''> Select Province</option>";
foreach ($province as $p) {
echo "<option value='$p->province_id'>$p->prov_name</option>";
}
?>
</select>
<div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
<i class="hs-admin-angle-down"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-4">
<div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0">
<center><label><strong>To</strong></label></center>
<select name="province_id" id="provinceto" onchange="loadCityto()" class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required="">
<?php
echo "<option value=''> Select Province</option>";
foreach ($province as $p) {
echo "<option value='$p->province_id'>$p->prov_name</option>";
}
?>
</select>
<div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
<i class="hs-admin-angle-down"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 mb-4" required="required">
<div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" id="cityAreafrom" required="required">
<select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
<option value="">Select City</option>
</select>
<div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
<i class="hs-admin-angle-down"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-4" required="required">
<div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" id="cityAreato" required="required">
<select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
<option value="">Select City</option>
</select>
<div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
<i class="hs-admin-angle-down"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 mb-4" required="">
<div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" required="required" id="subdistrictAreafrom">
<select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
<option value="">Select Subdistrict1</option>
</select>
<div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
<i class="hs-admin-angle-down"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 mb-4" required="">
<div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" required="required" id="subdistrictAreato">
<select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
<option value="">Select Subdistrict</option>
</select>
<div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
<i class="hs-admin-angle-down"></i>
</div>
</div>
</div>
</div>
<div class="mb-4">
<center><label>Berat Barang</label></center>
<center>
<div class="col-6">
<input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" name="username" type="text" placeholder="(Kg)" required="">
</div>
</center>
</div>
<footer class="text-center">
<div class="col-12">
<button type="submit" class="btn btn-block u-btn-primary rounded g-px-30 g-py-11 ml-1" >Cari Ongkir</button>
</div>
</footer>
</form>
how to call the modal after form action calling action in controller
<script type="text/javascript">
function loadCityfrom(){
var province = $("#provincefrom").val();
$.ajax({
type:'GET',
url:"<?php echo base_url(); ?>register/cityList",
data:"province_id=" + province,
success: function(html)
{
$("#cityAreafrom").html(html);
}
});
}
function loadSubdistrictfrom(){
var city = $("#city").val();
$.ajax({
type:'GET',
url:"<?php echo base_url(); ?>register/subdistrictList",
data:"city_id=" + city,
success: function(html)
{
$("#subdistrictAreafrom").html(html);
}
});
}
</script>
<script type="text/javascript">
function loadCityto(){
var province = $("#provinceto").val();
$.ajax({
type:'GET',
url:"<?php echo base_url(); ?>register/cityListto",
data:"province_id=" + province,
success: function(html)
{
$("#cityAreato").html(html);
}
});
}
function loadSubdistrictto(){
var city = $("#cityto").val();
$.ajax({
type:'GET',
url:"<?php echo base_url(); ?>register/subdistrictListto",
data:"city_id=" + city,
success: function(html)
{
$("#subdistrictAreato").html(html);
}
});
}
</script>
[Here my codepen]
https://codepen.io/hasta2103/pen/qBZmvjL