Django中带onclick的提交按钮无法提交表单问题

你的问题核心是openPopup函数里的event.preventDefault()——这个方法会强制阻断表单的默认提交行为，所以启用点击事件后表单无法提交，禁用后则恢复正常。要实现「点击按钮同时提交表单+显示弹窗」，分两种场景处理：

场景1：异步提交表单（页面不刷新，弹窗持续显示） #

适合需要在弹窗内完成后续操作（比如输入OTP）的场景，步骤如下：

1. 修改JavaScript函数，先阻止页面刷新，显示弹窗后用AJAX异步提交表单：

function openPopup(event){
  // 阻止默认提交，避免页面刷新导致弹窗消失
  event.preventDefault();
  // 获取弹窗元素并显示
  const popup = document.getElementById('popup');
  popup.classList.add("open-popup");
  // 获取当前表单并异步提交
  const form = event.target.closest('form');
  const formData = new FormData(form);
  
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 可在此处处理提交后的逻辑，比如验证OTP有效性
  })
  .catch(error => console.error('表单提交失败:', error));
}

2. 原HTML结构无需修改，保持提交按钮的type="submit"即可。

场景2：同步提交表单（页面刷新，弹窗由后端控制显示） #

如果允许页面刷新，且需要在表单提交后由后端渲染弹窗，直接移除阻止默认行为的代码：

修改openPopup函数：

function openPopup(event){
  const popup = document.getElementById('popup');
  popup.classList.add("open-popup");
  // 去掉event.preventDefault()，让表单正常提交
}

这种方式下，点击按钮会先显示弹窗，随后表单提交页面刷新，弹窗会消失。若需刷新后仍显示弹窗，需后端通过模板变量控制弹窗的open-popup类，示例：

<div class="popup {{ 'open-popup' if show_otp_popup else '' }}" id="popup">
  <h1>OTP Verification</h1>
  <p>Code has been sent</p>
  <div class="otp-card-inputs">
      {{ otp }}
  </div>
  <p>Didn't get the otp <a href="#">Resend</a></p>
  <input class="verify-otp-btn" type="submit" value="Submit"/>
</div>

更贴合OTP验证的优化方案 #

从你的弹窗结构看，包含OTP输入框和独立提交按钮，更合理的流程是：点击主按钮仅显示弹窗，输入OTP后再提交表单。只需将主按钮改为普通按钮即可：

<div class="container-login-form-btn">
  <!-- 将type="submit"改为type="button"，避免自动触发表单提交 -->
  <input onclick="openPopup(event)" class="login-form-btn" type="button" value="Submit"/>
</div>

此时弹窗内的提交按钮负责最终的表单提交，逻辑更清晰，也不会出现行为冲突。

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