我想将信息从表单发送到 JavaScript 数组，然后显示答案

【问题标题】：I want to send the information from an form to an array en JavaScript and then display it我想将信息从表单发送到 JavaScript 数组，然后显示
【发布时间】：2021-11-05 16:04:49
【问题描述】：

我尝试了这么久，我不知道如何解决它。思路很简单，用户在 HTML 表单中插入需要的数据，然后将插入的数据存储在一个数组中，并以文本形式显示所有数据。我认为问题在于当我尝试将表单中的数据存储到数组中时。

这是我到目前为止所做的

<html>
    <header>
            <meta charset="UTF-8">
            <title>Second Homework</title>
    </header>
    <body>
        <h1>Welcome!</h1>
        <p>Please insert the data in the following form: </p>
        <form>
            <input type="text" id="name"><br>
            <input type="text" id="lname"><br>
            <input type="text" id="age"><br>
            <input type="text" id="city"><br>
            <input type="text" id="pet"><br>
            <input type="text" id="pet_name"><br>
            <button type="button" id="" onclick="data()">Enviar</button>
        </form>
        <script type="text/javascript">
        function data(){
            var info=[getElementById("name").innerHTML.value,getElementById("lname").innerHTML.value,
            getElementById("age").innerHTML.value,getElementById("city").innerHTML.value,getElementById("pet").innerHTML.value,getElementById("pet_name").innerHTML.value]
            document.write("Your name is: "+info[0])
            document.write("Your lastname is: "+info[1])
            document.write("You are "+info[2]+"  years old")
            document.write("You live in: "+info[3])
            document.write("Do you have pets? "+info[4])
            document.write("Your pets name is: "+info[5])
        }
    

        </script>
    </body>
    <footer>

    </footer>
</html>

【问题讨论】：

试试 document.getElementById("name")...
你需要document.getElementById("name").value，其他的也一样。
是的，你应该使用 .value 而不是 .innerHTML.value，像这样： var inputVal = document.getElementById("myInput").value;

标签： javascript html arrays database

【解决方案1】：

在 HTML 中，表单输入元素必须使用 name 属性

这样做：

 
const myForm = document.forms['my-form']

myForm.onsubmit = e =>
  {
  e.preventDefault() // disable submit
  
  let info = Array.from(new FormData(myForm).entries()).map(([k,v])=>v)
  
  document.write("<br>Your name is: "+info[0])
  document.write("<br>Your lastname is: "+info[1])
  document.write("<br>You are "+info[2]+"  years old")
  document.write("<br>You live in: "+info[3])
  document.write("<br>Do you have pets? "+info[4])
  document.write("<br>Your pets name is: "+info[5])

  /* ------------------------------- or
  let msg = `
    Your name is: ${myForm.name.value}
    Your lastname is: ${myForm.lname.value}
    You are ${myForm.age.value}  years old
    You live in ${myForm.city.value}
    Do you have pets? ${myForm.pet.value}
    Your pets name is: ${myForm.pet_name.value}`

    console.log( msg ) 
  ------------------------------------- */
  }

<h1>Welcome!</h1>
<p>Please insert the data in the following form: </p>
<form name="my-form">
  <input type="text" name="name"     placeholder="name"     ><br>
  <input type="text" name="lname"    placeholder="last name"><br>
  <input type="text" name="age"      placeholder="age"      ><br>
  <input type="text" name="city"     placeholder="city"     ><br>
  <input type="text" name="pet"      placeholder="pet"      ><br>
  <input type="text" name="pet_name" placeholder="pet name" ><br>
  <button type="submit">Enviar</button>
</form>

【讨论】：