jQuery将文本字段的值附加到表单提交列表中答案

【问题标题】：jQuery append value of text field to list on form submitjQuery将文本字段的值附加到表单提交列表中
【发布时间】：2014-07-14 02:28:31
【问题描述】：

我正在尝试为演示创建一个极其简单的评论表单；在文本字段中添加一些文本，提交，向列表添加值。当我使用按钮和点击事件时，它可以工作：

<script>
$(".add-comment").click(function (e) {
var add = $('#comment-body').val();
$('.comments').append('<li>' + '<h4>Name</h4> ' + add + '</li>');
});
</script>

<form>
<input type="text" id="comment-body" />
<button type="button" class="add-comment">Submit</button>
</form>
<ol class="comments"></ol>

但这是一个移动演示，所以我根本不需要按钮。我只想在用户点击返回键时发布评论。我尝试删除按钮，并像这样编辑脚本，但它不起作用：

$("form").submit(function (e) {
var add = $('#comment-body').val();
$('.comments').append('<li>' + '<h4>Name</h4> ' + add + '</li>');
});

任何想法我做错了什么？

【问题讨论】：

标签： jquery forms append textinput

【解决方案1】：

在提交页面时重新加载，因为您将页面提交到服务器，所以您有 2 个选项：

1) 重新加载页面时（在服务器上）会重新加载所有 cmets
2) 使用异步提交 (AJAX) 并在回调中添加厘米

【讨论】：

啊，有道理。可悲的是，这超出了我的技能水平。我会寻找一个 cmets 插件。谢谢。

【解决方案2】：

改变这个：

<button type="button" class="add-comment">Submit</button>

到这里：

<button type="submit" class="add-comment">Submit</button>

type="submit" 将提交表单。

此外，您的表单没有action 属性，因此这将提交到您的当前页面。

【讨论】：

【解决方案3】：

好的，对于将来偶然发现此问题的任何人，有一种更简单的方法可以做到这一点。您需要做的就是检测何时有人按下回车键。您根本不需要使用表格。这里是：

<ol class="comments"></ol>     
<input type="text" id="comment-body" placeholder="add comment here" />          
<script>     
$('#comment-body').keydown(function (e){     
if(e.keyCode == 13){     
var add = $('#comment-body').val();     
$('.comments').append('<li>' + '<h4>Name</h4> ' + add + '</li>');     
}})     
</script>

【讨论】：