在 onsubmit 上调用 javascript 来发布用户输入

Question

我在提交时遇到了非常困难的时间。每次我尝试调用我的函数时，我什么也得不到。一旦我点击“提交”，我的表格就会清空，没有任何反应。它应该调用一个新页面来显示用户输入的信息。

我在 stackoverflow 上一个接一个地回答了问题，但找不到我的答案。我只是在学习 Javascript，这对你们所有人来说可能是一个非常简单的问题，但是由于我在这里找不到任何新手级别的东西，所以我一直在向你们寻求我的“简单”答案。我不确定如何在没有大量代码的情况下提交这个问题......所以......我为冗长的代码道歉。我只使用了表格中的一个示例。

<script>
function ScheduledEvent(evtDate){
    evt.evtDate = evtDate;
    evt.PrintEvent = PrintEvent
}
function PrintEvent(){
    document.write("<p> You have scheduled an event on " + evt.evtDate);
}
function Validate(){
    with (document.evtForm){
        events = new ScheduledEvent(evtDate.value);
    }
    with (events){
        evt.PrintEvent();
    }
    return true;
}
</script>

<form name="evtForm" onsubmit="Validate()">

如果您需要查看更多代码，我很乐意提供帮助。所有表单名称和变量都匹配。我无法弄清楚这一点，并希望得到您的帮助。

Answer 1

那么你做错了。这背后有很多原因——

1. 您的Validate() 方法返回true，这意味着它不会停止表单提交。所以表单将被提交并且相同的页面将重新加载。这就解释了为什么它会被重置。它发生在本地，因此您无法看到页面刷新。

2. 您在提交表单之前调用了PrintEvent()。因此document.write实际上是在文档中写入值，但写入后，页面被回发并重新加载。所以你看不到更新的信息。

3. 你正在使用document.write，它只写在当前页面，所以它不会带你到不同的页面。请记住，每次页面加载时，javascript 也会加载，这意味着您的 javascript 对象和状态会丢失并且会重新初始化。

4. 当 javascript 使用 document.write 写入时，它不会清除以前呈现的项目，包括 HTML、表单以及您在该页面上已经呈现的任何内容。它只会在body 标记的底部附加该行。进行测试，从validate返回false，您将能够看到写入的项目。

5. 如果您愿意使用新页面，则必须将值保存到某个位置，无论是在服务器上还是使用客户端 local storage 或 cookie。尝试在谷歌上搜索如何做到这一点。