表单提交时confirm()函数无法打开confirm.html页面的问题求助

问题描述 #

完成课程作业时，制作表单信息确认页面：补充教授提供的confirm()函数后，该函数负责在表单提交时把数据存入localStorage并打开confirm.html，但无法成功跳转；自己写的testOpen()函数却能正常打开页面。相关代码如下：

JavaScript代码 #

function confirm(){
var firstname = getElementById("fname").value;
var lastname = getElementById("lname").value;
var streetaddress = getElementById("streetaddress").value;
var currentstate = getElementById("currentstate").value;
var phone = getElementById("phone").value;
var email = getElementById("email").value;
// var gender = getElementById("gender").value;
var programmingexp = getElementById("programmingexp").value;
var proglang = getElementById("proglang").value;
// var yearofstudy = getElementById("yearofstudy").value;
// var personalinfo = getElementById("personalinfo").value;

localStorage.setItem("firstname", firstname);
localStorage.setItem("lastname", lastname);
localStorage.setItem("streetaddress", streetaddress);
localStorage.setItem("currentstate", currentstate);
localStorage.setItem("phone", phone);
localStorage.setItem("email", email);
// localStorage.setItem("gender", gender);
localStorage.setItem("programmingexp", programmingexp);
localStorage.setItem("proglang", proglang);
// localStorage.setItem("yearsofstudy", yearsofstudy);
// localStorage.setItem("personalinfo", personalinfo);

var confirmW = window.open("confirm.html");

return confirmW;
}

function testOpen() {
    window.open("confirm.html");
}

HTML代码 #

<!-- Activity-4 Creating register.html file
register.html -->
<!DOCTYPE html><!-- Doctype declaration -->
<html lang="en-us">
<head>
    <meta charset="utf-8"><!-- meta declaration -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UNCP-ACM Student Chapter</title> <!-- title declaration -->
    <link rel="stylesheet" href="theme.css">
    
    <script src="register.js" type="text/javascript"></script>
</head>
<body>
    <h1>ACM Student Chapter of UNCP</h1>
    <h2>APPLICATION FORM</h2>
    <form name="myform" onsubmit="return confirm();">
    <fieldset class="grid-container">
        <legend>Personal Information</legend>
        <label class="lname" for="lname">Last Name:</label>
        <input class="lname" type="text" id="lname" name="lname">
        <label class="fname" for="fname">First Name:</label>
        <input class="fname" type="text" id="fname" name="fname"><br>
        
        <label class="streetaddress" for="streetaddress">Street Address:</label>
        <input class="streetaddress" type="text" id="streetaddress" name="streetaddress">
        
        <label class="currentstate" for="currentstate">Current State:</label>
        <select class="currentstate" id="currentstate">
            <option value="Florida">Florida</option>
            <option value="North Carolina">North Carolina</option>
            <option value="South Carolina">South Carolina</option>
            <option value="Georgia">Georgia</option>
            <option value="Alabama">Alabama</option>
        </select><br>
        
        <label class="phone" for="phone">Enter your phone number:</label>
        <input class="phone" type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="###-###-####">
        <label class="email" for="email">Email:</label>
        <input class="email" type="email" id="email" name="email" placeholder="name@uncp.edu"><br>
        
        <p class="gender">Gender:</p>
        <div class="gender" id="gender">
            <input type="radio" id="male" name="gender"><label for="male">Male</label>
            <input type="radio" id="female" name="gender"><label for="female">Female</label>
        </div>
        
        <label class="programmingexp" for="programmingexp">Years of programming experience:</label>
        
        <div class="slider"> 
            <label>0</label>
            <input type="range" min="0" max="20" value="10" id="programmingexp">
            <label>20</label>
        </div>
        
        <label class="proglang" for="proglang">Select all the programming languages that you know (hold ctrl or shift key to select multiple entries)</label>
        <select class="proglang" name="proglang" id="proglang" multiple>
            <option value="c++">C++</option>
            <option value="java">Java</option>
            <option value="python">Python</option>
            <option value="c#">C#</option>
        </select>
        </fieldset>
        <br>
        
        <fieldset id="yearofstudy">
        <legend>Year of study</legend>
        <label>
            <input type="checkbox" value="">Freshman
        </label>
        
        <label>
            <input type="checkbox" value="">Sophomore
        </label>
        
        <label>
            <input type="checkbox" value="">Junior
        </label>
        
        <label>
            <input type="checkbox" value="">Senior
        </label>
        </fieldset>
        
        
        <br>
        <label for="personalinfo">Write something about you....</label><br><br>
        <textarea id="personalinfo" name="personalinfo" rows="8" cols="50"></textarea>
        
        <input type="submit" value="submit">
    </form>
</body>  
</html>

问题根源 #

1. 函数名冲突：浏览器内置window.confirm()弹窗函数，自定义的confirm()函数会覆盖内置函数，但表单提交场景下浏览器对内置函数的优先级处理异常，导致自定义函数执行出错。
2. 缺少document前缀：getElementById()是document对象的方法，直接调用会触发ReferenceError，代码执行中断，后续的window.open()无法运行。
3. 表单默认提交行为未阻止：即使前面代码执行成功，表单默认会刷新页面，可能导致新窗口被浏览器拦截，或页面刷新打断新窗口打开流程。

修复方案 #

1. 修改函数名 #

将自定义的confirm()改为其他名称（如submitFormAndConfirm()），避免和内置函数冲突。

2. 补充document前缀 #

所有getElementById()调用前加上document.，确保正确获取DOM元素。

3. 阻止表单默认提交行为 #

函数末尾返回false，防止页面刷新打断流程。

修复后的JavaScript代码 #

function submitFormAndConfirm(){
    // 补充document前缀
    var firstname = document.getElementById("fname").value;
    var lastname = document.getElementById("lname").value;
    var streetaddress = document.getElementById("streetaddress").value;
    var currentstate = document.getElementById("currentstate").value;
    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;
    var programmingexp = document.getElementById("programmingexp").value;
    var proglang = document.getElementById("proglang").value;

    localStorage.setItem("firstname", firstname);
    localStorage.setItem("lastname", lastname);
    localStorage.setItem("streetaddress", streetaddress);
    localStorage.setItem("currentstate", currentstate);
    localStorage.setItem("phone", phone);
    localStorage.setItem("email", email);
    localStorage.setItem("programmingexp", programmingexp);
    localStorage.setItem("proglang", proglang);

    window.open("confirm.html");
    
    // 返回false阻止表单默认提交
    return false;
}

function testOpen() {
    window.open("confirm.html");
}

修复后的HTML表单部分 #

修改onsubmit属性，调用新函数名：

<form name="myform" onsubmit="return submitFormAndConfirm();">

额外说明 #

• 多选下拉框proglang当前仅获取第一个选中项，若需收集所有选中值，需遍历选项：

  var proglangSelect = document.getElementById("proglang");
  var proglang = Array.from(proglangSelect.options)
                      .filter(option => option.selected)
                      .map(option => option.value)
                      .join(",");
  

• 性别单选框、学年复选框的取值逻辑未在原代码中处理，若需存储这些字段需补充对应逻辑。

内容的提问来源于stack exchange，提问作者Savage's Project