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预订页面上的Submit按钮时，我会收到一封默认电子邮件（我没有附加此功能，因为它可能不相关），但我希望它也执行addData（）不。谁能看到问题所在？

Answer 1

您在form的{{1}}属性中指定了下一个URL。

action

<form action="https://formspree.io/MYEMAIL" id="book_appt" method="POST">的基本操作是将表单数据传递到下一页（在input[type="submit"]属性中）

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

action

Answer 2

要测试您的addData函数是否正常工作，请将输入类型“提交”更改为“按钮”。如果一切正常，则应该可以正常工作。

之所以看不到addData函数调用的结果，是因为它附加在提交输入按钮的onclick处理程序上。它使表单提交并带您到新的URL。

如果我正确理解您要做什么，可以通过两种方法进行操作：

您可以尝试将表单作为AJAX请求提交（发送信息而不更改页面网址），而不是当前的方式在做。请求成功后，您可以调用addData（）功能。
或者您的提交可以在您的后端中创建一个新行条目数据库（假设您有一个数据库），同时还触发了页面刷新。该页面在加载时应填充以下条目：在后端数据库中。

Answer 3

假设您的addData()功能正常运行，您可以尝试更改提交按钮，如下所示：

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

为什么我的“向表添加行”功能不起作用？

3 个答案: