I have a below kind of html
<html>
<head>
<title>Upload a file please</title>
</head>
<body>
<h1>Please upload a file</h1>
<form method="post" action="http://localhost:8080/service/uploadFile" enctype="multipart/form-data">
<input type="text" name="name"/>
<input type="file" name="file"/>
<input type="submit"/>
<input type="hidden" name="smallSize" value="50x50">
<input type="hidden" name="mediumSize" value="100x100">
<input type="hidden" name="largeSize" value="150x150">
</form>
</body>
</html>
I want to do it using Vaadin Upload component?How can I achieve this?
You can't mix normal html pages with vaadin processing the "results".
They way to go would be to embedd vaadin in your html page.
Look here:
https://vaadin.com/de/book/vaadin7/-/page/advanced.embedding.html
I use https://vaadin.com/directory#addon/easyuploads for it.
Example:
final UploadField uploadField = new UploadField();
Button b = new Button("Show value");
b.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
Object value = uploadField.getValue();
mainWindow.showNotification("Value:" + value);
}
});
You can use vaadin-upload to upload one image with attribute (maxfiles) on
Related
Im working in an assignment and I want to make a "add to cart button" I tried the post and get methods but it does nothing, the code consist of 4 files explore.html, explore.js, cart.html and cart.js and the users should be allowed to click on a link while exploring products and it will appear in the cart.html
explore.html
<html>
<head>
<title>Digital Waves::Explore</title>
<link rel="stylesheet" href="../css/explore.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/explore.js"></script>
</head>
<body>
<div class="form-group">
<form action="/html/cart" method="POST">
<input name="quantity" type="hidden" value="1" />
<input name="product_id" type="hidden" value="91801160" />
<input name="product_name" type="hidden" value="Red Hat" />
<button class="add-button" type="submit">Add to Cart!</button>
</form>
</div>
</body>
</html>
explore.js
$(document).ready(function(){
$(".add-button").click(function(){
//alert("explore is clicked");
var productId = $("#productId").val();
var productName = $("#productName").val();
var productQuantity = $("#productQuantity").val();
var data = {
'product_id': productId,
'product_name': productName,
'quantity': productQuantity
};
$.post("html/cart", data, showDone);
var showDone = function() {
alert("I sent the data");
};
});
});
cart.html
<!DOCTYPE HTML>
<html>
<head>
<title>Digital Waves::Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="../js/cart.js"></script>
</head>
<body>
<button id="buttonx">I get info</button>
<p id="x"></p>
</body>
</html>
cart.js
$(document).ready(function(){
$("#buttonx").click(function(){
//alert("cart is clicked");
$.get("../html/explore.html",function(data , status){
$("x").html(data);
alert("done");
})
});
});
As per your HTML code, you have not assigned id attribute to your input fields. You need to use id field as below:
<div class="form-group">
<form action="/html/cart" method="POST">
<input id="quantity" name="quantity" type="hidden" value="1" />
<input id="product_id" name="product_id" type="hidden" value="91801160" />
<input id="product_name" name="product_name" type="hidden" value="Red Hat" />
<button class="add-button" type="submit">Add to Cart!</button>
</form>
</div>
After this, your jQuery code should work fine. And if you have multiple add cart form, then you should use class instead of id. Hope it helps you.
I'm develop simple Spring boot app using Thymeleaf and want to display selected "user" from Combobox1 at the "userName" text field. How i can made it?
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Добавить цитату</title>
</head>
<body>
<form th:action="#{/addQuote}"
th:object="${personForm}" method="POST">
<p><b>Имя</b><br>
<div>
<input name = "userName" type="text" size="38" th:field="*{name}" >
<a style="position:fixed;left:0px;top:0px;margin: 0;border-width:0;z-
index:255"></a>
</div>
<textarea name="comment" cols="40" rows="6" th:field="*{text}" >
</textarea>
<p><input type="reset" value="Отменить">
<input type="submit" value="+"></p>
<select name="Combobox1" size="1" id="Combobox1"
style="position:absolute;left:17%;top:4%;width:199px;height:20px;z-
index:3;" >
<option th:each="user : ${users}"
th:value="${user}"
th:utext="${user}"/>
</select>
</form>
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
</div>
</body>
</html>
Option 1:
Add Id in your userName input tag
<input id="userName" name = "userName" type="text" size="38" th:field="*{name}" />
Add script
<script>
function check() {
document.getElementById("userName").value=document.getElementById("Combobox1").value;
}
</script>
Call script function
<select id="Combobox1" onChange="check();">
Option2:
Another option with Jquery
$(function() {
$("#Combobox1").on("change",function() {
alert();
$("#userName").val($(this).val());
});
});
I am trying to create a page that will code that will take in student information from html and use java servlets to catch the information and put into Google Cloud Datastore.
I have the HTML working but whenever I try to run it the page just refreshes and doesn't put anything into the cloud datastore.
I am new to servlets so I'm not sure what I am missing.
Below is the jsp file (i.e add_student.jsp)
<%# 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Add Student
Search Student
Update Student
Delete Student
<form method="post">
<p>Student Number <input name="student_number" type="number" required /></p>
<p>First Name <input name="f_name" type="text" required/></p>
<p>Last Name <input name="l_name" type="text" required/></p>
<p>Address (temporary) <input name="temp_address" type="text" required/></p>
<p>Address (permanent) <input name="perm_address" type="text" required/></p>
<p>Home Number <input name="home_number" type="number" required/></p>
<p>Mobile Number <input name="mobile_number" type="number" required/></p>
<p>Date of Birth <input name="birth_date" type="date" required/></p>
<p>Gender <p>Gender: <br>
<input type="radio" name="gender" value="M" required checked> Male<br>
<input type="radio" name="gender" value="F" required> Female<br>
<p>Major <input name="major" type="text" required/></p>
<p>Course <input name="course" type="text" required/></p>
<p>Study Mode <p>Study Mode: <br>
<input type="radio" name="study_mode" value="full_time" checked> Full-Time<br>
<input type="radio" name="study_mode" value="part_time" required> Part-Time<br>
<p>Start Date <input name="start_date" type="date" required /></p>
<p>End Date <input name="end_date" type="date" required /></p>
<p>Add Student <input name="submitButton" type="submit" value="addStudent" /></p>
</form>
</body>
</html>
Here's the java Servlet file (i.e add_studentServlet.java)
package assignment_redo;
import java.io.IOException;
import javax.servlet.http.*;
import com.google.appengine.api.datastore.*;//import the datastore files from google
#SuppressWarnings("serial")
public class add_studentServlet extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
resp.setContentType("text/html");
String title ="Using the GET Method to Read Form Data!";
String student_number = req.getParameter("student_number");
String f_name =req.getParameter("f_name");
String l_name=req.getParameter("l_name");
String perm_address = req.getParameter("perm_address");
String temp_address = req.getParameter("temp_address");
String home_number = req.getParameter("home_number");
String mobile_number = req.getParameter("mobile_number");
String birth_date = req.getParameter("birth_date");
String gender = req.getParameter("gender");
String major = req.getParameter("major");
String course = req.getParameter("course");
String study_mode = req.getParameter("study_mode");
String start_date = req.getParameter("start_date");
String end_date = req.getParameter("end_date");
// //creating an object of type DatastoreService
DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
//creating a new entity of type employee
Entity student = new Entity("Student", student_number);
//set its properties
student.setProperty("f_name", f_name);
student.setProperty("l_name", l_name);
student.setProperty("student_number", student_number);
student.setProperty("temp_address", temp_address);
student.setProperty("perm_address", perm_address);
student.setProperty("home_number", home_number);
student.setProperty("mobile_number", mobile_number);
student.setProperty("birth_date", birth_date);
student.setProperty("gender", gender);
student.setProperty("major", major);
student.setProperty("course", course);
student.setProperty("study_mode", study_mode);
student.setProperty("start_date", start_date);
student.setProperty("end_date", end_date);
//insert student entity into Datastore
datastore.put(student);
//display success message now
resp.getWriter().println("Student with id "+student_number+" added to the system!");
}
}
You have to indicate in your jsp that you are submitting the form to your servlet:
<form action="addStudent" method="post">
This makes the assumption that in the web.xml you have configured your servlet as follow:
<servlet>
<servlet-name>add_studentServlet</servlet-name>
<servlet-class>assignment_redo.add_studentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>add_studentServlet</servlet-name>
<url-pattern>/addStudent</url-pattern>
</servlet-mapping>
Then you have to put your code in the doPost of your servlet, not in the doGet.
I have downloaded newest NanoHTTPD from link:
https://raw.githubusercontent.com/NanoHttpd/nanohttpd/master/core/src/main/java/fi/iki/elonen/NanoHTTPD.java
When processing very basic POST example, calling session.getParms() returns empty map. My code is:
#Override
public Response serve(IHTTPSession session) {
System.out.println( session.getMethod() + " " + session.getParms() );
return newFixedLengthResponse("Some response.");
}
Which returns:
{}
HTML code triggering nanoHTTPD is:
<html>
<body>
<form action="http://localhost:3388" method="POST">
<input type="text" name="username" value="a" />
<input type="submit" />
</form>
</body>
</html>
That all looks good. Do you see anything suspicious in my code, or just nanoHTTPD is not mature enough?
You should do parseBody before get parameters when you handle a POST request.
In your code, just like this:
#Override
public Response serve(IHTTPSession session) {
session.parseBody(new HashMap<String, String>());
System.out.println( session.getMethod() + " " + session.getParms() );
return newFixedLengthResponse("Some response.");
}
session.parseBody() only needed if you upload one or more files. Your codes are fine except you must provide enctype="multipart/form-data" in your html form tag. So your html code should be:
<html>
<body>
<form action="http://localhost:3388" enctype="multipart/form-data" method="POST">
<input type="text" name="username" value="a" />
<input type="submit" />
</form>
</body>
</html>
This is my code:
<%# 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>Select Payment Method<BR><BR>
<font size=""><marquee behavior="alternate">PAYMENT GATEWAY</marquee></font>
<form action="S2ShowPay.jsp" method="post">
<input type="radio" value="NET BANKING" name="payment" >NET BANKING<br><br>
<input type="radio" value="DEBIT CARD PAYMENT" name="payment">DEBIT CARD<BR><br>
<input type="radio" value="CASH ON DELIVERY" name="payment" >CASH ON DELIVERY<br><br>
<input type="submit" value="NEXT"/>
</form>
</body>
</html>
I want to navigate to netbanking.jsp when I click on Net Banking radio button and Debit.jsp repectively, using only jsp and some javascript.
Please help.
Im not sure what's your expected result, Perhaps you can try this. Correct me if im wrong.
Using location.href
function fnPayment()
{
if(document.getElementById("a").checked ==true || document.getElementById("b").checked ==true)
{
location.href = "http://www.google.com"; //your jsp file
}
}
</script>
<input type="radio" value="NET BANKING" name="payment" id="a">NET BANKING<br><br>
<input type="radio" value="DEBIT CARD PAYMENT" name="payment" id="b">DEBIT CARD<BR><br>
<input type="radio" value="CASH ON DELIVERY" name="payment" id="c">CASH ON DELIVERY<br><br>
Using response redirect
Since you have created S2ShowPay.jsp, you can pass parameter to it once you clicked next button and put response redirect based on the parameter.
<input type="radio" value="NET" name="payment" >NET BANKING<br><br>
<input type="radio" value="DEBIT" name="payment">DEBIT CARD<BR><br>
<input type="radio" value="CASH" name="payment" >CASH ON DELIVERY<br><br>
S2ShowPay.jsp
String payment_ind = request.getParameter("payment");
if(payment_ind.equals("NET") || payment_ind.equals("DEBIT") )
{
response.sendRedirect("netbanking.jsp");
}
Add this code within head tag:
<script type="text/javascript">
function redirectPage(use,rname){
for (var val = 0, r1=use.elements; val < r1.length; val++)
if(r1[val].name==rname&&r1[val].checked)
use.action=r1[val].value;
}
</script>
Change your form tag like this:
<div>
<form action="#" method="post" onsubmit="redirectPage(this, 'r1');">
<input type="radio" name="r1" value="netbanking.jsp">NET BANKING<br><br>
<input type="radio" name="r1" value="Debit.jsp">DEBIT CARD<BR><br>
<input type="radio" name="r1" value="cashondelivery.jsp">CASH ON DELIVERY<br><br>
<input type="submit" value="Next"/>
</form>
</div>
Select the desired radio button and then clicking Next button will redirect to respective page.