时间戳

首页 > 解决方案 > 将事件侦听器添加到提交按钮以运行函数

javascript - 将事件侦听器添加到提交按钮以运行函数

问题描述

嘿伙计们，我正在用 javascript 编写一个应用程序，并且我正在尝试向提交按钮添加一个事件侦听器，该按钮是某人单击以发送电子邮件的“发送电子邮件”按钮。

我知道该代码适用于添加电子邮件，因为当我在事件侦听器之外运行它时，它会发送电子邮件。因此，出于某种原因，我的事件侦听器存在问题。

目前 - 当我点击发送邮件按钮时没有任何反应。我没有收到任何错误，它只是将我返回到收件箱。

我确定事件侦听器由于某种原因无法正常工作。

有人看到我做错了什么吗？谢谢

html:

<div id="compose-view">
        <h3>New Email</h3>
        <form id="compose-form"
        method="POST">
            {% csrf_token %}
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input type="submit" id="sendEmail" class="btn btn-primary"/>
        </form>
    </div>

js：

 const element = document.getElementById('sendEmail');
  element.addEventListener('click', function() {
    fetch('/emails', {
    method: 'POST',
    body: JSON.stringify({
      recipients: 'card51short@gmail.com',
      subject: "buglets",
      body: 'Hes a fat one'
    })
  })
  .then(response => response.json())
  .then(result => {
      // Print result
      console.log(result);
  });
  });
}

标签： javascripthtmlevent-handling

解决方案

这是因为您的表单方法是 post ，当您单击按钮时它将发出一个 post 请求，并且 javascript 不会运行，因为它试图向一个不存在的端点发出 post 请求。因此，您需要method从表单中删除 html 属性。

推荐阅读