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

Question

我正在尝试制作一个带有一个文本输入和一个提交按钮的表单。我想让脚本做的是在我单击提交后获取文本并将其存储为一个值。之后，如果我输入其他内容（不刷新页面）并单击提交，将输入存储为另一个值。这个过程可以进行一百次，所以我将有 100 个不同的值。我还想对这些值做的是将它们放在一个新的 array.So 中： 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 本地存储时脚本才能工作，但我不知道该怎么做即使我对这个主题做了很多研究。我不想只存储值，但我想将它们放入一个新数组中。为了帮助尽可能多的人，我一如既往地使问题更笼统。请你帮助我好吗？提前致谢。

Answer 1

您有几个问题，主要是您必须为名为 "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>

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

Answer 2

您可以使用 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>

工作demo

p.s。编辑 jquery 答案并进行更多更改。 working demo

Answer 3

要了解执行此操作的最基本方法，请尝试以下操作：

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>"));
});

Fiddle 这里：http://jsfiddle.net/5z4g04js/2/

Answer 4

我的回答：

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

Answer 5

使用此 getAllValues(name) 函数，您可以 return 任何名称为 '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')。

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

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

html

javascript

forms

jquery

local-storage