javascript - Handlebars 表单提交不起作用

Question

我有一个表单，在 Handlebars 内放置提交不起作用，我必须做什么？有人可以帮忙吗？

 <script id="chat-window-template" type="text/x-handlebars-template">
      <a href="#" class="close"><i class="fa fa-times"></i></a>
      <a href="#">
        <span class="pull-left">
        <img src="{{ user_image }}" width="40">
        </span>
        <span class="contact-name">{{user}}</span>
      </a>
    <div class="panel-body" id="chat-bill">	
	<form id="messageForm">
	   <input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
	   <input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem..." />
	   <input type="submit" value="Send" />
	</form>
   </div>
</script>

$("#messageForm").submit( function() {alert();});

Answer 1

在提交时运行 JS 的另一种可能性是从表单元素的 onsubmit 属性返回 false:

模板.hbs

<form id="myForm" onsubmit="myFunc(); return false;">
  <input id="textInput" type="text"></input>
  <input type="submit"></input>
</form>
...
<script src="js/handleForm.js" type="text/javascript"></script>

handleForm.js

function myFunc() {
  console.log("yo");
}

这将在浏览器控制台中记录“yo”。它之所以有效，是因为在 onsubmit 属性中返回 false 会阻止浏览器的默认操作(这是一个 html 事物，而不是一个节点或 hbs 事物)。因此，页面不会重新加载，并且不会将查询字符串添加到超链接，但 myFunc() 将运行。

如果您想使用表单数据，只需从 DOM 中获取您喜欢的数据即可。一种选择是在文本输入上放置一个 id(就像我在 template.hbs 中所做的那样)并使用 jQuery 获取它，如下所示:

handleForm.js(已修订)

function myFunc() {
  var formText = $("#textInput").val();
  // Do something with formText
}