data from selected rows to servlet - html

This code is written in jsp.it is a dynamic table with rows and columns .When clicked on the submit button,only the selected rows and the data in that row should be fetched into the servlet.
``<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%# page import="java.io.*,java.util.*,java.sql.*" %>
<%# page import="javax.servlet.http.*,javax.servlet.*" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Saravana Bhavan</title>
<link rel="stylesheet" href="css/lavish-bootstrap.css"/>
<link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<form name="f1" method="post" action="Insertcheck.jsp">
<sql:setDataSource var="snapshot"
driver="oracle.jdbc.driver.OracleDriver"
url="jdbc:oracle:thin:#localhost:1521:xe"
user="system" password="pswd"
/>
<sql:query dataSource="${snapshot}" var="result">
select * from vendormenu
</sql:query>
<center><h3>Saravana Bhavan</h3>
<h4 class="text-muted">Menu</h4></center>
<div class="panel">
<table class="table table-bordered table-responsive" border="2" width="100%">
<tr>
<td>ITEM CODE</td>
<td>ITEM NAME</td>
<td>RATE</td>
<td></td>
</tr>
<c:forEach var="row" items="${result.rows}">
<center>
<tr>
<td><c:out value="${row.mid }"/>
</td>
<td><c:out value="${row.mname }"/>
</td>
<td><c:out value="${row.cost }"/></td>
<td><div class="checkbox">
<label><input type="checkbox" name="yes"></label></div></td>
</tr>
</center>
</c:forEach>
</table>
<br><br>
<center><input type="submit" /></center>
</div>
</form>
</body>
</html>
I need to print the values in each row selected using checkboxes by the user into the servlet from jsp.The rows are added dynamically. How to retrieve all the values from the rows selected?

Suggesting that ${row.mid} is unique, add value attribute to your checkbox:
<input type="checkbox" name="yes" value="${row.mid}" />
And then, in the servlet/JSP processing the form (btw. I do not see any <form> tag in your page!), use
String[] selectedMIDs = request.getParameterValues('yes');
to get an array of selected mids.

Related

HTML file change to REACT

I'm wondering if it's possible to change this HTML code to make it fit into React.For example is if I try to put this HTML code into the REACT app. I also included the code for Node.js and MongoDB. Does it require a lot of change for the HTML code to make it fit in React? Is it necessary to include script and import DOM in the method to include it in REACT App?
This is home.ejs code use for upload and download files.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="pic"><br>
<input type="submit" value="Upload">
</form><br><br><br><br>
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>
image
</td>
<td>
download
</td>
</tr>
</thead>
<tbody>
<% for(var i=0; i < data.length > 0; i++) {%>
<tr>
<td><img src="<%= data[i].picspath %>" style="width:100px; height:100px;"></td>
<td>
<form action="/download/<%= data[i]._id %>" method="GET">
<input type="submit" value="Download">
</form>
</td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>
sure just follow the following steps
Replace the opening and closing < html > tags with a < div > tag.
Replace the opening and closing < head > tags with a <React.Fragment>
tag.
Replace the opening and closing < body > tags with a < div > tag.
Replace the <% and %> tags with curly braces { and } to indicate
that the code between them is JavaScript.
Replace the <%= and %>tags with curly braces { and } to indicate that the code between them is an expression that should be rendered as a string.
<div>
<React.Fragment>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</React.Fragment>
<div>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="pic" /><br />
<input type="submit" value="Upload" />
</form>
<br /><br /><br /><br />
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>image</td>
<td>download</td>
</tr>
</thead>
<tbody>
{data.map((item) => {
return (
<tr>
<td>
<img src={item.picspath} style={{ width: "100px", height: "100px" }} />
</td>
<td>
<form action={`/download/${item._id}`} method="GET">
<input type="submit" value="Download" />
</form>
</td>
</tr>)
})}
</tbody>
</table>
</div>
</div>

HTML form with dropdownlist using jsp code

I have this form used to insert data into a database.
I want to change one value selecting from a dropdownlist connected to a mysql database.
This is the form:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<body>
<div id="container">
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
</div>
</body>
</html>
But to fill the country I want to use a jsp getting the data from Mysql DB with a jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%# page import="java.sql.*" %>
<%ResultSet resultset =null;%>
<HTML>
<%
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","1234");
Statement statement = connection.createStatement() ;
resultset =statement.executeQuery("select country_id, country_name from country") ;
%>
<center>
<h1> Drop down box or select element</h1>
<select>
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt("country_id")%>"> <%= resultset.getString("country_name")%></option>
<% } %>
</select>
</center>
<%
//**Should I input the codes here?**
}
catch(Exception e)
{
out.println("wrong entry"+e);
}
%>
</BODY>
</HTML>
Both codes work independent. My question is how can I integrate the Country dropdown list into the form.
Thanks !
You can achieve above in following ways :
1) . Put all your code in same page and use jquery/js to assign value of <select> to your <input..> like below :
//onchange of select this will execute
$("select").on("change", function() {
//getting value of select-box
var value = $(this).val();
//assign value to input with id="emp_country"
$("#emp_country").val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- put your db connection code here-->
Select-box:
<select>
<option value="0">Select Country</option>
<!--put your option code here-->
<option value="something">Something</option>
</select>
<!--put catch block here-->
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
2).In CountryDropdown.jsp put your select-box inside <form></form> with a submit button like below :
<form method="post" action="Yourformpagename">
<%
<!--connection code->
%>
<center>
<h1> Drop down box or select element</h1>
<select name="country">
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt(" country_id ")%>">
<%= resultset.getString("country_name")%>
</option>
<% } %>
</select>
</center>
<%
<!--catch block code here-->
%>
<input type="submit" value="SEND" />
</form>
And then get it in your form page like below:
<input type="text" name="emp_country" id="emp_country" value="${param.country}"/>

