堆栈内存溢出
  繁体   English   中英

HTML表单提交值并将所有值存储在新数组中（javascript）

[英]HTML form submits values and stores all of them in a new array(javascript)

 原文  2015-06-04 20:47:00  9   5    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本地存储的情况下才有效，但是即使我做了很多研究，我也没有知识去做。关于这个话题。 我不想只存储值，但我想将它们保存在新数组中。 为了使尽可能多的人得到帮助，我将使这个问题变得更加普遍。 请你帮助我好吗？ 提前致谢。

5 个解决方案

解决方案1
 2  2015-06-04 20:53:24

您遇到了几个问题，主要是必须为名为“ 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>

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

解决方案2
 1  2015-06-04 20:56:46

您可以使用jquery来做到这一点： 

var all_values =[];

    function myFunction() {
    var temp_val = $("#fname").val();
        alert(temp_val);
        all_values.push(temp_val);
    }


    function myFunction2() {
    alert(all_values);
    }

<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>

工作演示

ps编辑的jquery答案有更多更改。 工作演示

解决方案3
 1 已采纳  2015-06-04 21:05:40

有关执行此操作的基本方法，请尝试以下操作：

HTML： 

<form id="form1">Type the words here:
    <input type="text" name="fname">
    <br>
    <input type="button" value="Submit" class="submit">
</form>
<input type="button" class="show-button" value="Print all inserted words at array">
<p id="demo"></p>

JS： 

var values = new Array();

$(".submit").on("click", function () {
    values.push($('input[name="fname"]').val());
});

$(".show-button").on("click", function () {
    $("#demo").html(values.join("<br>"));
});

在这里提琴： http : //jsfiddle.net/5z4g04js/2/

解决方案4
 1  2015-06-04 21:19:27

我的答案： 

<form id="form1">
Type the words here: <input id="words" type="text" name="fname"><br>
<input type="button" id="submitWords" value="Submit">
</form>
<input type="button" id="printWords" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var arrWords = [];
var btnSubmit = document.getElementById('submitWords');
var btnPrint = document.getElementById('printWords');
var demo = document.getElementById('demo');

btnSubmit.onclick = function() {
  var words = document.getElementById('words').value;
  arrWords = words.split(' ');
  console.log(arrWords);
}

btnPrint.onclick = function() {
  for(var i = 0; i < arrWords.length; i++) {
     demo.innerHTML += arrWords[i]+"<br>";
  }
}

</script>

</body>
</html>

解决方案5
 1  2015-06-05 01:07:29

使用此getAllValues（name）函数，您可以返回名称为'name'的任何元素的值。 

function getAllValues(name) {
  var nameMatches=document.getElementsByName(name);
  var AllValues=[];
  for (var i=0; i<nameMatches.length; i++) {
    AllValues.push(nameMatches[i].name);
    AllValues.push(nameMatches[i].value);
  }
  return AllValues;
}

要调用此方法，可以使用getAllValues('fname') 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 具有3个提交的HTML表单，但是JavaScript不起作用 Javascript 表单提交但未包含所有附加表单字段 需要编写一个 Jquery 来获取所有 Selectlist 选项值，将它们存储在一个数组中并将它们发布到一个操作方法 html表单值到javascript数组 如何使用javascript获取用户通过html表单在Google Chrome上提交的值？ Javascript 表单提交两次 使用javascript在rails 3中提交远程form_tag，但提交为html 尽管违反了要求，但 HTML 表单中的 Javascript 仍然提交 JavaScript验证问题-即使表单不完整，也会提交HTML表单 是否可以跟踪页面中的所有表单提交（例如使用javascript）？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM