Forum

[Thusithaja]

Hi, 

I am making a new forum with a table .when a customer enter  his/her information and fill the table and click the submit button it automatically open the default mail and information should appear on the mail body.

this forum I created just to check, However the submit button is not working ,I couldn't find the reason. If you can give me a little hand I'll be really appreciated.

page link : https://eliwellnutrition.com/pages

My code:

<div class="forum-container">
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<table class="forum-table">
<thead>
<tr>
<th>Brand</th>
<th>Category</th>
<th>Product Name</th>
<th>Wholesale Price</th>
<th>Exp. Price</th>
<th>Req. Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>7nutrition</td>
<td>Protein</td>
<td>Whey 80</td>
<td>150</td>
<td>170</td>
<td>
<input type="number" name="req_qty1" id="req_qty1">
</td>
</tr>
<tr>
<td>7nutrition</td>
<td>Gainer</td>
<td>Bodybuilder</td>
<td>130</td>
<td>180</td>
<td>
<input type="number" name="req_qty2" id="req_qty2">
</td>
</tr>

</tbody>
</table>
<input type="button" value="Submit" onclick="submitForm()">
</form>

</div>

{% schema %}
{
"name": "forum",
"settings": [],
"presets": [
{
"name":"forum"
}
]
}
{% endschema %}

{% stylesheet %}
.forum-container {
width: 80%;
margin: 0 auto;
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 10px;
}

input,
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
margin-top: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

input[type="number"] {
width: 80px;
}

{% endstylesheet %}

{% javascript %}

function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;

var tableData = "";
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
for (var j = 0; j < cells.length; j++) {
if(j === 5) {
var qty_id = "req_qty" + (i+1);
tableData += document.getElementById(qty_id).value + " ";
} else {
tableData += cells[j].innerHTML + " ";
}
}
tableData += "\n";
}
var body = "Name: " + name + "\nEmail: " + email + "\nPhone: " + phone + "\n\n" + tableData;
window.location.href = "mailto:j.thusitha@gmail.com?subject=Forum%20Data&body=" + encodeURIComponent(body);
}

{% endjavascript %}