You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

复制可用联系表单代码修改后JS失效,请求技术协助

问题排查与修复方案

我帮你梳理了代码里的几个关键问题,这就是导致JavaScript功能完全失效的根源:

1. 无效的表单嵌套(核心问题)

HTML规范明确禁止表单嵌套,你代码里外层有一个<form name="CForm">,里面又套了<form name="myForm">,浏览器会自动忽略这种错误结构,直接导致document.forms["myForm"]找不到对应的表单——这也是你之前测试时抛出Cannot read property 'fname' of undefined的根本原因。

修复:直接删除外层的<form name="CForm" id="CForm" method="post">标签,只保留内层的myForm表单。

2. SessionStorage赋值的潜在问题

页面加载时直接把sessionStorage的值赋值给表单元素,如果这些值不存在(比如第一次打开页面),输入框会显示null,影响用户体验。需要先判断值是否存在再赋值。

3. Send函数使用旧数据

你当前的send函数用的是页面加载时从sessionStorage获取的a、b、c、d变量,但用户修改表单内容后,这些变量不会自动更新,导致发送的是旧数据。必须在send函数里实时获取表单的最新值。

4. 表单元素获取方式不够可靠

用document.forms["myForm"]["fname"]的方式依赖表单名称,不如直接用getElementById获取元素稳定,尤其是在表单结构调整后。


修复后的完整代码

<!DOCTYPE html>
<html>
<head>
<link REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLES.css">
<title>ΣΕΛΙΔΑ ΕΠΙΚΟΙΝΩΝΙΑΣ</title>
</head>
<body>
<form name="myForm" id="form1" onsubmit="return validateForm()" method="post">
<h3>ΦΟΡΜΑ ΕΠΙΚΟΙΝΩΝΙΑΣ</h3>
<label for="fname">ΟΝΟΜΑ ΚΑΙ ΕΠΩΝΥΜΟ </label>
<input type="text" id="fname" name="fname" placeholder="Ονομα&amp;Επωνυμο" class="otherCFcss">
<label for="tel">ΤΗΛΕΦΩΝΟ</label>
<input type="text" id="tel" name="tel" placeholder="Τηλεφωνο.." class="otherCFcss">
<label for="lname">Email</label>
<input type="email" id="email" name="email" placeholder="something@something.com"><br>
<label for="subject">ΘΕΜΑ</label>
<textarea id="message" name="message" placeholder="Γραψε κατι.." style="height:200px" class="otherCFcss"></textarea>
<input type="submit" id="submitbutton" value="ΑΠΟΣΤΟΛΗ">
<input type="reset" id="resetbutton" value="ΑΚΥΡΩΣΗ">
</form>
</body>
</html>
<script>
// 从sessionStorage取值并判断后赋值,避免显示null
var a = sessionStorage.getItem("a");
var b = sessionStorage.getItem("b");
var c = sessionStorage.getItem("c");
var d = sessionStorage.getItem("d");

if (a) document.getElementById("fname").value = a;
if (b) document.getElementById("tel").value = b;
if (c) document.getElementById("email").value = c;
if (d) document.getElementById("message").value = d;

function send() {
    // 实时获取表单最新值
    var name = document.getElementById("fname").value;
    var tel = document.getElementById("tel").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;
    
    window.location.href = `mailto:dimtrispap1999@gmail.com?subject=Αυτόματο μήνυμα &body=Όνοματεπωνυμο: ${name}%0AΤηλέφωνο: ${tel}%0AEmail: ${email}%0AΑίτημα,ερωτημα: ${message}`;
}

function validateForm() {
    // 直接通过ID获取表单元素,避免依赖表单名称
    var name = document.getElementById("fname").value;
    var tel = document.getElementById("tel").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;

    if (!name || !tel || !email || !message) {
        alert("Fill in the blanks");
        return false;
    } else {
        var confirmwindow = window.open("", "_blank", "width=560,height=190");
        confirmwindow.document.writeln("<h3>Σιγουρα θελετε να στειλετε την παρακατω φορμα?</h3>");
        confirmwindow.document.write(`<b>Name*: </b>${name}<br>`);
        confirmwindow.document.writeln(`<b>Τηλεφωνο*: </b>${tel}<br>`);
        confirmwindow.document.writeln(`<b>Email*: </b>${email}<br>`);
        confirmwindow.document.writeln(`<b>Message*: </b><br>${message}<br><br>`);
        confirmwindow.document.write("<input type='button' onclick='opener.send(); window.close();' id='submitbutton' value='ΑΠΟΣΤΟΛΗ'>"+ " ");
        confirmwindow.document.writeln("<input type='button' onclick='window.close();' id='resetbutton' value='cancel'>");
    }
    return false;
}
</script>

内容的提问来源于stack exchange,提问作者user9074706

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 06:58:18