如何在Django中点击按钮后获取表单数据

针对你的表单结构，这里提供几种可靠的方法来获取用户输入的Email和密码：

方法一：点击提交按钮直接获取 #

你的表单使用的是type="button"的按钮，直接给它绑定点击事件，通过ID定位输入框取值：

// 获取提交按钮
const submitBtn = document.querySelector('input[type="button"]');

// 绑定点击事件
submitBtn.addEventListener('click', function() {
    // 读取输入值
    const email = document.getElementById('email-input').value;
    const password = document.getElementById('password-input').value;

    // 这里可以添加后续逻辑，比如打印验证、发送请求
    console.log('用户输入的Email:', email);
    console.log('用户输入的密码:', password);
});

方法二：监听表单提交事件（更规范） #

把按钮改成type="submit"，利用表单的默认提交事件来处理，还能避免页面刷新：

先修改HTML里的按钮：

<input type="submit" value="Submit"/>

再添加JS代码：

// 获取表单元素
const loginForm = document.querySelector('form');

// 监听提交事件
loginForm.addEventListener('submit', function(e) {
    // 阻止页面默认刷新
    e.preventDefault();

    // 读取输入值
    const email = document.getElementById('email-input').value;
    const password = document.getElementById('password-input').value;

    // 后续处理
    console.log('Email:', email);
    console.log('Password:', password);
});

方法三：用FormData批量获取（适合多字段场景） #

如果表单字段较多，用FormData可以一次性收集所有数据，再提取需要的字段。注意要给输入框添加name属性：

先修改HTML的输入框：

<input id="email-input" type="email" placeholder="" name="email"/>
<input id="password-input" type="password" placeholder="" name="password"/>

然后JS代码：

const submitBtn = document.querySelector('input[type="button"]');

submitBtn.addEventListener('click', function() {
    const form = document.querySelector('form');
    const formData = new FormData(form);

    // 提取需要的字段
    const email = formData.get('email');
    const password = formData.get('password');

    console.log('Email:', email);
    console.log('Password:', password);
});

注意事项 #

• 确保JS代码在页面DOM加载完成后执行，可以把代码放在</body>标签前，或者包裹在DOMContentLoaded事件里：

  document.addEventListener('DOMContentLoaded', function() {
      // 上面的代码放这里
  });
  

• 如果之前的方案失效，先检查是否正确获取了DOM元素，比如用console.log(submitBtn)确认按钮是否被找到。

内容的提问来源于stack exchange，提问作者michaeljf