Как показать результат действия формы в модальном

#php #jquery #codeigniter #web #modal-dialog

#php #jquery #codeigniter #веб #модальный диалог

Вопрос:

я хочу показать результат моего действия в модальном режиме, после нажатия кнопки отправки я хочу, чтобы модальное всплывающее окно показывало результат моего действия………………………………………………………………… Это html-форма

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

как вызвать модальное действие после формы, вызывающее действие в контроллере

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

[Здесь мой codepen]
https://codepen.io/hasta2103/pen/qBZmvjL

Комментарии:

1. Можете ли вы показать свой «результат действия» в консоли (через console.log() ) без модального? Хороший шаг в отладке.

2. Я только готовлю модальный. но еще не для его функции

3. Я говорю, что если вы можете отобразить его до / во время модального режима (console.log), то мы устраняем ошибку до этого момента. Базовая отладка. Все это последовательно, даже если это выглядит управляемым событиями.

4. я только начинающий в этом братан.

5. Предоставлено. Я пытаюсь заставить вас предоставить детали отладки. Если вам не нравятся закрытые вопросы?