<table width="400" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><p style="text-align: center"><strong>Please Sign The Guestbook </strong></p></td>
</tr>
</table>
<table width="400" border="1" align="center" cellpadding="0" cellspacing="1">
<tr>
<form id="GuestbookForm" name="form1" method="post">
<td><p class="antispam"><input name="url" type="hidden"></p>
<table width="400" border="0" cellpadding="3" cellspacing="1">
<tr>
<td width="117">Name</td><td>&nbsp;</td>
<td width="357"><input name="name" type="text" id="name" size="40" required></td>
</tr>
<tr>
<td>Email</td>
<td>&nbsp;</td>
<td><input name="email" type="text" id="email" size="40" required></td>
</tr>
<tr>
<td valign="top">Comment</td><td>&nbsp;</td>
<td><textarea name="comment" cols="40" rows="3" id="comment" required></textarea></td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td> <td>
<button id="SubmitForm">Submit the form</button>
<input type="reset" name="Submit2" value="Reset" />
<button ><a href="viewguestbook.php" class="button" target="_blank">View guestbook</a> </button>
</td>
</tr>
</table>
</td>
</form>
</tr>
</table>
     <script>
         // on click of submit form run addguestbook.php
         $("#SubmitForm").on("click", function() {
             // get data from the form.
             var dataFromForm = $('#GuestbookForm').serialize();
             $("h1 span").append(dataFromForm + "<br>");
             $.ajax({
                 type: "POST",
                 data: dataFromForm,
                 url: "addguestbook.php",
                 success: function(data) {
                    alert("Comment Added. Thank you");
                    },
                error: function(data) {
                    alert("Comment Failed To Add. Sorry");
                }
            });
        });
   </script>