简体   繁体   English

模态中的“提交”按钮无法打开另一个模态

[英]Submit button in modal is not functioning to open another modal

This is my HTML code for the first modal. 这是我的第一个模式的HTML代码。 The submit button is not functioning to open another modal. 提交按钮无法打开另一个模式。

<div class="modal fade" id="newModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header">
                    <h5 class="modal-title">New record</h5>
                    <button type="button" class="close" data-dismiss="modal" 
                       aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                  <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" name="name" 
                           placeholder="Input name of client">
                    </div>
                  </div>
                   <div class="modal-footer">
                    <button type="submit" onclick="submitForm()" class="btn 
                     btn-primary">Submit</button>
                <button type="button" class="btn btn-secondary" data-
           dismiss="modal">Close</button>
                </div>
            </div>
        </div>
      </div>

This is the HTML code for the second modal when you click the submit button on the first one. 单击第一个模式上的“提交”按钮时,这是第二个模式的HTML代码。

       <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="php/insert_client.php" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                 Are you sure you want to add this client?
             </div>
             <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" onclick="validateForm()">Save</button>
            </div>
        </form>
    </div>  
</div>

This is the javascript for the newModal and confirmationModal 这是newModal和confirmationModal的JavaScript

  function submitForm() {
      document.getElementById("newModal").submit();
   }

  function validateForm(e) {
        $("#confirmationModal").modal("show");
  }

Based on the JS code you've shown, this function will need to be called in order for your second modal to be displayed: 根据您显示的JS代码,将需要调用此函数才能显示第二个模式:

function validateForm(e) {
  $("#confirmationModal").modal("show");
}

Right now, it's not being called until the second modal's Save button is clicked. 现在,直到单击第二个模式的“ 保存”按钮后,它才被调用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM