Javascript 如何访问表单的更改值？

我正在做一个在线课程的练习。在本练习中，我有一个包含3个输入的表单，我必须提取它们以向服务器发出请求。我的问题是，如果我在控制台中登录，我的JavaScript代码只返回空字符串，而不是更改后的值。我猜它正在访问html的初始值。我怎样才能解决这个问题

JavaScript代码：

// Initial call if the form is submitted
document.querySelector("#compose-submit").onsubmit = send_mail();

// The send_mail function:
function send_mail() {
  let recipients = document.querySelector('#compose-recipients').value; // Those return the empty string, 
  let subject = document.querySelector("#compose-subject").value;       // although something was written
  let body = document.querySelector("#compose-body").value;             // inside

  fetch("/emails", {
    method: "POST",
    body: JSON.stringify({
      recipients: recipients,
      subject: subject,
      body: body
    })
  })
      .then(response => response.json())
      .then(result => {
        console.log(result);
      });

  return false;

对应的html：

<h3>New Email</h3>
        <form id="compose-form">
            <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" class="btn btn-primary" id="compose-submit"/>
        </form>

新邮件
发件人：
致：

在第一行中，当您为onsubmit事件分配回调时，只需传递函数名而不调用它

因此，将第一行代码更改为

document.querySelector（“撰写提交”）.onclick=send\u mail
或
将事件绑定到表单元素，使其与onsumbit事件一起工作
document.querySelector（“撰写表单”）.onsubmit=send\u mail

应该有用

这里有一个
将您的输入类型更改为
按钮
，以防止提交后重新加载页面。你会保持你的价值观


//提交表单时的初始调用
document.querySelector（“#撰写提交”）.addEventListener（'click'，（）=>{
发送邮件（）；
});
//发送邮件功能：
函数send_mail（）{
让recipients=document.querySelector（“#撰写收件人”）.value；//返回空字符串，
让subject=document.querySelector（“#compose subject”）.value；//尽管写了一些东西
let body=document.querySelector（“#compose body”）.value；//内部
控制台日志（收件人）；
控制台日志（主题）；
控制台日志（主体）；
获取（“/emails”{
方法：“张贴”，
正文：JSON.stringify({
收件人：收件人，
主题:主题,，
身体：身体
})
})
.then（response=>response.json（））
。然后（结果=>{
控制台日志（结果）；
});
返回false；
}
新邮件
发件人：
致：
这是因为提交类型，当您提交表单时，它会将表单的值提交到表单的动作属性的给定url路径
，然后刷新页面。因此，javascript代码无法捕获表单的值

一种解决方案是防止刷新表单，并让javascript代码执行抓取方法

因此，在js代码中，执行以下操作：

//提交表单时的初始调用
document.querySelector（“撰写提交”）.addEventListener（“单击”，发送邮件）；
//发送邮件功能：
功能发送电子邮件（e）{
让recipients=document.querySelector（“#撰写收件人”）.value；//返回空字符串，
让subject=document.querySelector（“#compose subject”）.value；//尽管写了一些东西
let body=document.querySelector（“#compose body”）.value；//内部
获取（“/emails”{
方法：“张贴”，
正文：JSON.stringify({
收件人：收件人，
主题:主题,，
身体：身体
})
})
.then（response=>response.json（））
。然后（结果=>{
控制台日志（结果）；
}).最后（（）=>{
document.querySelector（“#撰写收件人”）.value=”“；
document.querySelector（“#撰写主题”）.value=”“；
document.querySelector（“#compose body”）.value=”“；
})
}

提交表单后，使用finally函数清空表单

编辑：
并将按钮类型更改为just button，使用submit类型将导致刷新

提交
谢谢，修复的方法是将onsubmit更改为onclick，并只传递函数名。你知道为什么我还要把onsubmit改为onclick吗？那是因为你把onsubmit绑定在button元素上，而应该是表单元素上。我已经修改了代码，使其也能与onsubmit一起工作。（我添加了preventDefault，以便您可以在控制台中看到输出）。非常感谢。我知道，我更明白这一点！