<form>导致我的JavaScript代码出现问题

<form> is causing problems with my JavaScript code

本文关键字：代码 问题 JavaScript form 我的      更新时间：2023-09-26

我已经将我的代码简化到一个非常基本的级别，试图弄清楚为什么当我向任何包含Javascript的HTML页面添加表单时，页面呈现两次：一次使用JavaScript，一次不使用JavaScript，让我回到起点。

这是简单的 HTML：

<form action="test.php" method="post">
<div class="section">
    <fieldset>
         <p id="myP"></p>
         <button type='submit' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>
    </fieldset>
</div> <!-- ends section -->
</form>
<script type="text/javascript" src="inc/js/scripts.js"></script>

所以我只有一个空段落和一个保存按钮。

然后我有这个Javascript代码，当单击"保存"按钮时，它只是简单地将"Hello world！"写入段落元素：

var saveButton = document.getElementById("save_button");       // Save button
var displaySomeText = function () {
   var myParagraph = document.getElementById("myP");       
   myParagraph.textContent = "Hello World!";
}
saveButton.onclick = displaySomeText;

问题是，当我单击"保存"按钮时，"Hello world！"会显示一秒钟，然后消失。

但是如果我删除 FORM 元素，它可以正常工作。

知道为什么会发生这种情况吗？
在实际代码中，我需要将数据提交到数据库，我希望能够使用_POST从所有输入中获取所需的数据。

原因是，单击submit按钮后，它会"提交"表单。尝试更改按钮的type="button"，这不会发生：

<!------vvvvvvvvvvvvv Change this!!! -->
<button type='button' name='NewClassTypes'
        value='NewClassTypes' id='save_button'>Save</button>

否则，您需要在函数中提供return false。这也行得通：

var displaySomeText = function () {
   var myParagraph = document.getElementById("myP");       
   myParagraph.textContent = "Hello World!";
   return false; // Add this!
}

submit按钮类型具有特殊功能：它使浏览器提交表单。在其上放置单击处理程序并不能阻止这种情况的发生。因此，结果是预期的。

为了不提交表单，您需要更改按钮类型：

<input type='button' name='NewClassTypes' value='NewClassTypes' id='save_button'>Save</button>

在这种情况下，窗体的 action 属性和method都没有意义 - 它们都没有使用。

您可能会发现在解决此类问题时使用 jQuery 更容易。 

$('#save_button').on('click', function(e){
  e.preventDefault();  // don't submit the form as usual. 
  $('#myP').text('Hello World!');
});
相关文章：