复制可用联系表单代码修改后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="Ονομα&Επωνυμο" 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
相关产品推荐
相关产品推荐

