CODEWITHSUNDEEP
javascripthtml
user11091170
user11091170

Reputation:

Why is my "add row to table" function not working?

I'm trying to create a function which adds a new row, and values to a table each time a form is submitted:

Appointment booking HTML page:

<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>

Appointment table html page:

    <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');
}

When I click the Submit button on appt booking page, I am sent a default email (I have not attached this function as it's probably not relevant) but I would like it to also carry out the addData(), which it is not. Can anyone see what the problem may be?

Upvotes: 0

Views: 202

Answers (3)

Abhicoding
Abhicoding

Reputation: 115

To test if your addData function is working, change the input type of 'submit' to 'button'. If everything is right then it should work fine.

The reason you are not able to see the result of addData function call is because it is attached to an onclick handler of a submit input button. It causes the form to submit and take you to new URL.

If I understand correctly what you are trying to do, there are two ways you can go about:

  • You can try to submit the form as an AJAX request(Send information without changing the page url) and not the way you are currently doing. When the request is successful you can call your addData() function.
  • Or your submission can create a new row entry in your backend database (assuming you have one) while also triggering a page refresh. This page, when loading, should populate the entries that are there in the backend database.

Upvotes: 0

Meow Kim
Meow Kim

Reputation: 484

You specified the next URL in your form's action attribute.

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

input[type="submit"]'s base operation is to pass form-data to the next page (in the action attribute)

So if you don't want to change the page, prevent its default action like below:

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

Upvotes: 1

kapitan
kapitan

Reputation: 2212

Assuming your addData() function is working, you can try to change your submit button like so:

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

Upvotes: 0

Related Questions