新手开发者求助：实现类似Smartwater的无跳转底部新闻订阅表单

问题说明 #

新手开发者想要实现类似Smartwater或Monster Energy Drink的底部新闻订阅表单：提交信息后无需跳转页面，直接显示确认消息，但在JavaScript和CSS过渡动画部分遇到困难。尝试移除form的action属性后，页面仍会尝试跳转。

现有代码 #

HTML #

<section class="footerForm" style="padding: 10px;" id="newsletterSignup">
    <form action="welcome.php" method="post">
        <fieldset>
            <legend>
                <h1 style="color:#443627;">Come Along!</h1>Sign Up to our newsletter to hear our latest updates, promotions, and more.
            </legend><br>
            
            <label for="email">Email Address*</label><br>
            <input type="email" name="email" id="email" required="required"><br>
            
            <label for="dob">Date Of Birth*</label><br>
            <select name="dob" size="1" required="required" id="month">
                <option></option>
                <option>January</option>
                <option>Febuary</option>
                <option>March</option>
                <option>Abril</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
            <select name="dob" size="1" required="required" id="day">
                <option></option>
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
                <option>07</option>
                <option>08</option>
                <option>09</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
            </select>
            
            <select name="dob" size="1" required="required" id="year">
                <option>2023</option>
                <option>2022</option>
                <option>2021</option>
                <option>2020</option>
                <option>2019</option>
                <option>2018</option>
                <option>2017</option>
                <option>2016</option>
                <option>2015</option>
                <option>2014</option>
                <option>2013</option>
                <option>2012</option>
                <option>2011</option>
                <option>2010</option>
                <option>2009</option>
                <option>2008</option>
                <option>2007</option>
                <option>2006</option>
                <option>2005</option>
                <option>2004</option>
                <option>2003</option>
                <option>2002</option>
                <option>2001</option>
                <option>2000</option>
                <option>1999</option>
                <option>1998</option>
                <option>1997</option>
                <option>1996</option>
                <option>1995</option>
                <option>1994</option>
                <option>1993</option>
                <option>1992</option>
                <option>1991</option>
                <option>1990</option>
                <option>1989</option>
                <option>1988</option>
                <option>1987</option>
                <option>1986</option>
                <option>1985</option>
                <option>1984</option>
                <option>1983</option>
                <option>1982</option>
                <option>1981</option>
                <option>1980</option>
                <option>1979</option>
                <option>1978</option>
                <option>1977</option>
                <option>1976</option>
                <option>1975</option>
                <option>1974</option>
                <option>1973</option>
                <option>1972</option>
                <option>1971</option>
                <option>1970</option>
                <option>1969</option>
                <option>1968</option>
                <option>1967</option>
                <option>1966</option>
                <option>1965</option>
                <option>1964</option>
                <option>1963</option>
                <option>1962</option>
            </select><br><br>
            <label for="tos">I agree to the Terms of Use and Privacy Policy of AguaVida</label>
            <input type="checkbox" id="tos" name="tos"> <br>
                
        </fieldset>
        <input type="button" value="Submit" class="button" id="newsletterButton">
    </form>
    
    <div class="confirmationNews">
        <h3>You're all set! Wait for a confirmation email.</h3>
    </div>
</section>

CSS #

@keyframes disappear{
    from{
        opacity: 100%;
        display: block;
    }
    to{
        opacity: 0%;
        display:none;
    }
}

@keyframes appear{
    from{
        opacity: 0%;
        display:none;
    }
    to{
        opacity: 100%;
        display: flex;
    }
}

解决方案 #

1. 修正HTML与阻止表单跳转 #

表单即使移除action，默认也会提交到当前页面导致刷新。需要：

• 将提交按钮改为type="submit"（符合表单语义）
• 通过JavaScript阻止表单的默认提交行为

修改后的表单按钮：

<input type="submit" value="Submit" class="button" id="newsletterButton">

2. 优化CSS动画 #

display属性无法参与过渡/动画，改用opacity和visibility控制显示隐藏，添加过渡效果让动画更流畅：

/* 默认隐藏确认消息 */
.confirmationNews {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 表单隐藏状态 */
.footerForm form.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 确认消息显示状态 */
.confirmationNews.show {
    opacity: 1;
    visibility: visible;
}

3. 实现JavaScript逻辑 #

监听表单提交事件，验证必填项与协议勾选状态，验证通过后切换表单和确认消息的显示状态：

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('#newsletterSignup form');
    const confirmation = document.querySelector('.confirmationNews');
    
    form.addEventListener('submit', function(e) {
        // 阻止表单默认提交行为
        e.preventDefault();
        
        // 验证表单
        const email = document.getElementById('email').value;
        const month = document.getElementById('month').value;
        const day = document.getElementById('day').value;
        const year = document.getElementById('year').value;
        const tos = document.getElementById('tos').checked;
        
        if (!email || !month || !day || !year || !tos) {
            alert('请填写所有必填项并同意条款');
            return;
        }
        
        // 隐藏表单，显示确认消息
        form.classList.add('hidden');
        confirmation.classList.add('show');
        
        // 可选：用fetch发送表单数据到后端
        /*
        fetch('welcome.php', {
            method: 'POST',
            body: new FormData(form)
        }).then(response => {
            // 处理后端响应
        }).catch(error => {
            console.error('提交失败:', error);
        });
        */
    });
});

最终效果说明 #

• 表单提交时不会跳转页面
• 表单与确认消息会平滑切换显示状态
• 包含基础表单验证，确保用户填写完整信息
• 可扩展后端数据提交逻辑

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