I have a single servlet java file.
this is my code:
out.append(" <tr>");
out.append("<th><input type=\"text\" name=\"fname\"></th>");
out.append("<th><input type=\"text\" name=\"lname\"></th>");
out.append("<th><input type=\"text\" name=\"date\"></th>");
out.append("<th><input type=\"submit\" value=\"Submit\"></th>");
out.append(" </tr>");
3 text input and a button.
the java servlet creates that HTML, i need to read the content of the 3 inputs, and when the button is pressed i need to call a function with the 3 inputs as parameters.
Thanks for help.
EDIT: code test:
out.append("<form>");
out.append(" <tr>");
out.append("<th><input type=\"text\" id=\"fname\" name=\"fname\"></th>");
out.append("<th><input type=\"text\" name=\"lname\"></th>");
out.append("<th><input type=\"text\" name=\"date\"></th>");
out.append("<th><button type=\"submit\" value=\"Submit\">Submit</button></th>");
out.append(" </tr>");
out.append("</form>");
String fname = null;
if(request.getParameter("fname")!=null){
fname=request.getParameter("fname");
//FUNCTION
}
You need to write a form tag and on click of the submit button , submit the html form.
Related
We have a requirement where we are asking our customers to fill the BRD document which is in a HTML file. HTML consists of radio buttons, text box etc along with colors and table. We will have a button which when clicked should call a java class which exports the HTML along with data customer inputs to word document. We are successful in converting a HTML code which is given directly as a string in the java program to word document. We are having issues in sending the HTML along with data.
Can any one let me know how I can achieve this? Or is there any better way we can do this.
public class XhtmlToDocx {
public static void main(String[] args) throws Exception {
//String html = "<html><form><input type=\"checkbox\" name=\"xhtml_mp_tutorial_chapter\" value=\"1\"/></form></html>";
String html = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"+
"<html xmlns=\"http://www.w3.org/1999/xhtml\">"+
"<head>"+
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"+
"<title>Untitled Form</title>"+
"<link rel=\"stylesheet\" type=\"text/css\" href=\"view.css\" media=\"all\">"+
"<script type=\"text/javascript\" src=\"view.js\"></script>"+
"<script type=\"text/javascript\" src=\"calendar.js\"></script>"+
"</head>"+
"<body id=\"main_body\" >"+
" "+
" <img id=\"top\" src=\"top.png\" alt=\"\">"+
" <div id=\"form_container\">"+
" "+
" <h1><a>Untitled Form</a></h1>"+
" <form id=\"form_82495\" class=\"appnitro\" method=\"post\" action=\"\">"+
" <div class=\"form_description\">"+
" <h2>Untitled Form</h2>"+
" <p>This is your form description. Click here to edit.</p>"+
" </div> "+
" <ul >"+
" "+
" <li id=\"li_1\" >"+
" <label class=\"description\" for=\"element_1\">Text </label>"+
" <div>"+
" <input id=\"element_1\" name=\"element_1\" class=\"element text medium\" type=\"text\" maxlength=\"255\" value=\"\"/> "+
" </div> "+
" </li> <li id=\"li_3\" >"+
" <label class=\"description\" for=\"element_3\">Multiple Choice </label>"+
" <span>"+
" <input id=\"element_3_1\" name=\"element_3\" class=\"element radio\" type=\"radio\" value=\"1\" />"+
"<label class=\"choice\" for=\"element_3_1\">First option</label>"+
"<input id=\"element_3_2\" name=\"element_3\" class=\"element radio\" type=\"radio\" value=\"2\" />"+
"<label class=\"choice\" for=\"element_3_2\">Second option</label>"+
"<input id=\"element_3_3\" name=\"element_3\" class=\"element radio\" type=\"radio\" value=\"3\" />"+
"<label class=\"choice\" for=\"element_3_3\">Third option</label>"+
""+
" </span> "+
" </li> <li id=\"li_2\" >"+
" <label class=\"description\" for=\"element_2\">Date </label>"+
" <span>"+
" <input id=\"element_2_1\" name=\"element_2_1\" class=\"element text\" size=\"2\" maxlength=\"2\" value=\"\" type=\"text\"> /"+
" <label for=\"element_2_1\">MM</label>"+
" </span>"+
" <span>"+
" <input id=\"element_2_2\" name=\"element_2_2\" class=\"element text\" size=\"2\" maxlength=\"2\" value=\"\" type=\"text\"> /"+
" <label for=\"element_2_2\">DD</label>"+
" </span>"+
" <span>"+
" <input id=\"element_2_3\" name=\"element_2_3\" class=\"element text\" size=\"4\" maxlength=\"4\" value=\"\" type=\"text\">"+
" <label for=\"element_2_3\">YYYY</label>"+
" </span>"+
" "+
" <span id=\"calendar_2\">"+
" <img id=\"cal_img_2\" class=\"datepicker\" src=\"calendar.gif\" alt=\"Pick a date.\"> "+
" </span>"+
" <script type=\"text/javascript\">"+
" Calendar.setup({"+
" inputField : \"element_2_3\","+
" baseField : \"element_2\","+
" displayArea : \"calendar_2\","+
" button : \"cal_img_2\","+
" ifFormat : \"%B %e, %Y\","+
" onSelect : selectDate"+
" });"+
" </script>"+
" "+
" </li>"+
" "+
" <li class=\"buttons\">"+
" <input type=\"hidden\" name=\"form_id\" value=\"82495\" />"+
" "+
" <input id=\"saveForm\" class=\"button_text\" type=\"submit\" name=\"submit\" value=\"Submit\" />"+
" </li>"+
" </ul>"+
" </form> "+
" <div id=\"footer\">"+
" Generated by pForm"+
" </div>"+
" </div>"+
" <img id=\"bottom\" src=\"bottom.png\" alt=\"\">"+
" </body>"+
"</html>";
WordprocessingMLPackage wordMLPackage = WordprocessingMLPackage.createPackage();
AlternativeFormatInputPart afiPart = new AlternativeFormatInputPart(new PartName("/hw.html"));
afiPart.setBinaryData(html.getBytes());
afiPart.setContentType(new ContentType("text/html"));
Relationship altChunkRel = wordMLPackage.getMainDocumentPart().addTargetPart(afiPart);
// .. the bit in document body
CTAltChunk ac = Context.getWmlObjectFactory().createCTAltChunk();
ac.setId(altChunkRel.getId() );
wordMLPackage.getMainDocumentPart().addObject(ac);
// .. content type
wordMLPackage.getContentTypeManager().addDefaultContentType("html", "text/html");
wordMLPackage.save(new java.io.File("C:/Users/****/Downloads/Word.docx"));
}
}
The problem you are facing seems to be happening because you are reading the static HTML page not the submitted page.
In order to get the full content of the submitted html, you need to submit your form first with the data, create it as a static html page and then access that page with XMLSerializer or URLStreamReader to get the final data to be passed to the word processing part of your program.
I am not providing an exact solution with code as I suppose you will be able to implement the solution yourself and you are mainly stuck on the logic.
I have this code:
out.println("<form action=\"srvSearchResults\" method=\"post\">");
out.println("<tr>");
Book b = freeBooks.get(i);
out.println("<td><input type='submit' data-isbn=\""+b.getIsbn()+"\" name=\"ddd\" value=\""+b.getTitle()+"\" style=\"padding:0; border:none; background:none; cursor:pointer\" ></td>");
out.println("<td>" + b.getIsbn() + "</td>");
out.println("<td>" + b.getAuthorName() + "</td>");
out.println("<td>" + b.getPublishDate() + "</td>");
out.println("<td>" + "Free to borrow!" + "</td>");
out.println("</tr>");
out.println("</form>");
When I click on submit in generated code the servlet function is fired and by this row:
String isbn = request.getParameter("ddd");
I try to get value of data-isbn but it's null.
Any idea how can I get data-isbn attribute on server side afer submit?
When you submit an HTML form, only the values of the form fields are sent to the server, not all of the attributes. So the way it is written now, there is no way to get the value, because your server never received it.
If you want to get your ISBN, you can add an additional hidden input field that contains it:
out.println("<input type='hidden' name='isbn' value='" + b.getIsbn() + "'>");
You can put this right after the <form> open tag.
If you submit your form you can then use
String isbn = request.getParameter("isbn");
to get the ISBN.
As a side note: <form> is an invalid parent for <tr> elements. Therefor it is possible that the form doesn't behave the way you intend it to.
I have some Award images with dates under them that I am retrieving using Java and then passing back to HTML with JSON and AJAX to display. Each Award has a unique ID. When I change a date under one of the Award images I want to use the Award image ID to update the correct date.
How do I capture the correct Award ID to update the date for?
Also, the AJAX $('#awardDate').on('change', function() is not being triggered (i.e., I do not see the alert when I change a date. I have used Inspect in Chrome and no errors are shown.
The Java that extracts the images is in a 'for' loop (if this code fragment is not enough then I can add all the code):
The WebServlet opens with:
public class GetYMAwardsView extends HttpServlet implements Serializable {
private static final long serialVersionUID = 1L;
public String ymID = null;
#Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
The loop contains:
awardType2 = youthMemberAward.getAwAwardType();
//Youth encrypted member ID is stored in session storage - ssYMID
//The encrypted Award ID is: encoded_award_ID
//Selecting the picture will display the requirements for the Award
//Updating the date under the Award will be saved to the database for that Award
json = "<h3>" + awardType2 + "</h3>";
json = json + "<div class='row'><div class='col-md-1'><a href='CubAwardOverview.html?id=" + encoded_award_ID +
"'><img src=" +
image + " height='90' width='90' style='border-style: none' alt='award image' /></a>" +
"<div class='caption'> <p>" +
"<input type='text' name='awardDate' id='awardDate' value='" + newstring + "' style='width: 90px;'/>" +
"</p> </div></div>";
i++; col++;
And then passed back with:
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
The HTML is:
<form data-toggle="validator" role="form" id="selectAward">
<div class="container-fluid">
<!-- div class="col-xs-12"> -->
<div class="form-select">
<!-- Place for Award image -->
<div class="input-group" id="img-container2">
</div>
</div>
<!--</div>-->
</div>
</form>
Once all the images are displayed, with the date under them, I try to catch the change in a date with AJAX. The AJAX I am using to catch the change of 'awardDate' is:
$('#awardDate').on('change', function() {
alert($("#awardDate").val());
var dataToBeSent = {
ssYMID : sessionStorage.getItem('ssYMID'),
};
$.ajax({
type: "POST",
url: "UpdateAwardedDateView",
cache: false,
data: $(awardDate).serialize(),
success: function(data){
$('#ajaxGetUserServletResponse').text('Awarded date success.');
},
error: function() {
$("#awardDate").focus();
$('#ajaxGetUserServletResponse').text('An error occured applying the awarded date.');
}
}).done(function(responseJson) {
$('#ajaxGetUserServletResponse').text('Awarded date completed.');
});
});
In this AJAX call I want to pass the Youth Member's ID (ssYMID), Award ID and new date to the WebServlet"UpdateAwardedDateView".
Replace:
"<input type='text' name='awardDate' id='awardDate' value='" + newstring + "' style='width: 90px;'/>" +
With:
json = json + "<p>";
json = json + "<input class='form-control mr-sm-2' type='date' name='awardDate' id='awardDate' value='" + youthMemberAward.getCaAwardedDate() + "' onchange='myFunction(this.value, " + youthMemberAward.getAwId() + ")' style='width: 160px;'/>";
json = json + "</p>";
I am new in Java and JQuery. I am using hidden field to hide my value but using Browser Inspector others can find my data. how can I hide values in Browser.
out.println("<form method='post' action='test.jsp'>");
out.println("<input type=hidden name=test1 value=" + test1 + " />");
out.println("<input type=hidden name=test2 value=" + test2 + " />");
out.println("<input type=hidden name=test3 value=" + test3 + " />");
out.println("<input type=hidden name=test4 value=" + test4 + " />");
out.println("<input type=submit value=Launch />");
out.println("</form>");
html renders the data on users browser, html standards offers you to hide data by only using hidden form fields, the initial purpose of hidden form field to allow session tracking.
with hidden form field user can view the content when he views the source,
if you want to hide data i suggest to use some kind of encryption.
I have a gallery of images, and when I hover the mouse over any of the images, the image pulls back revealing some text.
When I have the following HTML code (at bottom of post) inside the HTML document, everything works fine.
However, when I put the exact same HTML code inside a Java servlet and have it returned to the page, everything looks normal, but the image pullback doesn't work anymore.
Any idea why that would occur? Perhaps I need to do some kind of refresh to make it work properly?
relevant code for one of the items in the gallery:
<li>
<div class="header"><p>Product 1 Shirt</p></div>
<div class="gallery_item">
<img src="gallery/thumb/gallery_01.jpg" width="214" height="194" class="cover" alt="" />
<p>Highlight 1</p>
<p>Highlight 2</p>
<p>Highlight 3</p>
More Info
Enlarge
</div>
<div class="p2"><p>Price: $10</p></div>
<div class="p2"><p>In Stock: Yes</p></div>
</li>
As requested: the servlet:
public void service(HttpServletRequest request,
HttpServletResponse response) throws IOException,
ServletException
{
PrintWriter out = response.getWriter();
response.setContentType("text/html");
String requestType = request.getParameter("type");
String result;
if(requestType.equals("getproductlist"))
{
Products products = Products.getProductsInstance();
String keywords = request.getParameter(("keywords"));
String organization = request.getParameter(("organization"));
String price = request.getParameter(("price"));
String sort = request.getParameter(("sort"));
result = products.getProducts(keywords, organization, price, sort);
//this next lines of html are actually what is returned from products.getProducts. I'm just putting it here for clarity. All the variables (name, h1, etc) are okay.
result += "<li>"
+ "<div class=\"header\"><p>"+ name +"</p></div>"
+ "<div class=\"gallery_item\">"
+ "<img src=\"gallery/thumb/gallery_01.jpg\" width=\"214\" height=\"194\" class=\"cover\" alt=\"\" />"
+ "<p>"+ h1 +"</p>"
+ "<p>"+ h2 +"</p>"
+ "<p>"+ h3 +"</p>"
+ "More Info"
+ "Enlarge "
+ ""
+ "</div>"
+ "<div class=\"p2\"><p>Price: "+ itemPrice +"</p></div>"
+ "<div class=\"p2\"><p>In Stock: "+ inStock +"</p></div> "
+ "</li>";
out.println(result);
out.close();
}