I have created a project where my interface fetch data from my Oracle SQL database using springboot, Jquery and AJAX and displays it on a table. What I couldn’t find online is to how to do basic operations(Post, Delete) on my table using HTML forms. All sources mostly focuses on php mySQL projects. I would appreciate any help or guidance on this matter.
$(function(){ //fetching data from oracle
var $patientsfn = $('#firstname');
var $patientsln = $('#lastname');
var $patientsno = $('#patientno');
var $patientsage = $('#age');
var $patientsg = $('#gender');
var $patientsad = $('#adresses');
var $patientsrd = $('#registerdate');
var $patientsadd = $('#attendeddoctors');
$.ajax({
type: 'GET',
url: 'http://localhost:8080/api/v1/patients',
success: function(patients) {
$.each(patients, function(i, patient){
$patientsfn.append('<li>'+ patient.firstNames+ '</li>');
$patientsln.append('<li>'+ patient.lastName+ '</li>');
$patientsno.append('<li>'+ patient.patientNo+ '</li>');
$patientsage.append('<li>'+ patient.ages+ '</li>');
$patientsg.append('<li>'+ patient.genders+ '</li>');
$patientsad.append('<li>'+ patient.adresses+ '</li>');
$patientsrd.append('<li>'+ patient.registerDate+ '</li>');
$patientsadd.append('<li>'+ patient.attendedDocs+ '</li>')
})
}
});
function submitData(){
var submitfn = $('input[submitfn = firstNames]').val();
}
});<script <!-- code for table and --> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="backup.html" class="btn btn-secondary text-light">add data</a>
<div class="container">
<table id="example" class="table table-striped" style="width: 100%">
<thead>
<tr>
<th>FIRSTNAME</th>
<th>LASTNAME</th>
<th>PATIENTNO</th>
<th>AGE</th>
<th>GENDER</th>
<th>ADRESSES</th>
<th>REGISTERDATE</th>
<th>ATTENDEDDOCTORS</th>
</tr>
</thead>
<tbody>
<tr>
<td id="firstname"></td>
<td id="lastname"></td>
<td id="patientno"></td>
<td id="age"></td>
<td id="gender"></td>
<td id="adresses"></td>
<td id="registerdate"></td>
<td id="attendeddoctors"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>FIRSTNAME</th>
<th>LASTNAME</th>
<th>PATIENTNO</th>
<th>AGE</th>
<th>GENDER</th>
<th>ADRESSES</th>
<th>REGISTERDATE</th>
<th>ATTENDEDDOCTORS</th>
</tr>
</tfoot>
</table>
</div>
<body id="second">
<h1 id="header">Veri ekleme</h1>
<img id="backupimg" src="images/akgun.png" alt="" />
<form> <!--code for html form-->
<label for="firstNames">First name:</label><br />
<input type="text" id="firstNames" name="firstNames" /><br />
<label for="lastName">Last name:</label><br />
<input type="text" id="lastName" name="lastName" /><br /><br />
<label for="ages">Age:</label><br />
<input type="text" id="ages" name="ages" /><br /><br />
<label for="genders">Gender:</label><br />
<input type="text" id="genders" name="genders" /><br /><br />
<label for="adresses">Adress:</label><br />
<input type="text" id="adresses" name="adresses" /><br /><br />
<label for="attendedDocs">Attended Doctor:</label><br />
<input type="text" id="attendedDocs" name="attendedDocs" /><br /><br />
<label for="registerDate">Register Date:</label><br />
<input type="date" id="registerDate" name="registerDate" /><br /><br />
<input id="submit" type="submit" />
</form>