javascript - 协助js函数/警报删除表单输入

Question

我遇到了一些奇怪的事情，这让我意识到我对 JS 的东西并不了解。所以我想我应该问一个关于正在发生的事情的问题，看看是否有帮助。我有一个简单的表单，带有三个“文本区域”输入，并且有一个“保存”按钮。保存按钮会触发一个 js 函数，该函数收集输入内容并发出警报显示它们...

非常简单的应用程序，但我没想到的是，当您“关闭”警报框时；表单上输入的所有数据都将被删除...

这是我的代码:

<form>

<strong>Make</strong><br/>
<textarea id="make_notes" rows="4" cols="50">

</textarea><br/><br/>

<strong>Model</strong><br/>
<textarea id="model_notes" rows="4" cols="50">

</textarea><br/><br/>

<strong>Features</strong><br/>

<textarea id="features_notes" rows="4" cols="50">

</textarea>

<br/><br/>

<button onclick="side_form_js2()">Save2</button>

</form>

<script>
function side_form_js2() {

var element1 = document.getElementById("make_notes");
    var make_notes_var = element1.value;

var element2 = document.getElementById("model_notes");
    var model_notes_var = element2.value;

    var element3 = document.getElementById("features_notes");
    var features_notes_var = element3.value;

alert(make_notes_var + "I am an alert box!22222" + model_notes_var +   features_notes_var);
}
</script>

所以我真的不确定是什么导致表单输入被删除。这几乎就像页面正在重新加载，但我认为情况并非如此。任何人都可以阐明这一点吗？谢谢...

附注不知道这是否有任何区别，但只是在我的 PC 上使用 Xampp 在本地运行它...

Answer 1

默认是重新加载，将您的代码更改为此，它应该可以工作

<button onclick="return side_form_js2()">Save2</button>

然后在您的函数中在警报后添加 return false，如下所示:

alert(make_notes_var + "I am an alert box!22222" + model_notes_var +   features_notes_var);
return false;