Как открыть следующий модальный сразу после сохранения?

Question

<?php
        //session_start();

        $con= mysqli_connect('localhost','root','');
        mysqli_select_db($con,'cementation');

        if(!$con)
        {

        echo "Not Connected to the server";
        }

        if(!mysqli_select_db($con,'cementation'))
        {
        echo "DB Not Selected";
        }
        $date= date("Y/m/d"); //1
        ?>
<!--6th table starts-->
<form method="post" action="/cementation/configuration/dooconfig.php">
    <div class="modal fade" id="modalForm11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h4 class="modal-title w-100 font-weight-bold">Detail of Operations</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body mx-3">
                    <div class="row">

                        <div class="col-sm-12">  <!-- Imp Div 1 -->

                            <div class="row"> <!-- Main Row Div -->
                                <div class="col-sm-12"> <!-- First Main Col -->


                                    <div class="row">
                                        <div class="col-sm-3" style="width: 100%">
                                            <div class="md-form mb-4">
                                                <input type="text" id="Entry_no" name="Entry_no" placeholder="Row #"
                                                       class="form-control validate">
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <div class="md-form mb-4">
                                                <input type="text" id="from_time" name="From_time" placeholder="from"
                                                       class="form-control validate">
                                            </div>

                                        </div>
                                        <div class="col-sm-3">
                                            <div class="md-form mb-4">
                                                <input type="text" id="to_time" name="To_time" placeholder="to"
                                                       class="form-control validate">
                                            </div>
                                        </div>

                                        <div class="col-sm-3">
                                            <div class="md-form mb-4">
                                                <input type="text" id="hrs" name="HRS" placeholder="hrs"
                                                       class="form-control validate">
                                            </div>
                                        </div>

                                        <div class="col-sm-4">
                                            <div class="md-form mb-4">
                                                <input type="text" id="code" name="code" placeholder="code"
                                                       class="form-control validate">
                                            </div>
                                        </div>

                                        <div class="col-sm-8">
                                            <div class="md-form mb-4">
                                                <input type="text" id="operations" name="detail_of_operations"
                                                       placeholder="operations" class="form-control validate">
                                            </div>
                                        </div>

                                        <div class="col-sm-8">
                                            <div class="md-form mb-4">
                                                <button type="Save" class="btn btn-primary" name="add-row"
                                                        onclick="$('#modalForm11').modal('show');">Save and Add Row
                                                </button>
                                            </div>
                                        </div>

                                    </div>

                                    <!-- Reload
                                   </div>
                               </div> -->


                                </div> <!-- 1st Main Col Ends -->
                                <div class="col-sm-12"> <!-- second col for main row starts -->
                                    <table width="100%" border-collapse: collapse class="datafill" border="1px solid">
                                        <tr>
                                            <th>Row #</th>
                                            <th>From</th>
                                            <th>To</th>
                                            <th>Hrs</th>
                                            <th>Code</th>
                                            <th>Operations</th>
                                        </tr>

                                        <?php
                                                $date= date("Y/m/d");
                                                $s= "SELECT Entry_no,From_time,To_time,HRS,code,detail_of_operations FROM detail_of_operations WHERE date='$date'";
                                                $result= $con->query($s);

                                                if ($result -> num_rows >0) {
                                                while ($row = $result -> fetch_assoc()){
                                                echo "<tr><td>".$row["Entry_no"]."</td><td>".$row["From_time"]."</td><td>".$row["To_time"]."</td><td>".$row["HRS"]."</td><td>".$row["code"]."</td><td>".$row["detail_of_operations"]."</td></tr>";

                                                }
                                                }
                                                else {
                                                echo "0 result";
                                                }

                                                ?>
                                    </table>

                                </div> <!-- Second Col for main row ends -->
                            </div> <!-- Main row div ends -->
                        </div> <!-- IMP Div 1 ends -->
                        <div class="modal-footer d-flex justify-content-center">

                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <a href="form.php">
                                <button type="button" class="btn btn-primary">Save</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="button">

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalForm11">Detail of
            Operations
        </button>
    </div>
</form>

У меня есть форма, которая состоит из множества модальных элементов. я хочу открыть следующую модель для всплывающего окна, как только пользователь сохранит данные в 1-м моде. У меня также есть несколько модалов, которым нужно несколько записей для одной записи.

Modal1, Modal2, modal3, modal4, Details_of_Operations, Formations.

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

Answer 1

Вы можете выполнить javascript обещаний для достижения вашей цели. Вот краткий пример, на котором вы можете опираться.

function saveSomeData() {
  return new Promise((resolve, reject) => {
    // setTimeOut to simulate the call waiting for the API
    setTimeout(() => {
      resolve({ succeeded: true, message: 'data saved' })
    }, 900)
    
    // Use reject if the API returns any error to catch it
    // on the promise call 
    // ---> reject(err)
  });
}

function onClickSaveModal(previousModalId, nextModalId) {
  // Uses promises to wait until the data of the current modal
  // is saved to open the other one
  saveSomeData()
    .then(res => {
      if (res.succeeded) {
        alert('Data saved successfully');
        
        hideModal(previousModalId);
        
        // checks if it is the last modal
        if (nextModalId) {          
          showModal(nextModalId);
        }
      } 
    })
    .catch(err => {
      // it enters here when you reject the promise
      alert('Some error trying to save data');
      console.log(err);
    });
}

function showModal(id) { 
  const modal = document.querySelector(`#${id}`);
  modal.style.display = 'inline-block';
}
function hideModal(id) {
  const modal = document.querySelector(`#${id}`);
  modal.style.display = 'none';
}

#modal1, #modal2, #modal3 {
  height: 100px;
  width: 100px;
  margin: 0 15px;
  display: inline-block;
}
#modal1 {
  background-color: lightblue;
}

#modal2 {
  background-color: lightcoral;
  display: none;
}

#modal3 {
  background-color: lightcyan;
  display: none;
}

.open {
  display: inline-block;
}

<div id="modal1">
  <p>modal 1</p>
  <button onclick="onClickSaveModal('modal1','modal2')">Save</button>
</div>

<div id="modal2">
  <p>modal 2</p>
  <button onclick="onClickSaveModal('modal2','modal3')">Save</button>
</div>

<div id="modal3">
  <p>modal 3</p>
  <button onclick="onClickSaveModal('modal3')">Save</button>
</div>

Дайте мне знать, если у вас есть какие-либо вопросы об этой реализации.