如何在表单提交后隐藏表单并显示加载动画（JavaScript 实现）

✅ 正确做法：阻止默认提交 + 手动控制流程

你需要做三件事：

1. 阻止表单默认提交行为（关键！）；
2. 隐藏表单、显示加载状态；
3. 通过 AJAX 提交数据（推荐）或延迟跳转（简易替代）。

以下是优化后的完整实现方案：

✅ 修改 HTML（仅需微调）

<form class="form" action="login_users.php" method="post" name="loginform" onsubmit="return processing(event)">
  <!-- ... 其他输入字段保持不变 ... -->
  <button name="add" class="btn-prim" type="submit">Kirjaudu</button>
  <button class="btn-sec" type="button" onclick="window.location.href='../register/register.php'">Luo tili</button>
</form>

<!-- 加载提示区（需添加到 HTML 中，放在 form 后或 body 底部） -->
<div id="loading" class="loading" style="display: none; margin: 40px auto;"></div>

? 注意：onsubmit="return processing(event)" 中的 return 至关重要，它决定是否允许表单继续提交。

✅ 修正 JavaScript（修复 ID 错误 + 阻止默认行为）

function processing(event) {
  // 阻止表单默认提交（核心一步！）
  event.preventDefault();

  // ✅ 修复 ID：HTML 中是 id="logsection"，不是 "loginsection"
  const formSection = document.getElementById('logsection');
  const loadingEl = document.getElementById('loading');

  if (formSection && loadingEl) {
    formSection.style.display = 'none';
    loadingEl.style.display = 'block';

    // ✅ 使用 fetch 发起 AJAX 登录请求（推荐）
    const formData = new FormData(document.loginform);

    fetch('login_users.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.text())
    .then(data => {
      // 简单判断登录成功（可根据 login_users.php 实际返回调整）
      if (data.includes('Location: ../homepage.php') || data.trim().length === 0) {
        window.location.href = '../homepage.php';
      } else {
        alert('Väärä käyttäjänimi ja/tai salasana'); // 错误提示
        formSection.style.display = 'block';
        loadingEl.style.display = 'none';
      }
    })
    .catch(error => {
      console.error('Login failed:', error);
      alert('Yhteydenotto epäonnistui. Yritä myöhemmin uudelleen.');
      formSection.style.display = 'block';
      loadingEl.style.display = 'none';
    });
  }
}

✅ 补充 CSS（确保 loading 区域可见）

.loading {
  background-image: url('../img/loading.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 200px;
  margin: 40px auto;
  display: none;
}

⚠️ 关键注意事项

• ID 必须严格匹配：你 JS 中写的是 getElementById('loginsection')，但 HTML 中是 id="logsection" → 必须统一为 logsection，否则获取元素失败。
• 不要依赖 PHP 的 header() 重定向：AJAX 请求中 header("Location: ...") 不会触发浏览器跳转，需在 JS 中手动 window.location.href。
• 安全性提醒：当前 PHP 代码存在严重 SQL 注入风险（直接拼接 $username 和 $password），且使用已废弃的 md5() 做密码哈希。生产环境务必改用 password_hash() + password_verify()，并使用预处理语句（PDO/MySQLi prepared statements）。
• 无障碍友好：隐藏表单后，建议用 aria-hidden="true" 或焦点管理提升可访问性。

✅ 替代方案（无 AJAX，仅前端过渡）

若暂不引入 AJAX，可改为「延迟跳转」模拟加载效果：

Okaaaay

适用于所有人的AI文本和内容生成器

下载

立即学习“Java免费学习笔记（深入）”；

function processing(event) {
  event.preventDefault();
  document.getElementById('logsection').style.display = 'none';
  document.getElementById('loading').style.display = 'block';

  // 2 秒后跳转（模拟后端处理）
  setTimeout(() => {
    document.loginform.submit(); // 触发原生提交
  }, 2000);
}

⚠️ 此方式无法捕获登录失败，仅作视觉过渡，不推荐用于真实项目。

通过以上改造，你的登录表单将真正实现“点击即隐藏、实时显加载、响应后跳转”的专业交互体验。