How to submit a jQuery step form - php

Question

hope all is well. I really really really do need help submitting a jQuery step wizard form. I did get a plugin to help but it does most of its functionalities in jQuery and not html.
At the moment i have:
- Created the database and necessary table
- Created html form using jquery steps
- Connected the form to the database
- Connected database to html table for display
This is my html code:
<div class="modal fade" id="pat_add_modal" tabindex="-1" role="dialog" aria-labelledby="add_patient_label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="add_patient_label">Add New Patient</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!-- PHP Form Processor -->
<?php
include 'db.php';
if(isset($_POST['submit'])){
$pat_sname = $_POST['pat_sname'];
$pat_fname = $_POST['pat_fname'];
$pat_gender = $_POST['pat_gender'];
$pat_dob = $_POST['pat_dob'];
$pat_phone = $_POST['pat_phone'];
$pat_email = $_POST['pat_email'];
$insurance_companies = $_POST['insurance_companies'];
$card_no = $_POST['card_no'];
$pat_allergies = $_POST['pat_allergies'];
$pat_history = $_POST['pat_history'];
$pat_address = $_POST['pat_address'];
$nok_name = $_POST['nok_name'];
$nok_phone = $_POST['nok_phone'];
$nok_email = $_POST['nok_email'];
$pat_dependants = $_POST['pat_dependants'];
$pat_work = $_POST['pat_work'];
$pat_work_address = $_POST['pat_work_address'];
$work_phone = $_POST['work_phone'];
$work_email = $_POST['work_email'];
$ins_sql = "INSERT INTO patients (surname, first_name, gender, dateofbirth, phone, email, insurance_co, insurance_card_no, allergies, medical_history, full_address, nok_name, nok_phone, nok_email, dependants, palce_of_work, work_full_address, work_phone, work_email) VALUES ('$pat_sname', '$pat_fname', '$pat_gender', '$pat_dob', '$pat_phone', '$pat_email', '$insurance_companies', '$card_no', '$pat_allergies', '$pat_history', '$pat_address', '$nok_name', '$nok_phone', '$nok_email', '$pat_dependants', '$pat_work', '$pat_work_address', '$work_phone', '$work_email')";
$run_sql = mysqli_query($conn, $ins_sql);
echo "insertion success";
}else{
echo "insertion failed";
}
?>
<div class="card-block wizard-content">
<form class="tab-wizard wizard-circle form-horizontal floating-labels" role="form" name"this" id"this" action="patients.php" method="post">
<!-- Step 1 -->
<h6><strong>Personal Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_sname" id="pat_sname" required><span class="bar"></span><label for="pat_sname">Surname :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_fname" id="pat_fname" required><span class="bar"></span><label for="pat_fname">First Name :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<select class="form-control p-0" name="pat_gender" id="pat_gender" required>
<option value=""></option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><span class="bar"></span>
<label for="pat_gender">Gender :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="date" class="form-control" name="pat_dob" id="pat_dob" required><span class="bar"></span><label for="pat_dob">D.O.B :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="tel" class="form-control" name="pat_phone" id="pat_phone" required><span class="bar"></span><label for="pat_phone">Phone :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="email" class="form-control" name="pat_email" id="pat_email" required><span class="bar"></span><label for="pat_email">Email :</label>
</div>
</div>
</div>
</section>
<!-- Step 2 -->
<h6><strong>Health Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<select class="form-control p-0" name="insurance_companies" id="insurance_companies" required>
<option value=""></option>
<option value="AAR">AAR</option>
<option value="AIG">AIG</option>
<option value="Britam">Britam</option>
<option value="IAA">IAA</option>
<option value="ICEA">ICEA</option>
<option value="Goldstar">Goldstar</option>
<option value="Liberty">Liberty</option>
<option value="NIC">NIC</option>
<option value="Sanlam">Sanlam</option>
<option value="SWICO">SWICO</option>
<option value="UAP">UAP</option>
</select><span class="bar"></span>
<label for="insurance_companies">Insurance Co.</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="card_no" id="card_no" required><span class="bar"></span><label for="card_no">Insurance Card No.</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-t-20">
<textarea class="form-control" rows="1" id="pat_allergies" required></textarea>
<span class="bar"></span>
<label for="pat_allergies">Allergies :</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-t-20">
<textarea class="form-control" rows="1" id="pat_history" required></textarea>
<span class="bar"></span>
<label for="pat_history">Medical History :</label>
</div>
</div>
</div>
</section>
<!-- Step 3 -->
<h6><strong>Home Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_address" id="pat_address" required><span class="bar"></span><label for="pat_address">Full Address :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="nok_name" id="nok_name" required><span class="bar"></span><label for="nok_name">Next of Kin :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="tel" class="form-control" name="nok_phone" id="nok_phone" required><span class="bar"></span><label for="nok_phone">Phone :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="email" class="form-control" name="nok_email" id="nok_email" required><span class="bar"></span><label for="nok_email">Email :</label>
</div>
</div>
<div class="col-md-12">
<div class="form-group m-t-20">
<textarea class="form-control" rows="1" id="pat_dependants" required></textarea>
<span class="bar"></span>
<label for="pat_dependants">Dependants :</label>
</div>
</div>
</div>
</section>
<!-- Step 4 -->
<h6><strong>Work Info</strong></h6>
<section>
<div class="row">
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_work" id="pat_work" required><span class="bar"></span><label for="pat_work">Place of Work :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="text" class="form-control" name="pat_work_address" id="pat_work_address" required><span class="bar"></span><label for="pat_work_address">Full Address :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="tel" class="form-control" name="work_phone" id="work_phone" required><span class="bar"></span><label for="work_phone">Phone :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group m-t-20">
<input type="email" class="form-control" name="work_email" id="work_email" required><span class="bar"></span><label for="work_email">Email :</label>
</div>
</div>
</div>
</section>
</form>
</div>
</div>
</div>
</div>
</div>
and this my script:
$(".tab-wizard").steps({
headerTag: "h6"
, bodyTag: "section"
, transitionEffect: "fade"
, titleTemplate: '<span class="step">#index#</span> #title#'
, labels: {
finish: 'Finish'
},
onFinished: function (event, currentIndex) {
swal({
type: "success",
title: "Good Job!",
text: "You have successfully added a new patient.",
});
var form = $(this);
form.submit();
},
});
Below is my html table:
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-block">
<div class="table-responsive">
<!--<div class="col-md-12 align-self-center">
<button class="btn pull-right hidden-sm-down btn-danger m-l-5" id="deletebutton" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-delete"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-info m-l-5" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-pen"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-warning m-l-5" type="button" data-toggle="modal" data-target="#doc_view_modal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-information-outline"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-primary m-l-5" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-cash-multiple"></i></button></a>
<button class="btn pull-right hidden-sm-down btn-success m-l-20" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="#mdo"><i class="mdi mdi-calendar-plus"></i></button></a>
</div> -->
<table id="patientstable" class="display nowrap table table-hover table-striped table-bordered m-t-20" width="100%" cellspacing="0">
<thead>
<tr>
<th class="text-center">ID</th>
<th>Surname</th>
<th>First Name</th>
<th class="text-center">D.O.B</th>
<th class="text-center" >Gender</th>
<th class="text-center">Phone</th>
<th style="width: 100px;"></th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM patients";
$run_sql = mysqli_query($conn,$sql);
while ($rows = mysqli_fetch_array($run_sql)){
echo '
<tr>
<td class="text-center">'.$rows['id'].'</td>
<td>'.$rows['first_name'].'</td>
<td>'.$rows['surname'].'</td>
<td class="text-center">'.$rows['dateofbirth'].'</td>
<td class="text-center">'.$rows['gender'].'</td>
<td class="text-center">'.$rows['phone'].'</td>
<td id="actionicons">
<a href="user_id='.$rows['id'].'" data-toggle="modal" data-target="#pat_view_modal"> <i class="mdi mdi-information-outline text-warning"></i>
</i>
<a href="#" data-toggle="tooltip" data-original-title="Delete"> <i class="mdi mdi-delete text-danger"></i>
</td>
</tr>
';}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I am stuck at a point where now have to submit the form but i am unable to since i can't call/reference the finish submit using an name or id since i can't assign it one.
Please help. Thanks.
Brian Dx.

Answer 1

In your patients.php you can use:
if ( $_SERVER['REQUEST_METHOD'] == 'POST' )
instead of:
if(isset($_POST['submit']))
since you can't put a submit name in jquery steps.