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在按钮上：

  

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

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>