Populate data on same window

Hi, my requirement is to populate the data on same window where i have provide the employee id , Employee Id button and input field is present on left corner the of window and i want to populate the data on right corner of window as shown on figure right now i m population data on different window please help me out .
Here is my JS
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<jsp:include page="Header.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="1255" height="952" border="0">
<tr>
<td width="357" height="251" bgcolor="#CC6600">
<table width="285" border="0" align="center" bgcolor="#FF9900">
<c:if test="${requestScope.x}">
<div id="div3">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentid">
<span>Find By ID </span>
<form:input path="departmentId" />
<input type="submit" name="submit1" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.y}">
<div id="div1">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentname">
<span>Find BY Name</span> <form:input
path="departmentName" />
<input type="submit" name="submit" value="search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.w}">
<div id="div2">
<form:form commandName="projectForm"
action="/EmployeeWebAppUI/ProjectController/getprojectsbyId">
<span>Employee Number: </span>
<form:input path="employeeNumber" />
<input type="submit" name="submit2" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.A}">
<div id="div2">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyid"
method="get">
<span>Employee Id:</span>
<form:input path="employeeNumber" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.B}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyname"
method="post">
<span>Employee Name:</span>
<form:input path="firstName" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.C}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findByDepatmentId"
method="post">
<span>Department ID:</span>
<form:input path="departmentId" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
</table>
<p> </p>
</td>
<td width="888" rowspan="2">
<tr>
<td height="693" bgcolor="#CC6600"></td>
</tr>
</table>
</body>
</html>
Instead of getting complete page get only data from Server and then render data on page using JavaScript.
This is typically possible if you post page asynchronously ( or using Ajax). The way you do is :
Call action by passing input parameters to the server using Ajax.
Get response in JSON form from server
Parse JSON data and then populate page using DOM manipulation.
You can use any JS library like jQuery to simplify your Ajax call as well as doing DOM manipulation.
Assuming you are using jquery
on click of tab or lable do AJAX request .
It will call your servlet and write the data into ajax response there.
on client side onsuccess do the required stuff .
function changeCOntent(type){
$.ajax({
type: 'POST',
url: 'servletpath?type=passtype',
success:function(data){
$('#contentDiv').innerHTML = data;
}
});
}

