Thursday, 23 July 2015

How to add multiple records to Database using single HTML Form

              In this post, I have given sample program for adding (inserting) multiple records to Database using single or same form in HTML.
             For this, you have to use table in HTML form. Go through the following HTML code:


Program: (studentmarks.html)
<html>
<head>
</head>
<body>
     <h1>Enter Student's Exam Score Information</h1>

<table border=1>

    <tr>

        <th>Subject</th>
       
        <th>Internal Marks</th>

        <th>External Marks</th>


        <th>Total Marks</th>


        <th>Remarks</th>

    </tr>
         
<form action="studentmarksbackend.jsp">

Student Name:   
    <input type="text" name="studentname"><br><br>

Department:
    <select name="department">
        <option disabled selected>Option</option>       
        <option value="FY">FY</option>
        <option value="COMP">COMP</option>
        <option value="EXTC">EXTC</option>
                <option value="IT">IT</option>
        </select><br><br>

Class:
    <select name="myclass">
        <option disabled selected>Option</option>   
                <option value="FE">First Year</option>
        <option value="SE">Second Year</option>
        <option value="TE">Third Year</option>
        <option value="BE">Final Year</option>
    </select><br><br>

Division:   
    <select name="division">
        <option disabled selected>Option</option>
        <option value="I">I</option>
        <option value="II">II</option>
        <option value="III">III</option>
        <option value="IV">IV</option>
    </select><br><br>

    <tr>
        <td><input type="text" name="subject0" size=10 /></td>
   
        <td><input type="text" name="internalmarks0" size=9 /></td>

        <td><input type="text" name="externalmarks0" size=9 /></td>


        <td><input type="text" name="totalmarks0" size=6 /></td>


        <td><textarea name="remarks0" rows=2 cols=20></textarea></td>

    </tr>

    <tr>

        <td><input type="text" name="subject1" size=10 /></td>
   
        <td><input type="text" name="internalmarks1" size=9 /></td>

        <td><input type="text" name="externalmarks1" size=9 /></td>


        <td><input type="text" name="totalmarks1" size=6 /></td>


        <td><textarea name="remarks1" rows=2 cols=20></textarea></td>

    </tr>

    <tr>

        <td><input type="text" name="subject2" size=10 /></td>
   
        <td><input type="text" name="internalmarks2" size=9 /></td>

        <td><input type="text" name="externalmarks2" size=9 /></td>


        <td><input type="text" name="totalmarks2" size=6 /></td>


        <td><textarea name="remarks2" rows=2 cols=20></textarea></td>

    </tr>

    <tr>

        <td><input type="text" name="subject3" size=10 /></td>
   
        <td><input type="text" name="internalmarks3" size=9 /></td>

        <td><input type="text" name="externalmarks3" size=9 /></td>


        <td><input type="text" name="totalmarks3" size=6 /></td>


        <td><textarea name="remarks3" rows=2 cols=20></textarea></td>

    </tr>

    <tr>

        <td><input type="text" name="subject4" size=10 /></td>
   
        <td><input type="text" name="internalmarks4" size=9 /></td>

        <td><input type="text" name="externalmarks4" size=9 /></td>


        <td><input type="text" name="totalmarks4" size=6 /></td>


        <td><textarea name="remarks4" rows=2 cols=20></textarea></td>

    </tr>

</table>

<br />
<br />

<input type="submit" value="Submit" style="font-size:20">
           
</form>

</body>
</html>


Output: (studentmarks.html)





                            For above HTML page, to make entries in database, I have used JSP (check following program studentmarksbackend.jsp). 
                            Here, database used is Mysql. Database name is "test". User name is also "test" and password is "123".  I have made above form entries into table "studentmarkstable". It's configuration is given in following snapshot.


                           Go through the following program to see how the records entered in above HTML form are actually inserted into the mysql table.



Program: (studentmarksbackend.jsp)

<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
</head>
<body>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
     url="jdbc:mysql://localhost/test"
     user="test"  password="123"/>
<center>
<br />
<br />
<br />

<%
int numofrecords=5;
String subject[]=new String[numofrecords];
String internalmarks[]=new String[numofrecords];
String externalmarks[]=new String[numofrecords];
String totalmarks[]=new String[numofrecords];
String remarks[]=new String[numofrecords];

String q[]=new String[numofrecords];

int i,j;

  String studentname= request.getParameter("studentname");


  String department= request.getParameter("department");

 
  String myclass= request.getParameter("myclass");

  String division= request.getParameter("division");

 

for(i=0;i<numofrecords;i++)
{
 
   subject[i]= request.getParameter("subject"+i);

   internalmarks[i]= request.getParameter("internalmarks"+i);


   externalmarks[i]= request.getParameter("externalmarks"+i);


   totalmarks[i]= request.getParameter("totalmarks"+i);


   remarks[i]= request.getParameter("remarks"+i);


}

%>

<%
try{
           Class.forName("com.mysql.jdbc.Driver");
           Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "test", "123");
           Statement st=con.createStatement();
           for(i=0;i<numofrecords;i++)
           {
           if(subject[i]!="")
              {
                q[i]= "insert into studentmarkstable values('"+studentname+"','"+department+"','"+myclass+"','"+division+"','"+subject[i]+"','"+internalmarks[i]+"','"+externalmarks[i]+"','"+totalmarks[i]+"','"+remarks[i]+"');";
         
                j=st.executeUpdate(q[i]);
               
              }
        
           }
        out.println("<b><font size=5>"+"Data is successfully inserted"+"</font></b>");
        }
        catch(Exception e){
        System.out.print(e);
        e.printStackTrace();
        }

%>

<br />
<br />
<br />

<form action="studentmarks.html">
<input type="submit" value="Enter Another Record">
</form>

</body>
</html>


Output: (studentmarksbackend.jsp)


                   
     
                   Contents of the table "studentmarkstable" after entering the records is shown in following snapshot.




Next: How to add a print button to a webpage

Previous: How to make Form using table in HTML

2 comments:

  1. Cloud is one of the tremendous technology that any company in this world would rely on(Salesforce Certification). Using this technology many tough tasks can be accomplished easily in no time. Your content are also explaining the same(Salesforce crm training in chennai). Thanks for sharing this in here. You are running a great blog, keep up this good work.

    ReplyDelete
    Replies
    1. Its a very great work...it will be helpful for somany people

      Delete