提交HTML表单后跳转第三方网站并重置表单的实现方案

先修复HTML语法错误 #

原代码里的链接标签存在闭合错误：<a href="https://domainname.com/" target="_blank" >Already registered?</h3> 中的</h3>应该改为</a>，错误的闭合标签会破坏DOM结构，可能影响表单的正常交互。

核心解决方案：用JavaScript手动控制提交与重置 #

默认表单提交到新窗口（target="_blank"）时，原页面不会自动触发表单重置，因为原页面未刷新且无重置逻辑。我们可以通过监听表单的submit事件，手动完成跳转和重置操作：

<section class="green-bg">
    <div class="container wide">
        <div class="row joinnow-div" id="joinnow">
            <!-- Form styles-->
            <h3>Join us today</h3>
            <form action="https://domainname.com/" target="_blank" id="joinnow-form">
                <label for="businessname">Your business's name</label>
                <input type="text" id="businessname" name="businessname" placeholder="Business Name" required>

                <label for="phonenumber">Contact number</label>
                <input type="tel" id="phonenumber" name="phonenumber" placeholder="eg. 07700100100" required>

                <label for="address">Your business's street address</label>
                <textarea type="text" id="address" name="address" placeholder="eg. 123 Business street" required></textarea>

                <label for="emailaddress">Email address</label>
                <input type="email" id="emailaddress" name="emailaddress" placeholder="Eg. yourmail@email.com" required>

                <a href="https://domainname.com/" target="_blank" >Already registered?</a><br/><br/>
                <input type="submit" value="Submit">                            
            </form>
        </div>
    </div>
</section>

<script>
const joinForm = document.getElementById('joinnow-form');
joinForm.addEventListener('submit', function(e) {
    // 先校验表单是否符合必填规则
    if (!this.checkValidity()) {
        this.reportValidity();
        e.preventDefault();
        return;
    }
    // 手动构造带参数的跳转URL，打开新窗口
    const formData = new FormData(this);
    const targetUrl = `${this.action}?${new URLSearchParams(formData)}`;
    window.open(targetUrl, '_blank');
    // 重置当前页面的表单
    this.reset();
    // 阻止默认提交行为，避免重复跳转
    e.preventDefault();
});
</script>

逻辑说明 #

1. 表单验证：先通过checkValidity()校验必填项，若未通过则提示用户，不执行后续操作
2. 手动跳转：用FormData收集表单参数，构造完整的跳转URL后通过window.open打开新窗口
3. 表单重置：调用表单的reset()方法，清空所有输入框内容
4. 阻止默认行为：避免浏览器默认的表单提交逻辑，防止冲突

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