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!');
});

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

3 个答案: