网站HTML页面注册按钮点击显示空白页故障修复求助

代码错误排查与修复方案 #

你遇到的点击注册按钮跳转空白页的问题，是由以下几处代码语法、逻辑错误导致的，按优先级修复即可：

1. 直接导致跳转空白的核心错误 #

你用来切换注册表单的链接<a class="form__link" href="./" id="linkCreateAccount"> 配置错误，href="./"会直接触发页面跳转到站点根目录，而非执行你main.js里写的表单切换逻辑。
修复方案：将href改为javascript:void(0)阻止默认跳转，修改后代码为：

<a class="form__link" href="javascript:void(0)" id="linkCreateAccount">Don't have an account? Create account</a>

同理登录切换链接也做同样修改：

<a class="form__link" href="javascript:void(0)" id="linkLogin">Already have an account? Sign in</a>

2. 表单提交逻辑错误 #

注册按钮同时绑定了onclick事件和submit类型，点击时会默认触发表单提交跳转，导致ajax请求还未执行就刷新页面。
修复方案：

• 先修正按钮的语法错误（你重复写了两次<button开头）
• 阻止表单默认提交行为，两种方案二选一：
  方案A：将按钮type改为button，代码如下：

  <button onclick="SubForm()" class="form__button" type="button">Continue</button>
  

  方案B：在SubForm函数末尾加return false阻止默认提交：

  function SubForm(){
      $.ajax({
          url:'https://api.apispreadsheets.com/data/20789/',
          type:'post',
          data:$("#createAccount").serializeArray(),
          success: function(){
            alert("Form Data Submitted :)")
          },
          error: function(){
            alert("There was an error :(")
          }
      });
      return false;
  }
  

3. 其他语法错误修正 #

以下错误会导致浏览器DOM解析异常，引发样式、脚本失效：

• head区域的icon link标签缺少闭合>，补全即可
• 开头缺少<html>根标签，在<!DOCTYPE html>下添加<html>，</body>后补</html>
• 注册表单里多余的未闭合<label>标签直接删除
• 注册表单的用户名输入框重复定义class属性，删除多余的class="form_input"和冗余的input属性，修正后：

  <input type="text" name="username" class="form__input" autofocus placeholder="Username">
  

• 邮箱、密码输入框删除多余的input属性即可。

修复完成后清理浏览器缓存再测试，功能即可恢复正常。

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