Inserting dynamic table data to mysql in jsp - html

Question

I have created html file to upload user data and images.It includes dynamic table where user can insert row by clicking add button and delete row by clicking on remove button.My form is working fine and I am able to upload file and data to database but unable to insert dynamic table data i.e I split form fields into to table
1) passengertable:- landmark, location, fromdate, todate, ccn, passenger_number are inserted.
2) passengerdetailtable :- pname,pemail,pnumber,passengerid(foriegnkey reference passengertable) :=this is dynamic table data
My problem is that only current input values of pname,pemail,pnumber is inserted to mysql but remaining dynamically created row data is not inserted...
html file
<div>
<form action="getPassengerDetail" method="post" enctype="multipart/form-data">
<div>
<label for="lname">LandMark: </label>
<input id="lname" type="text" name="landmark" placeholder="Enter LandMark">
<br>
</div>
<div>
<label for="location" >Vehicle Required From: <span><sup class="red-star">*</sup></span>
</label>
<input id="location" type="text" name="location" placeholder="Enter Location" required>
<input id ="fromdate" name ="fromdate" type="date" placeholder="From Date" required >
<input id="todate" name = "todate" type="date" placeholder="To Date" required>
<br>
<label for="id" id="checkboxlabel">multiple days</label>
<input type="checkbox" name="multiple_days" id="days" >
multiple days
<br>
</div>
<div>
<label for="ccn">Cost Center Number:</label>
<input id="ccn" type="text" name="cost_center_number" placeholder="Enter Cost Center Number">
<br>
</div>
<div>
<label for="pcount">Number Of Passenger:</label>
<input id="pcount" type="number" name="passenger_number" placeholder="Enter Passenger Count">
<br>
</div>
<div>
<label for="passenger_detail_table">Passenger Details :<span><sup class="red-star">*</sup>
</span></label>
<table id="passenger_detail_table" class="tablestyle">
<thead>
<tr valign="top" >
<td>
<label for="pname_" id="small-label">Name</label>
</td>
<td>
<label for="pemail_" id="small-label">E-mail</label>
</td>
<td>
<label for="pnumber_" id="small-label">Phone-Number</label>
</td>
<td>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="pname_" type="text" name="passenger_name[]" value=""
placeholder="Enter Name"onkeyup="this.value=this.value.replace(/[^a-z]/g,'');" class="alphaonly">
</td>
<td>
<input id="pemail_" type="email" name="passenger_email[]" value=""
placeholder="Enter E-mail" >
</td>
<td>
<input id="pnumber_" type="tel" name="passenger_phone_number[]" value=""
placeholder="Enter Phone-No" class="onlyphonenumber" >
</td>
<td>
<button type="button" id="addpassenger" name="passenger_add" style="background-
color:green;color:white;">Add</button>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<label for="crf_trf">CRF/TRF:</label>
<input id="crf_trf" name="crf_trf" type="file" multiple="multiple" value="Choose file">
<br>
</div>
<div>
<label for="ddetail">Duty Detail:</label>
<input id="ddetail" name=ddetail" type="text" width="100px" placeholder="Enter Duty
Detail">
<br>
</div>
<div>
<input type="submit" class="button" value="Submit" name="insert">
</div>
</form>
</div>
Jquery code
$(document).ready(function()
{
const maxCounter = 10;
let passengerCounter;
const $tb = $("#passenger_detail_table tbody ");
$('#addpassenger').on('click',function(e)
{
const pname = $.trim($("#pname_").val());
const pemail = $.trim($("#pemail_").val());
const pnumber = $.trim($("#pnumber_").val());
if(pname === "" || pemail === "" || pnumber === "")
{
alert("please enter the values...");
return;
}
passengerCounter = $tb.find("tr").length;
if (passengerCounter >= maxCounter)
{
alert("No more data to be placed")
return;
}
alert("The counter clicked."+passengerCounter);
const $firstRow = $tb.find(">:first-child");
let $newrowhtml = $firstRow.clone(true);
$firstRow.find(":input").val("");
$newrowhtml.find(":input")
.removeAttr("id","")
.attr('disabled', 'disabled');
$newrowhtml.find("[name=passenger_name]").val(pname);
$newrowhtml.find("[name=passenger_email]").val(pemail);
$newrowhtml.find("[name=passenger_phone_number]").val(pnumber);
$newrowhtml.find("[name=passenger_add]").replaceWith($('<button type="button"
style="background-color:red; color:white;" class="passenger_remove">Remove</button>'));
$("#passenger_detail_table").append($newrowhtml);
});
$("#passenger_detail_table").on('click', '.passenger_remove', function() {
$(this).closest("tr").remove();
});
servlet file: This servlet file act as controller for html function call to add details to database
#WebServlet("/getPassengerDetail")
#MultipartConfig(fileSizeThreshold=1024*1024*10,
maxFileSize=1024*1024*50,
maxRequestSize=1024*1024*100)
public class getPassengerDetailServlet extends HttpServlet
{
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
{
try
{
String JDBC_Driver ="com.mysql.jdbc.Driver";
String URL ="jdbc:mysql://localhost/passengerdetail";
String username = "root";
String password = "root";
InputStream inputStream = null;
String landmark = request.getParameter("landmark");
String location = request.getParameter("location");
String fromdate = request.getParameter("fromdate");
String todate = request.getParameter("todate");
String ccn =request.getParameter("cost_center_number");
String pcount = request.getParameter("passenger_number");
String pname[] = request.getParameterValues("passenger_name[]");
String pemail[] = request.getParameterValues("passenger_email[]");
String pnumber[] =request.getParameterValues("passenger_phone_number[]");
String ddetail = request.getParameter("ddetail");
PrintWriter out = response.getWriter();
out.println(landmark+location+fromdate+todate+ccn+pcount);
// obtains the upload file part in this multipart request
Part crf_trf = request.getPart("crf_trf");
if (crf_trf != null)
{
inputStream = crf_trf.getInputStream();
}
out.println(crf_trf);
Class.forName(JDBC_Driver);
Connection con = DriverManager.getConnection(URL, username, password);
String query1 = "insert into passengertable
(landmarkname,location,fromdate,todate,ccn,pcount,crf_trf,dutydetail) values(?,?,?,?,?,?,?,?)";
PreparedStatement pstm = con.prepareStatement(query1,Statement.RETURN_GENERATED_KEYS);
pstm.setString(1, landmark);
pstm.setString(2, location);
pstm.setString(3, fromdate);
pstm.setString(4, todate);
pstm.setString(5, ccn);
pstm.setString(6, pcount);
if (inputStream != null) {
// fetches input stream of the upload file for the blob column
pstm.setBlob(7, inputStream);
}
pstm.setString(8, ddetail);
int row1=pstm.executeUpdate();
ResultSet rs = pstm.getGeneratedKeys();
int id=0;
while(rs.next())
{
id=rs.getInt(1);
}
String query2="insert into passengerdetailtable(pname,pemail,pnumber,passengerid)
values(?,?,?,?)";
int row2 = 0;
PreparedStatement pstmt;
for(int i=0;i<pname.length;i++)
{
pstmt = con.prepareStatement(query2);
pstmt.setString(1, pname[i]);
pstmt.setString(2, pemail[i]);
pstmt.setString(3, pnumber[i]);
pstmt.setInt(4, id);
row2=pstmt.executeUpdate();
}
if ((row1 > 0)&&(row2>0)) {
response.sendRedirect("Detail.jsp");
}
else{
response.sendRedirect("EntryForm.html");
}
}
catch(Exception e)
{
e.printStackTrace();
}
}
}