Javascript 显示提交的值

我正在尝试更新我在表单中输入的表单值，以显示为列表。我正在尝试获取表单值并使用本地存储显示这些值，但我不确定如何在带有

gettingValues

类的

div

标记中显示输入的值

你能告诉我怎么做吗？我在下面提供我的代码。我也把它放在一个代码笔里：

获取表单值

您应该在以下表格中获得提交的值：

$('#localStorageTest').submit(function() {
    localStorage.clear();
  });

改为：

$('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()+"</span></div>";  //add your data in span, p, input.. 
    $('.gettingValues').append(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form 
    localStorage.clear();
 });

$（'localStorageTest'）。提交（函数（e）{
e、 预防默认值（）；
var div=“”+$（“#name”）.val（）+“+$（“#email”）.val（）+”；//在span、p、input中添加数据。。
$（'.gettingValues'）.append（div）；//apendd该div
$（'#localStorageTest'）[0].reset（）；//清除表单
localStorage.clear（）；
});

但是如果你想点击“编辑”或“删除”按钮并触发一些功能，你必须附加一个绑定函数并设置一个“id”或一个唯一的标识符来知道哪个用户编辑/删除

如果还想存储提交的用户，可以添加

$.get/$.post

函数

---

希望有帮助

但是当我在codepen中提交时…我只看到您刚刚发布到Pen中的这一个。已发布的值…但不确定如何在浏览器中查看div标记内的值。您应该将

$（'#localStorageTest'）.submit（函数（e）{

函数放在文档中准备就绪（而不是在init（）中），并添加jquery.js（如果还没有）.是的，我在codepen中更改了它，但仍然没有成功：（您错过了jquery并将类设置为div。这里是一个工作的codepen：注意警报被触发。是的，正在工作，但如果我给出第二个值，它就不会加起来…它正在清除现有值，并且也会消失编辑和删除按钮：(

$('#localStorageTest').submit(function(e) {
    e.preventDefault();
    var div = "<div><span>"+$('#name').val()+"</span><span>"+$('#email').val()+"</span></div>";  //add your data in span, p, input.. 
    $('.gettingValues').append(div); //apendd the div
    $('#localStorageTest')[0].reset(); //clear the form 
    localStorage.clear();
 });