javascript - 为什么我的 "add row to table"函数不起作用？

Question

我正在尝试创建一个函数，每次提交表单时都会添加一个新行和值到表中:

预约 HTML 页面:

<div class="contact-form">
    <form action="https://formspree.io/MYEMAIL" id="book_appt" 
     method="POST">

        <label>Name: </label><input id="customerName" class ="form-control" 
        type="text" name="Name of Customer" required></input>

        </br>
        <label>Email Address: </label><input id="customerEmail" class="form- 
        control" type="email" name="Email Address" required></input>
        </br>

        <label>Phone no.: </label><input id="customerPhone" class ="form- 
        control" type="number" name="Phone No." required></input>
        </br>
        <label>Date & Time of Test Drive: </label><input id="customerDate" 
         class ="form-control" type="datetime-local" name="Date & Time of 
         Test Drive" required></input>

        <input type="submit" value="Submit" onclick="addData()">

    </form>
    </div>

预约表 html 页面:

    <table id="tblAppts" style="width:60%; border: 1px solid black" 
border="1" 
align="center">

<thead>
<tr>
<th>Name</th>
<th>Email</th> 
<th>Phone Number</th>
<th>Date/Time of Appt</th>
</tr>
</thead>

<tbody>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</tbody>
</table>

Javascript:

function addData() {

var name = document.getElementById("customerName").value;
var email = document.getElementById("customerEmail").value;
var phone = document.getElementById("customerPhone").value;
var date = document.getElementById("customerDate").value;

var tableRef = 
document.getElementById('tblAppts').getElementsByTagName('tbody')[0];

var newRow   = tableRef.insertRow(tableRef.rows.length);

var nameCell  = newRow.insertCell(0);
var emailCell  = newRow.insertCell(1);
var phoneCell  = newRow.insertCell(2);
var dateCell  = newRow.insertCell(3);

nameCell.innerHTML = name;
emailCell.innerHTML = email;
phoneCell.innerHTML = phone;
dateCell.innerHTML = date;

var newText  = document.createTextNode('New row');
}

当我单击 appt 预订页面上的“提交”按钮时，我会收到一封默认电子邮件(我没有附加此功能，因为它可能不相关)，但我希望它也执行 addData()，它是不是。谁能看出问题出在哪里吗？

Answer 1

您在form 的action 属性中指定了下一个URL。

<form action="https://formspree.io/MYEMAIL" id="book_appt" method="POST">

input[type="submit"] 的基本操作是将表单数据传递到下一页(在 action 属性中)

因此，如果您不想更改页面，请阻止其默认操作如下所示:

<input type="submit" value="Submit" onclick="addData(); return false;">