如何在表格中输入输入停止页面刷新？ [英] How to stop page refresh on typing in Form input?

问题描述

我打破我的头了一个小问题。我有一个包含一个输入[类型='文本']和一个按钮我的web应用程序一个聊天框。我要的是，每当用户点击该按钮，相应的消息被发送到服务器并清除按钮点击输入字段。

我面对当用户在输入[类型='文本']，它会导致在我的控制器刷新的问题。此外，在单击该按钮时，控制器将刷新。

我发现它提到类似的问题，但不知何故，在这些线程中提到的解决方案是不是为我工作的线程数。

<一个href=\"http://stackoverflow.com/questions/12319758/angularjs-clicking-a-button-within-a-form-causes-page-refresh\">Angularjs点击表格中的一个按钮会刷新页面

以下是我的code：

 ＆LT;表格名称=形式＆GT;
  ＆LT; D​​IV CLASS =输入组＆GT;
    ＆LT;输入类型=文本名称=消息占位符=类型消息......NG模型=form.newMessage级=表格控/＆GT;＆LT;跨度类=输入组-btn＆GT;
      ＆LT;按钮式=按钮NG点击=submitNewMessage（）级=BTN BTN-信息BTN-平＆GT;发送和LT; /按钮＆GT;＆LT; / SPAN＆GT;
  ＆LT; / DIV＆GT;
＆LT; /表及GT;
 

任何人都可以请帮助呢？

感谢

更新：

根据建议的解决方案我修改了code。但现在还没有工作呢：

 ＆LT;表格名称=形式NG提交=submitNewMessage（）＆GT;
  ＆LT; D​​IV CLASS =输入组＆GT;
    ＆LT;输入类型=文本名称=消息占位符=类型消息......NG模型=form.newMessage级=表格控/＆GT;＆LT;跨度类=输入组-btn＆GT;
      ＆LT;按钮式=提交级=BTN BTN-信息BTN-平＆GT;发送和LT; /按钮＆GT;＆LT; / SPAN＆GT;
  ＆LT; / DIV＆GT;
＆LT; /表及GT;
 

下面是我的控制器code：

  $ scope.submitNewMessage =功能（）{
  。事件preventDefault（）;
  的console.log（$ scope.form.newMessage）;}
 

此外，我怀疑甚至在输入框中写任何东西，它刷新页面。为什么会这样呢？难道不应该等到我提交表单？

更新2：看来实际的问题是与此不同。我创建了一个不同的问题，这可能会解决这个问题为好。谁能请故事一看<一个href=\"http://stackoverflow.com/questions/31732258/view-is-getting-intialized-again-and-again\">this?
谢谢

解决方案

要停止当您单击该按钮重新加载页面，试试这个：

\r

\r

$ scope.submitNewMessage =功能（$事件）{\r
  。事件preventDefault（）;\r
  //你的code\r
$ scope.form.newMessage =''; //清空您的输入之后\r
}

\r

\r

\r

I'm breaking my head over a small issue. I have a chat box in my web app which contains one input[type='text'] and a button. What I want is whenever user clicks on the button, the corresponding message is sent to server and clears the input field on button click.

I'm facing an issue where when a user types in input[type='text'], it causes my controller to refresh. Also, on clicking the button, the controller refreshes.

I have found few threads which mention similar problem but somehow the solution mentioned in these thread is not working for me.

Angularjs clicking a button within a form causes page refresh

Following is my code:

<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>

Can anyone please help with this?

Thanks

Update:

Based on the suggested solutions I modified my code. But it is still not wokring:

<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>

Here is my controller code:

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

}

Also, my doubt is even on writing anything in the input box, it refreshes the page. Why is it so ? Shouldn't it wait till I submit the form ?

Update 2: It seems the actual problem is different from this. I have created a different question and this might solve this problem as well. Can anyone please tale a look at this? Thanks

解决方案

To stop the page from reloading when you click the button, try this:

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

这篇关于如何在表格中输入输入停止页面刷新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！