HTML表单崩溃了整个页面

Question

我正在尝试实现一个接受5个输入的表单，并将每个传递的表单设置为表中的单元格。如果我只填写五个元素中的四个，但如果我填写了它崩溃的所有选项，则可以使用。我只想在用户填写表单的所有五个元素中只有在表中添加一行。

function aFunction() {
  var table = document.getElementById("myTable"),
    row = table.insertRow(-1),
    cell1 = row.insertCell(0),
    cell2 = row.insertCell(1),
    cell3 = row.insertCell(2),
    cell4 = row.insertCell(3),
    cell5 = row.insertCell(4),
    elements = document.forms['myForm'].elements;
  cell1.innerHTML = elements['pickup'].value;
  cell2.innerHTML = elements['delivery'].value;
  cell3.innerHTML = elements['price'].value;
  cell4.innerHTML = elements['pickup-distance'].value;
  cell5.innerHTML = elements['delivery-distance'].value;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
body {
  background-color: powderblue;
}
h1 {
  color: red;
}
p {
  color: blue;
}

<table style="width:100%" id="myTable">
  <tr>
    <th>Pickup Address</th>
    <th>Delivery Address</th>
    <th>Price</th>
    <th>Distance to Pickup</th>
    <th>Delivery Distance</th>
  </tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
  <div class="container">
    <p>Please fill in this form to post a job for our drivers.</p>
    <hr>
    <label for="pickup-address"><b>Pickup Address</b></label>
    <input type="text" placeholder="Enter Address" name="pickup" required>
    <label for="delivery-address"><b>Delivery Address</b></label>
    <input type="text" placeholder="Enter Address" name="delivery" required>
    <label for="price"><b>Price</b></label>
    <input type="text" placeholder="Enter Price" name="price" required>
    <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
    <input type="text" placeholder="Enter distance" name="pickup-distance" required>
    <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
    <input type="text" placeholder="Enter distance" name="delivery-distance" required>
    <button onclick="aFunction()">Post</button>
  </div>
</form>

Answer 1

您应该定义按钮的类型，即：

<button onclick="aFunction()" type="button">Post</button>

防止提交表单和重新加载（并没有真正崩溃）页面。

w3schools在按钮上：

始终指定元素的类型属性。不同的浏览器为元素使用不同的默认类型。

Answer 2

尝试使用document.getElementsByTagName("input")而不是document.forms['myForm'].elements;

function aFunction() {
  var table = document.getElementById("myTable"),
    row = table.insertRow(-1),
    cell1 = row.insertCell(0),
    cell2 = row.insertCell(1),
    cell3 = row.insertCell(2),
    cell4 = row.insertCell(3),
    cell5 = row.insertCell(4),
    elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
  cell1.innerHTML = elements[0].value;
  cell2.innerHTML = elements[1].value;
  cell3.innerHTML = elements[2].value;
  cell4.innerHTML = elements[3].value;
  cell5.innerHTML = elements[4].value;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
body {
  background-color: powderblue;
}
h1 {
  color: red;
}
p {
  color: blue;
}

<table style="width:100%" id="myTable">
  <tr>
    <th>Pickup Address</th>
    <th>Delivery Address</th>
    <th>Price</th>
    <th>Distance to Pickup</th>
    <th>Delivery Distance</th>
  </tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
  <div class="container">
    <p>Please fill in this form to post a job for our drivers.</p>
    <hr>
    <label for="pickup-address"><b>Pickup Address</b></label>
    <input type="text" placeholder="Enter Address" name="pickup" required>
    <label for="delivery-address"><b>Delivery Address</b></label>
    <input type="text" placeholder="Enter Address" name="delivery" required>
    <label for="price"><b>Price</b></label>
    <input type="text" placeholder="Enter Price" name="price" required>
    <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
    <input type="text" placeholder="Enter distance" name="pickup-distance" required>
    <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
    <input type="text" placeholder="Enter distance" name="delivery-distance" required>
    <button onclick="aFunction()">Post</button>
  </div>
</div>