如何在输入表单输入时停止页面刷新？

问题描述

我为一个小问题而烦恼。 我的网络应用程序中有一个聊天框，其中包含一个输入[type ='text']和一个按钮。 我想要的是每当用户单击按钮时，相应的消息就会发送到服务器，并清除按钮单击时的输入字段。

我遇到一个问题，当用户输入input [type ='text']时，它会导致控制器刷新。 同样，在单击按钮时，控制器也会刷新。

我发现很少有线程提到类似的问题，但是以某种方式在这些线程中提到的解决方案对我不起作用。

以下是我的代码：

<form name="form">
  <div class="input-group">
    <input type="text" name="message" placeholder="Type Message ..." ng-model="form.newMessage" class="form-control"/><span class="input-group-btn">
      <button type="button" ng-click="submitNewMessage()" class="btn btn-info btn-flat">Send</button></span>
  </div>
</form>

谁能帮忙吗？

谢谢

更新：

根据建议的解决方案，我修改了代码。 但是它仍然没有唤醒：

<form name="form" ng-submit="submitNewMessage()">
  <div class="input-group">
    <input type="text" name="message" placeholder="Type Message ..." ng-model="form.newMessage" class="form-control"/><span class="input-group-btn">
      <button type="submit" class="btn btn-info btn-flat">Send</button></span>
  </div>
</form>

这是我的控制器代码：

$scope.submitNewMessage = function(){
  event.preventDefault();
  console.log($scope.form.newMessage);

}

另外，我的怀疑甚至是在输入框中写任何东西，它都会刷新页面。 为什么会这样呢？ 它不应该等到我提交表格吗？

更新2：似乎实际问题与此不同。 我创建了一个不同的问题，这也可能会解决此问题。 有人可以讲一下吗？ 谢谢

要在单击按钮时停止重新加载页面，请尝试以下操作：

 $scope.submitNewMessage = function($event) { event.preventDefault(); // your code $scope.form.newMessage = ''; // to empty your input afterwards }