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

Posted 2023-04-18

【中文标题】jQuery将文本字段的值附加到表单提交列表中

【英文标题】：jQuery append value of text field to list on form submit

【发布时间】：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>');
);

任何想法我做错了什么？

【参考方案1】：

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

1) 重新加载页面时（在服务器上）会重新加载所有 cmets2) 使用异步提交 (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>