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

Question

我已将代码简化到非常基本的级别，以试图弄清楚为什么，当我向我的任何包含Javascript的HTML页面添加表单时，该页面都会呈现两次：一次是使用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从所有输入中获取所需的数据。

Answer 1

原因是，单击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!
}

Answer 2

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

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

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

在这种情况下，表单的action属性以及method都没有意义-两者均未使用。

Answer 3

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

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