Question

我正在尝试使用一个文本输入和一个提交按钮创建一个表单。我希望脚本执行的操作是在单击提交并将其存储为值后获取文本。之后，如果我输入其他内容（不刷新页面）并单击“提交”将输入存储为另一个值。这个过程可以一次性完成，所以我将有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本地存储时脚本才会起作用，但即使我做了一个，我也没有这方面的知识。很多关于这个主题的研究。我不想只存储值，但我想让它们进入一个新的数组。为了尽可能多地帮助我，我总是把问题变得更加通用。请你帮助我好吗？提前谢谢。

Answer 1

你有几个问题，主要是你必须提供＆＃34; id＆＃34;名为＆＃34; fname＆＃34;的输入文本的属性。接下来，您必须将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>"));
});

在这里小提琴：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）函数，您可以返回名称为＆＃39; name＆＃39;的任何元素的值。

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）

5 个答案: