在提交表单之前通过 Bootstrap Modal 获得确认

Question

我正在开发一个网站。本网站的一部分是一个编辑表单。当用户想要提交他们的更改时，我希望出现一个 Bootstrap 模式并要求确认。

表单本身是 HTML，提交过程由 PHP 代码管理。

<form method='post' id='submitForm' >
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline">
                                        <label class="form-label ">Firstname</label>
                                            <input type="text" name="firstname" value="<?php echo $firstname;?>" class="form-control my-5">        
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">Lastname</label>
                                        <input type="text" name="lastname" value="<?php echo $lastname;?>" class="form-control my-5">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">Fullname</label>
                                        <input type="text" name="fullname" value="<?php echo $fullname;?>" class="form-control my-5">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">Status</label>
                                        <select class="form-control my-5" name='status' id="exampleFormControlSelect1">
                                            <option <?php if ($status == 'Active') echo 'selected="selected"'; ?>>Active</option>
                                            <option <?php if ($status == 'Inactive') echo 'selected="selected"'; ?>>Inactive</option>
                                        </select>
                                    </div>                            
                                </div>
                                
                            </div>
                            <div class="row">
                            <div class="col-md-2">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">Employee No.</label>
                                        <input type="test" name="empid" value="<?php echo $empid;?>" class="form-control my-5" >
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">BPM Employee No.</label>
                                        <input type="test" name="newempid" value="<?php echo $newempid;?>" class="form-control my-5">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                <div class="input-group input-group-outline ">
                                    <label class="form-label">Email Addr.</label>
                                    <input type="test" name="email" value="<?php echo $email;?>" class="form-control my-5">
                                </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">Project</label>
                                        <select class="form-control my-5" name='project' id="exampleFormControlSelect1">
                                            <?php
                                                    foreach ($projects as $projectName){
                                                            $projectList = $projectName->project;
                                            ?>
                                                <option <?php if ($projectList == $project) echo 'selected="selected"'; ?>><?php echo $projectList?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline ">
                                        <label class="form-label">Manager</label>
                                        <input type="test" name="manager" value="<?php echo $manager;?>" class="form-control my-5">
                                    </div>
                                </div>
                                
                                
                            </div>

                            </div >
                            <div class="row">
                                <div class="col-md-11">
                                </div>
                                <div class="col-md-1">

                                <div class="row">
                                    <div class="col-md-4">
                                        <button type="submit" name="submit" id= "submit-button" class="btn btn-block bg-gradient-success mb-3 update" 
                                        data-bs-toggle="modal" data-bs-target="#"   
                                        >Update</button>
                                        
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            
                        </form>

这是模态：

<div class="modal fade" id="user-info-edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Please confirm</h5>
        <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="" id="">Are you sure you want to submit changes? </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn bg-gradient-success">Submit</button> -->
        <a href="" id="submit" class="btn btn-success">Submit</a>
      </div>
    </div>
  <//div>
</div>

我想到的第一件事是停止“提交”，当单击表单的提交按钮时触发模态，然后当用户单击模态的提交按钮时，表单正在提交。所以我写了这段JS代码：

<script>
    $(document).ready(function() {
        $('#submit-button').on('click', function(){

            submitForm.addEventListener('submit', (event) =>{
            event.preventDefault();
            })

            $('#user-info-edit').modal('show');
        });

        
    });



    $(document).ready(function() {
        $('#submit').on('click', function(){

            submitForm.submit();
        });
    });

 </script>

现在显示了模态，但未提交表单。我阅读了所有我发现相关的内容，但没有帮助。

Answer 1

问题可能出在您使用 submitForm.addEventListener('submit', ...) 的方式上。

不使用addEventListener，您可以简单地使用jQuery来拦截表单提交事件并显示模态。然后，在确认按钮单击事件处理程序中，您可以使用 JavaScript 的本机提交方法提交表单。

$(document).ready(function() {
    // Intercept the form submission event
    $('#submitForm').on('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        $('#user-info-edit').modal('show'); // Display the modal
    });

    // Submit the form when the user clicks the confirm button
    $('#submit').on('click', function() {
        $('#submitForm').off('submit').submit(); // Unbind the event handler and submit the form
    });
});