0

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();
        }
    }
    }
jyotsna
  • 51
  • 9
  • did you check if `pname` has required values ? Also does there are error shown in your logs ? – Swati Jun 16 '20 at 04:40
  • pname is only holding the current value and showing null values in dynamically created rows – jyotsna Jun 16 '20 at 04:43
  • I did'nt find any error in log – jyotsna Jun 16 '20 at 04:49
  • @ Swati is there issue with my code?? – jyotsna Jun 16 '20 at 04:50
  • Nothing wrong in your code ,problem is in your jsp page,here you have generated new inputs which are `disabled` which do not submit to your servlet as you can see [here](https://stackoverflow.com/questions/7357256/disabled-form-inputs-do-not-appear-in-the-request) .Alternative use `readonly` attribute in your inputs. – Swati Jun 16 '20 at 05:46

0 Answers0