我应该为模态表单使用什么事件处理程序来发送电子邮件答案

【问题标题】：What event handler should i use for modal form to send an email我应该为模态表单使用什么事件处理程序来发送电子邮件
【发布时间】：2021-04-14 08:48:03
【问题描述】：

我正在创建一个网络应用程序，我想使用 EmailJS(https://www.emailjs.com) 通过表单向我的电子邮件发送消息。他们有一种简单的方法，您可以在页面上加载表单时向自己发送电子邮件。

<script type="text/javascript">
       (function() {
        // https://dashboard.emailjs.com/admin/integration
        emailjs.init('YOUR_USER_ID');
    })();
</script>

<script type="text/javascript">
    **window.onload =** function() {
        document.getElementById('contact-form').addEventListener('submit', function(event) {
            event.preventDefault();
            // generate a five digit number for the contact_number variable
            this.contact_number.value = Math.random() * 100000 | 0;
            // these IDs from the previous steps
            emailjs.sendForm('contact_service', 'contact_form', this)
                .then(function() {
                    console.log('SUCCESS!');
                }, function(error) {
                    console.log('FAILED...', error);
                });
        });
    }
</script>

在我的例子中，我使用的是带有引导程序的模态表单，在他们的案例教程中，当表单已经加载到屏幕上时，他们只包含了一个案例 windows.onload。对于表单已经加载（在屏幕上）它的工作。我的问题是我应该使用什么处理程序以及如何使用模态表单，因为它是在 onload 已经发生之后加载的。

这是我的屏幕 sn-p 代码

        <!DOCTYPE html>
        <html lang="en">
    
       <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <title>Form Testing</title>
     
    
           <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"          rel="stylesheet" />
           <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">     </script>
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
    
           <script type="text/javascript">
               (function () {
                  emailjs.init("user_p07SKunpARYp4aowW97yr");
                })();
             </script>
    
            </script>
            <script type="text/javascript">
                window.onload = function () {
                    document.getElementById('modal-form').addEventListener('submit', function (event) {
                       event.preventDefault();
                      // generate a five digit number for the contact_number variable
                      this.contact_number.value = Math.random() * 100000 | 0;
                      // these IDs from the previous steps
                        emailjs.sendForm('service_k34ck3j', 'contact_form', this)
                           .then(function () {
                               console.log('SUCCESS!');
                           }, function (error) {
                              console.log('FAILED...', error);
                           });
                     });
            }
        </script>
       
    
        </head>
        <body>
            
    
    <form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-dialogLabel">User Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
    
                    <!-- actual form markup -->
                    <div class="form-group">
                        <input name="name" type="text" class="form-control" id="field1" placeholder="name">
                    </div>
                    <div class="form-group">
                        <input name="user_email" type="email" class="form-control" id="field2" placeholder="email">
                    </div>
                    <div class="form-group">
                        <input name="user_number" type="number" class="form-control" id="field2" placeholder="number">
                    </div>
                    <div class="form-group">
                        <textarea type="text" id="form8" class="md-textarea form-control" rows="4" name="message"
                            placeholder="Example : how much does it cost to roof a 10*20 house using harvey tiles"></textarea>
                    </div>
                    <!-- /actual form markup -->
    
                </div>
    
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </form>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
        Open modal form
    </

button>

    </body>
    </html>

【问题讨论】：

我认为**window.onload =** function() { 是试图将代码加粗，而不是那些*s 实际上在您的代码中？
是的，当然这是一个错误，但我相信问题很明确

标签： javascript html jquery dom-events bootstrap-modal

【解决方案1】：

由于您使用引导程序，您可以使用引导程序模式事件 - https://getbootstrap.com/docs/4.0/components/modal/#events

模态加载后触发函数，可以使用事件'shown.bs.modal'

  $("#modal-form").on('shown.bs.modal', function(){
    alert('The modal is fully shown.');
  });

【讨论】：