javascript - HTML 表单提交值并将所有值存储在一个新数组中(javascript)

标签 javascript jquery html forms local-storage

我正在尝试制作一个带有一个文本输入和一个提交按钮的表单。我希望脚本执行的操作是在单击“提交”后获取文本并将其存储为值。之后,如果我输入其他内容(不刷新页面)并单击“提交”,则将输入存储为另一个值。这个过程可以完成一百次,所以我将有 100 个不同的值。我还想对这些值执行的操作是将它们放入一个新数组中。所以: var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""]; 。 我到目前为止编写的代码是这样的,但它实际上不会帮助你:

<!DOCTYPE html>
<html>
<body>

<form id="form1">
Type the words here: <input type="text" name="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
function myFunction() {

}
function myFunction2() {
 var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];
  document.getElementById("demo").innerHTML = AllValues;  
}
</script>

</body>
</html>

我在尝试了很多不起作用的事情后问了这个问题,我知道只有当我使用 HTML 本地存储时该脚本才会起作用,但即使我做了,我也不具备这样做的知识关于这个主题有很多研究。我不想只存储这些值,但我想将它们放入一个新数组中。我一如既往地把这个问题变得更笼统一些,以便尽可能地帮助更多人。请你帮助我好吗?提前致谢。

最佳答案

您遇到了几个问题,主要是您必须为名为“fname”的输入文本提供“id”属性。 接下来,您必须将 AllValues 数组存储在两个声明的函数可见的上下文中(在本例中为全局上下文)。

<!DOCTYPE html>
<html>
<body>

<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var AllValues = [];
function myFunction() {
    var fname = document.getElementById("fname").value;
    AllValues.push(fname);
}
function myFunction2() {
  document.getElementById("demo").innerHTML = AllValues;  
}
</script>

</body>
</html>

也尝试立即函数以避免在全局上下文中存储变量。我粘贴的代码当然不是很干净,但是可以工作:)

关于javascript - HTML 表单提交值并将所有值存储在一个新数组中(javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30653829/

相关文章:

html - 如何从 Bootstrap 主题中删除悬停时的导航下划线?

javascript - 如何使用 javascript 将新的图像元素添加到 html href 链接?

javascript - 如何在不使用.get()或.load()的情况下将ajax数据加载到DIV中?

jquery - 添加覆盖元素背景属性的类

javascript - 设置/获取文本节点值的方法

javascript - 文件大小的 Parsley.js 验证?

javascript - validity.valid 是如何工作的?

javascript - 如何使用javascript在html上获取上个月和下个月的结果

javascript - 尝试读取 csv 数据时未捕获语法错误

javascript - 返回一个对象 - javaScript