如何实现提交表单后切换并仅显示指定的登录/注册表单？

看起来你已经搭好了登录/注册的基础切换逻辑，现在要实现注册提交后自动切到登录表单，这里有两种实用方案，你可以根据项目场景选：

方案一：后端渲染控制显示状态（适合传统PHP项目） #

这种方式不用额外写前端JS，靠后端处理注册请求后，直接控制页面渲染时只显示登录表单。

步骤1：给表单容器加ID并修改渲染逻辑 #

先给两个表单的外层div加唯一ID，再通过PHP变量控制显示隐藏：

<?php
// 默认显示注册表单（和你现有逻辑对齐）
$activeForm = 'signup';

// 处理注册提交请求
if(isset($_POST['signup'])){
    // 这里写你的注册逻辑：验证字段、验证码、插入用户数据等
    // 假设注册成功，切换到登录表单
    $registrationSuccess = true; // 根据实际验证结果修改
    if($registrationSuccess){
        $activeForm = 'login';
    }
}
?>

<!-- 登录表单容器 -->
<div class="col-lg-6 <?php echo $activeForm === 'login' ? '' : 'd-none'; ?>" id="login-form-container">
    <h3>Student Log In</h3>
    <hr/>
    <form method="post">
        <div class="form-group">
            <input type="text" name="email2" id="email2" placeholder="Enter Your Email" class="text-line"/>
        </div>
        <div class="form-group">
            <input type="password" name="password2" id="password2" placeholder="Enter Your Password" class="text-line"/>
        </div>
        <div class="form-group">
            <input type="submit" name="login" id="login" value="Login" class="btn btn-warning"/>
        </div>
    </form>
</div>

<!-- 注册表单容器 -->
<div class="col-lg-6 <?php echo $activeForm === 'signup' ? '' : 'd-none'; ?>" id="signup-form-container">
    <h3>Student Sign Up</h3>
    <hr/>
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <input type="text" name="fname" id="fname" placeholder="Your First Name" class="text-line"/>
        </div>
        <div class="form-group">
            <input type="text" name="lname" id="lname" placeholder="Your Last Name" class="text-line"/>
        </div>
        <div class="form-group">
            <p id="captImg"><?php echo $captchaImg; ?></p>
            <input type="text" name="captcha" value="" class="captcha" placeholder="Enter Image Inputs"/>
            <a href="javascript:void(0);" class="refreshCaptcha" >Can't Read Please Refresh Image</a>
        </div>
        <div class="form-group">
            <input type="submit" name="signup" id="signup" value="Sign Up" class="btn btn-warning"/>
        </div>
    </form>
</div>

这里用了Bootstrap的d-none类隐藏容器，如果你没用到Bootstrap，换成style="display: none;"就行。

逻辑说明 #

• 页面初始化默认显示注册表单，和你现有切换逻辑匹配
• 用户提交注册后，后端处理完逻辑，若注册成功就把$activeForm设为login，页面渲染时自动隐藏注册表单、显示登录表单

方案二：AJAX异步提交+前端切换（适合无刷新交互） #

这种方式不会刷新页面，提交注册后直接在前端切换表单，交互体验更流畅。

步骤1：给表单和容器加ID #

修改HTML，给注册表单和两个容器加ID：

<!-- 登录表单容器 -->
<div class="col-lg-6 d-none" id="login-form-container">
    <h3>Student Log In</h3>
    <hr/>
    <form method="post">
        <div class="form-group">
            <input type="text" name="email2" id="email2" placeholder="Enter Your Email" class="text-line"/>
        </div>
        <div class="form-group">
            <input type="password" name="password2" id="password2" placeholder="Enter Your Password" class="text-line"/>
        </div>
        <div class="form-group">
            <input type="submit" name="login" id="login" value="Login" class="btn btn-warning"/>
        </div>
    </form>
</div>

<!-- 注册表单容器 -->
<div class="col-lg-6" id="signup-form-container">
    <h3>Student Sign Up</h3>
    <hr/>
    <form method="post" enctype="multipart/form-data" id="signup-form">
        <div class="form-group">
            <input type="text" name="fname" id="fname" placeholder="Your First Name" class="text-line"/>
        </div>
        <div class="form-group">
            <input type="text" name="lname" id="lname" placeholder="Your Last Name" class="text-line"/>
        </div>
        <div class="form-group">
            <p id="captImg"><?php echo $captchaImg; ?></p>
            <input type="text" name="captcha" value="" class="captcha" placeholder="Enter Image Inputs"/>
            <a href="javascript:void(0);" class="refreshCaptcha" >Can't Read Please Refresh Image</a>
        </div>
        <div class="form-group">
            <input type="submit" name="signup" id="signup" value="Sign Up" class="btn btn-warning"/>
        </div>
    </form>
</div>

步骤2：添加AJAX提交逻辑 #

在页面底部加JS代码，拦截注册表单的默认提交行为：

document.getElementById('signup-form').addEventListener('submit', function(e) {
    // 阻止表单默认刷新提交
    e.preventDefault();
    
    // 收集表单数据
    const formData = new FormData(this);
    
    // 发送AJAX请求到后端处理注册
    fetch('your-reg-handler.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            // 注册成功，切换到登录表单
            document.getElementById('signup-form-container').classList.add('d-none');
            document.getElementById('login-form-container').classList.remove('d-none');
            // 可选：添加注册成功提示
            alert('Registration successful! Please log in.');
        } else {
            // 注册失败，显示错误信息
            alert(data.error || 'Registration failed. Please try again.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Network error. Please try again later.');
    });
});

步骤3：后端处理AJAX请求 #

创建your-reg-handler.php文件，处理注册逻辑并返回JSON结果：

<?php
header('Content-Type: application/json');
$response = ['success' => false];

if(isset($_POST['signup'])) {
    // 这里写你的注册逻辑：验证姓名、验证码、插入数据库等
    $isCaptchaValid = true; // 替换成你的验证码验证逻辑
    $isFieldsValid = !empty($_POST['fname']) && !empty($_POST['lname']);
    
    if($isCaptchaValid && $isFieldsValid) {
        // 执行插入用户数据的操作
        // ...
        $response['success'] = true;
    } else {
        $response['error'] = $isCaptchaValid ? 'Please fill all required fields.' : 'Invalid captcha.';
    }
}

echo json_encode($response);
?>

两种方案都能满足需求：方案一更简单，适合传统多页面项目；方案二体验更流畅，适合追求现代交互的场景。

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