表单预览按钮弹窗异常：提交按钮误触发弹窗问题排查

核心问题分析 #

1. 无效的嵌套表单：HTML中嵌套了两个<form>标签，违反HTML规范，浏览器会自动修正DOM结构，导致表单事件与提交逻辑混乱，两个提交按钮都会触发外层表单的onsubmit事件。
2. JavaScript判断逻辑错误：if(myForm === "#formID") 完全错误——document.querySelector("#formID")返回DOM元素对象，和字符串"#formID"永远不相等，导致弹窗逻辑未被正确绑定。实际触发弹窗的是第一个表单上的onsubmit="target_popup(this)"（未提供对应函数代码，但会在所有提交操作时执行）。
3. 未区分提交按钮行为：两个<input type="submit">默认都会触发表单onsubmit事件，未做区分处理，导致点击“提交”时也触发弹窗。

分步修复 #

1. 修复HTML结构（移除嵌套表单） #

删除多余<form>标签，保留单个表单，利用按钮的formaction属性区分提交目标：

<html lang="cs-cz">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="styly.css">
</head>

<body>
<div class="box">
    <h1>ODVOZY</h1>

    <form name="mainForm" method="POST" id="formID">
        <p class="info"><input type="text" name="name" class="textfield1" placeholder="Jméno a příjmení"/></p>
        <p class="info"><input type="text" name="adress" class="textfield1" placeholder="Adresa"/></p>
        <p class="info"><input type="text" name="contact" class="textfield1" placeholder="Kontakt"/></p>
        <p class="info"><input type="text" name="model" class="textfield1" placeholder="Typ zboží"/></p>
        <p class="info"><input type="datetime-local" name="date" class="textfield1" placeholder="Date"/></p>

        <select name="money" class="info1">
            <option value="Vyber způsob platby">Vyber způsob platby</option>
            <option value="Placeno">Placeno</option>
            <option value="Platit doma">Platit doma</option>
            <option value="Placeno jen odvoz">Placeno jen odvoz</option>
            <option value="Jiné (viz poznámky)">Jiné (viz poznámky)</option>
        </select>
        
        <select name="city" class="info1">
            <option value="Vyber pobočku">Vyber pobočku</option>
            <option value="Dvůr Králové n/L">Dvůr Králové n/L</option>
            <option value="Hořice">Hořice</option>
        </select>

        <textarea name="message" class="info1" cols="20" rows="5" placeholder="Poznámka"></textarea>
        <p>&nbsp;</p> 

        <!-- 预览按钮：指定提交到preview.php -->
        <input type="submit" name="preview" value="Tisk" class="boxa" formaction="preview.php" />
        <input type="reset" value="Reset" class="boxc" />
        <!-- 提交按钮：指定提交到mailer.php -->
        <input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" />
    </form>
</div>
<script src="script.js"></script>
</body>
</html>

注：移除了select标签重复的name属性和无效的method="post"属性。

2. 修复JavaScript逻辑（区分按钮行为） #

修改JS代码，移除错误判断，在onsubmit事件中识别触发按钮，仅预览按钮触发弹窗：

var myForm = document.querySelector("#formID");

if (myForm) { // 确保表单存在再绑定事件
    myForm.onsubmit = function() {
        const submitButton = document.activeElement;
        if (submitButton.name === 'preview') {
            // 仅预览按钮打开弹窗
            window.open('about:blank', 'Popup_Window', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left=312,top=234');
            this.target = 'Popup_Window';
        } else {
            // 提交按钮恢复默认目标
            this.target = '_self';
        }
    };
}

3. 可选：绑定按钮点击事件（更直观） #

直接给预览按钮绑定点击事件，手动控制表单提交与弹窗，彻底隔离逻辑：

const previewBtn = document.querySelector('input[name="preview"]');
const form = document.querySelector("#formID");

if (previewBtn && form) {
    previewBtn.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认提交
        // 打开弹窗
        window.open('about:blank', 'Popup_Window', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left=312,top=234');
        // 设置表单目标并提交到预览接口
        form.target = 'Popup_Window';
        form.action = 'preview.php';
        form.submit();
        // 恢复默认目标，避免影响提交按钮
        form.target = '_self';
    });
}

内容的提问来源于stack exchange，提问作者Ondra Tomáššek