How to get data between two dates?

I am having a date picker issue in a jsp file.
When i click on hyperlink in Allmeters.jsp file,it will open the meteridinfo.jsp. In this file i have one label called meterid. I get this meterid value from allmeters.jsp and also i have two fields called fromdate and todate. By using these dates i am getting data from mysql table but the problem is when i choose fromdate as 2012-05-1 and todate as 2012-05-11 it is not retreiving the data but when i change todate as 2012-05-31 then it is displaying data from mysql table,it means when i select the lastdate in a month as todate then only it is coming.Please help me.
The codings of AllMeters.jsp is given below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%#page import="java.sql.*"%>
<html>
<head>
<title>All Meter's</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
td{FONT: 13px Arial,sans-serif;}
th{FONT:bold 13px Arial,sans-serif;color:white;background-color:#3366ff}
input{FONT: 13px Arial,sans-serif;border: solid 1;}
select{font: 13px Arial,sans-serif}
#button{cursor:hand}
A:hover {COLOR: red}</style>
<script type="text/javascript">
window.history.forward();
function noback() { window.history.forward(); }
</script>
</head>
<body>
<table border=1 style="" width="100%" align="center" cellpadding="5" cellspacing="0">
<tr>
<th>S No</th>
<th>Meter ID</th>
<th>Consumer ID</th>
<th>Consumer Name</th>
<th>Reading</th>
<th> Date</th>
<th>Time</th>
<th>Status</th>
<th>Sub Zone</th>
<th>Zone</th></tr>
<%
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/suwatermeter","root","sumith");
Statement st=con.createStatement();
int mid;
int SNo=1;
ResultSet rs=st.executeQuery("select * from Meter_List");
while(rs.next()){
%>
<tr><td align="center" bgcolor="#ededed"><%=SNo%></td><td align="center" bgcolor="#ededed"><%=rs.getInt("Meterid")%></td><td align="center" bgcolor="#ededed"><%=rs.getInt("Consumerid")%></td><td bgcolor="#ededed"><%=rs.getString("Consumername")%></td><td align="center" bgcolor="#ededed"><%=rs.getInt("LastReading")%></td><td align="center" bgcolor="#ededed"><%=rs.getDate("Date")%></td><td align="center" bgcolor="#ededed"><%=rs.getTime("Time")%></td><td align="center" bgcolor="#ededed"><%=rs.getString("Status")%></td><td align="center" bgcolor="#ededed"><%=rs.getString("Subzone")%></td><td align="center" bgcolor="#ededed"><%=rs.getString("zone")%></td></tr>
<%
SNo++;
}
rs.close();
st.close();
con.close();
}
catch(Exception e){}
%>
</tbody>
<form action="" method="POST" name="frm_pages">
<table style="width: 100%;" align="center" border="0">
</table>
</body>
</html>
code of file meteridinfo.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%#page import="java.sql.*"%>
<%#page import="java.util.Date"%>
<%#page import="java.text.SimpleDateFormat"%>
<%
Connection con;
String sqlQuery="";
Statement st;
ResultSet rs=null;
%>
<html>
<head>
<title>Meterid Information
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
td{FONT: 13px Arial,sans-serif;}
th{FONT:bold 13px Arial,sans-serif;color:white;background-color:#3366ff}
input{FONT: 13px Arial,sans-serif;border: solid 1;}
select{font: 13px Arial,sans-serif}
#button{cursor:hand}
A:hover {COLOR: red}</style>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>
<script type="text/javascript">
function calendarSetup() {pick("inputField1");pick("inputField2");} //initialize calendar on each date input field
function pick(inputField){new JsDatePick({useMode:2,target:inputField,dateFormat:"%d-%m-%Y"});} //display calendar for a given date input field
</script>
</head>
<body onload=calendarSetup()>
<body onload=calendarSetup()>
<form action="./meteridinfon.jsp" method="get" name="search">
<table width="500px;"align="center" border="0" cellpadding="4" cellspacing="3" bgcolor="#cccccc" bordercolor="#000000">
<tbody><tr>
<th colspan="3" align="middle"><strong>Meter ID Readings</strong></th></tr>
<tr><td>
<input type=hidden name="mid" value="<%=request.getParameter("mid")%>">
<label name="name" value="<%=request.getParameter("mid")%>"><font size="4">Meter ID : <%=request.getParameter("mid")%></font></label></td>
</tr>
<tr><td class="options1" colspan="3">
<font size="4">From</font>
<input type="text" size="20" maxlength="10" id="inputField1" name="fromDate">
<font size="4">To</font>
<input type="text" size="20" id="inputField2" name="toDate">
</font>
</td></tr>
<tr><td style="height: 30px;" colspan="4" align="center">
<input name="Search" value="Search" style= "HEIGHT:30px" style="width: 90px; border: 1px solid rgb(13, 31, 78);" type="submit">
</td></tr>
<%
try
{
int mid=Integer.parseInt(request.getParameter("mid"));
out.println("mid ===> +"+mid);
String fromDate=request.getParameter("fromDate");
String toDate=request.getParameter("toDate");
out.println("fromDate ===> +"+fromDate);
out.println("toDate ===> +"+toDate);
String query="select LastReading,Date,Time from Meter_List where Date between str_to_date('"+fromDate+"', '%Y-%m-%d') and str_to_date('"+toDate+"', '%Y-%m-%d') and Meterid="+mid;
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/suwatermeter","root","sumith");
st=con.createStatement();
if(fromDate !=null){
rs=st.executeQuery(query);
}
//ResultSet rs=st.executeQuery("select LastReading,Date,Time from Meter_List where Meterid="+meterid);
while(rs.next()){
%>
<table width="65%" align="center">
<tr bgcolor="lightblue">
<td>Reading</td>
<td bgcolor="lightblue"><%=rs.getInt("LastReading")%></td>
</tr>
<tr bgcolor="lightblue">
<td>Installation Date</td>
<td bgcolor="lightblue"><%=rs.getDate("Date")%></td>
</tr>
<tr bgcolor="lightblue">
<td>Inastallation Time</td>
<td bgcolor="lightblue"><%=rs.getTime("Time")%></td>
</tr>
<%
}
rs.close();
st.close();
con.close();
}
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</tbody>
</table>
</div>
</body>
</html>
In mysql table i have the date values as follows:
2012-05-10,
2012-03-04,
2012-03-04,
2012-09-12,
2012-09-12,
2012-09-12,
2012-09-12.
SELECT
*
FROM my_table
WHERE date(date_column1) >= DATE(NOW())
AND date(date_column2) <= DATE(NOW())
you can use
select * from my_table where date_coumn between '2012-05-01' AND '2012-05-11'
select LastReading,Date,Time from Meter_List
where str_to_date(date, '%Y-%m-%d')
between str_to_date('"+fromDate+"', '%Y-%m-%d') and
str_to_date('"+toDate+"', '%Y-%m-%d') and Meterid="+mid;

where do i put the html form action file in the mvc

I am doing a tutorial that uses the mvc. I have the following view:
Index.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MovieApp.Models.Movie>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<form action="Movie/List" method="post">
<table>
<tr>
<td>
<button id="List" type="button" onclick="">List</button>
</td>
</tr>
</table>
</form>
<form action="Create.aspx" method="post">
<table>
<tr>
<td>
<input type="submit" value="Create" />
</td>
</tr>
</table>
</form>
</asp:Content>
so when you click on create it must call the Create view.
when i run the app i get an error: Resource cannot be found. Create.aspx a view in the movie folder.
What is the path that I need to specify for the Create.aspx to be found?
You shouldn't be pointing to the page, Create.aspx. You should be pointing to a method called Create in a controller.
Its not clear on any controller you are using, but by default it will post to its own controller (with the same name). Or you can specify the method and controller to post to like this, using Html.BeginFrom:
#using (Html.BeginForm("Method", "Controller", FormMethod.Post))
{
<table>
<tr>
<td>
<input type="submit" value="Create" />
</td>
</tr>
</table>
}