Spring Boot 2.5, Thymeleaf
I need when click submit to pass object Product and additional extra param (quantity)
html template:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${appName}">Category template title</title>
<link th:href="#{/public/style.css}" rel="stylesheet"/>
<meta charset="UTF-8"/>
</head>
<body>
<div class="container">
<h3 th:text="*{title}"/>
<form method="post" action="#" th:object="${product}" th:action="#{/product}">
<input type="hidden" id="id" th:field="*{id}"/>
<input type="text" placeholder="Name" id="name" th:field="*{name}" th:disabled="${isView}"/>
<input type="hidden" id="created" th:field="*{created}"/>
<textarea placeholder="Description" rows="5" id="description"
th:field="*{description}" th:disabled="${isView}"></textarea>
<input type="number" placeholder="Price" id="price" th:field="*{price}" th:disabled="${isView}"/>
<input type="text" placeholder="Currency" id="currency" th:field="*{currency}" th:disabled="${isView}"/>
<input type="text" placeholder="Images URL(separate by comma)" id="images" th:field="*{images}" th:disabled="${isView}"/>
<input th:type="${isView} ? hidden : submit" value="Submit"/>
</form>
</div>
</body>
</html>
and here my controller:
#RequestMapping("cart/add")
public String addProduct(Model model) {
logger.info("addProduct");
model.addAttribute("isAdd", true);
model.addAttribute("product", new Product());
model.addAttribute("title", "Add Product");
model.addAttribute("viewMode", ViewMode.ADD);
return "product";
}
#PostMapping(value = "/product")
public String submitProduct(Product product, Model model) {
logger.info("submitProduct = " + product);
if (product.getId() == 0) { // add category
product.setCreated(new Date());
} else { // update category
product.setUpdated(new Date());
}
return "redirect:/cart";
}
So when click button Submit call submitProduct with fill object Product. But I need to pass extra param (as second param in method submitProduct) - quantity.
How I can pass this extra int param from html to controller?
One option is to access the value directly from the request parameters.
Assuming the quantity value is available in the form as an input field, with a name of quantity (looks like it is not there at the moment), then you can alter your controller to use this:
import org.springframework.web.bind.annotation.RequestParam;
And then change the relevant method signature to something like this:
public String submitProduct(Product product, Model model,
#RequestParam(name = "quantity") String quantity) {...}
(Field validation of some kind would also be needed, I assume.)
Related
In the post "Hello World" phase of my Spring journey. Creating an app that POSTS two fields which RESULT in three fields.
My controller has three fields. Two are populated on POST, and all three should populate the RESULT fields.
The Controller:
#Slf4j
#Controller
public class GreetController {
#GetMapping("/greeting")
public String greetingForm(Model model) {
model.addAttribute("greeting", new Greeting());
}
#PostMapping("/greeting")
public String greetingSubmit(#ModelAttribute Greeting greeting, Model model) {
model.addAttribute("greeting", greeting);
}
}
The Model:
public class Greeting {
//fields correspond to greeting.html
private long id;
private String content;
private String numbah;
public String getNumbah() { return numbah; }
public void setNumbah() {
this.numbah = SomeFunctions.functionOne(this.getContent());
}
public long getId() { return id; }
public void setId(long id) { this.id = id; }
public String getContent() { return content; }
public void setContent(String content) { this.content }
}
The View:
<!DOCTYPE HTML>
this is greeting.html
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Form</h1>
<!--th.fields correspond to fields in th.object (ie greeting.java)-->
<form action="#" th:action="#{/greeting}" th:object="${greeting}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p>Message: <input type="text" th:field="*{content}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
<h1>Result</h1>
<p th:text="'id: ' + ${greeting.id}" />
<p th:text="'content: ' + ${greeting.content}" />
<p th:text="'numbah: ' + ${greeting.numbah}" />
Submit another message
</body>
</html>
Note:
The ${greeting.numbah} field, as configured above, is resulting in null. I had a log statement in that function that never returned anything, indicating that the function in the model is never firing. However, when the view was configured like this...
<body>
<h1>Form</h1>
<!--th.fields correspond to fields in th.object (ie greeting.java)-->
<form action="#" th:action="#{/greeting}" th:object="${greeting}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p>Message: <input type="text" th:field="*{content}" /></p>
<p>Some Number: <input type="text" th:field="*{numbah}"></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
<h1>Result</h1>
<p th:text="'id: ' + ${greeting.id}" />
<p th:text="'content: ' + ${greeting.content}" />
<p th:text="'numbah: ' + ${greeting.numbah}" />
Submit another message
</body>
...the field was populating, so the function itself....functions.
Long short, what I'm attempting to do here is take id and content, do someFunction(content)=numbah and return id, content, and numbah.
Thank you in advance.
It always gets down to something simple, doesn't it?
There was a typo in the setNumbah constructor in the model.
This is why I hardly ever post on sites like this: because you almost always figure out what you did wrong if you just sleep on it and have another look.
Thanks for checking this out and apologies that it's not a "high quality" problem/answer. Will delete if that's the protocol for a self-answered question.
addMission.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Create a mission</title>
</head>
<body>
<h1>Create a Mission</h1>
<form action="/createMission" method="post">
<p>Mission title: <input type="text" required id="title" name="title" value=""></p>
<p>
<select name="agent" id="agent">
<option value="natasha">Natasha Romanova</option>
<option value="austin">Austin Powers</option>
<option value="johnny">Johnny English</option>
</select>
</p>
<h2>Enter the gadgets</h2>
<p>Gadget 1:<input type="text" required id="gadget1" name="gadget1" value=""></p>
<p>Gadget 2:<input type="text" required id="gadget2" name="gadget2" value=""></p>
<p><input type="submit" value="Create Mission!"></p>
</form>
<p> Back to home </p>
</body>
</html>
Controller Code
#PostMapping("/createMission")
public String createMission(#ModelAttribute Mission mission) {
int returnValue = database.createMission(mission);
System.out.println(returnValue);
return "view_missions";
}
createMission() method
public int createMission(Mission mission) {
MapSqlParameterSource namedParameters = new MapSqlParameterSource();
String query = "INSERT INTO missions(agent, title, gadget1, gadget2) VALUES (:agent, :title, :gadget1, :gadget2)";
namedParameters
.addValue("agent", mission.getAgent())
.addValue("title", mission.getTitle())
.addValue("gadget1", mission.getGadget1())
.addValue("gadget2", mission.getGadget2());
int returnValue = jdbc.update(query, namedParameters);
return returnValue;
}
In the code snippets shared above, Im creating a mission using thymleaf.
When I enter the details in the textboxes and hit "Create" button I get an error 'Property or field 'empty' cannot be found on null'. Im sure this null property is coming from the dropdown list.
Is there any way I can get the value of the dropdown too along with the other values and send them to the createMission() ?
I don't see in your controller how you get back the values.
You need to add an object to your model in your "get controller" and link it to the form.
Then you can retrieve it and save it in the database.
Please have a look to this post you will get more details on how to make it
I have an Employee class that looks like this.
public class Employee {
private String Name;
private List<Address> address;
*****Getters and Setters****
}
And my Address class looks like this
public class Address {
private int addressid;
private Employee employee;
#NotNull(message="Field Cannot be Empty")
private String description;
*****Getters and Setters****
}
I want to bind List of addresses (Employee can have more than one address - 1:M) to the employee class with the data that is parsed through the form. Which looks like this.
I have 3 input address fields, one of the sample input fields look like this...
<div class="form-group">
<div class="row">
<label class="col-sm-3" for="exampleInputEmail1">Address
1</label>
<div class="col-sm-7">
<form:input class="form-control" placeholder="" path="" />
<form:errors path="" cssClass="error" />
</div>
</div>
</div>
Note that I have cut down many unnecessary form fields to demonstrate the problem more clearly. Please help me bind the list of input fields with the relevant class. Any advice for this design is also welcome.
You can use Thymeleaf for this as below.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>form|data</title>
</head>
<body>
<div class="starter-template">
<form th:action="#{employeeData}" method="post" th:object="${employee}">
<input th:field="*{name}" type="text" th:name="name" name="name" placeholder="name" class="input u-one-third js-get-form-data"/>
<th:block th:each="add,addStat:*{address}">
<input th:field="*{address[__${addStat.index}__].description}" type="text" th:name="add.description" name="description" placeholder="description" class="input u-one-third js-get-form-data"/>
</th:block>
<input type="submit" value="SEND"/>
</form>
</div>
</body>
</html>
Controller.
#RequestMapping(value = "/formData", method = RequestMethod.GET)
public String formData(Map<String, Object> model) {
Employee employee = new Employee();
Address address = new Address();
address.setDescription("TEST");
address.setEmployee(employee);
employee.getAddress().add(address);
model.put("employee",employee);
return "formData";
}
#RequestMapping(value = "/employeeData", method = RequestMethod.POST)
public void employeeData(#Valid Employee employeeData, BindingResult errors) {
System.out.println(employeeData.getName());
}
Please find the working commit here.
I have a simple snippet of form like:
<form th:action="#{'/save'}" th:object="${account}" method="post">
<div class="form-group">
<label for="expirationDate">Expiration date</label>
<input type="datetime-local" class="form-control" id="expirationDate"
placeholder="Expiration date" th:field="*{expirationTime}"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I'm passing there a filled object account and expirationTime is a LocalDateTime field. The problem is that the expirationTime is not bind with the value passed to the form (object which is passed is 100% correct).
Any idea why?
Edit: Simply put, Spring/Thymeleaf doesn't format a Java 8 date correctly for the datetime-local input type. Tell Spring how to format the value correctly with #DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm").
The annotation #DateTimeFormat tells Thymeleaf how to format the date string when parsing/formatting. That includes producing the value= annotation in the HTML input, and reading in POST data submitted by the form. The datetime-local input type expects a value formatted yyyy-MM-dd'T'HH:mm, so we use that as the formatter in the model class.
Model Class:
public class DateContainer {
private String name;
#DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm")
private LocalDateTime dateTime;
public LocalDateTime getDateTime() {
return dateTime;
}
public void setDateTime(LocalDateTime dateTime) {
this.dateTime = dateTime;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Controller:
#RequestMapping("/dateTest")
public String dateTest(final DateContainer dateContainer) {
if (dateContainer.getDateTime() == null) {
dateContainer.setDateTime(LocalDateTime.now());
}
return "dateTest";
}
Template:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head></head>
<body>
<h1>Hello World!</h1>
<form th:action="#{/dateTest}" th:object="${dateContainer}">
<label>Name: </label><input type="text" th:field="*{name}"/>
<label>Date Time: </label><input type="datetime-local" th:field="*{dateTime}"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
HTML Produced:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello World!</h1>
<form action="/dateTest">
<label>Name: </label><input type="text" id="name" name="name" value="" />
<label>Date Time: </label><input type="datetime-local" id="dateTime" name="dateTime" value="2017-08-28T13:01" />
<input type="submit" value="Submit" />
<input type="hidden" name="_csrf" value="437b30dc-a103-44d0-b4e9-791d8de62986" /></form>
</body>
</html>
Screenshot:
Screenshot in Chrome 60
Comptibility:
The datetime-local input type is a new HTML5 type and isn't supported in all browsers. See compatibility: https://caniuse.com/#search=datetime-local
In non-compliant browsers, the datetime-local field will simply appear as a text field, and will contain the date and time with the T in between. That may lead to usability issues depending on your use case.
Make sure that you have this dependency:
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
<version>2.1.0.RELEASE</version>
</dependency>
After that just add the org.thymeleaf.extras.java8time.dialect.Java8TimeDialect class to the list of dialects in your TemplateEngine implementation, and you will have the #temporals object available to be used in your templates.
More details can be found here.
I want to access my Powerschool (powerschool.avon.k12.ct.us), and I find the need to type in my password and username every time rather tedious. To try and fix this I downloaded the page's source in Chrome, below:
<!DOCTYPE html>
<!-- saved from url=(0052)http://powerschool.avon.k12.ct.us/guardian/home.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parent Sign In</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name="robots" content="noindex">
<link href="./Powerschool_files/screen.css" rel="stylesheet" type="text/css" media="screen">
<meta name="viewport" content="width=device-width">
<script src="./Powerschool_files/jquery-1.4.2.min.js"></script><style type="text/css"></style>
<script language="JavaScript" src="./Powerschool_files/md5.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript"><!--
var pskey = "4EDE156E2FAD0F1A427D2AD066530F496ADC3EEA78CE43E70F28053576FD4EA1";
//-->
</script>
<script language="JavaScript" type="text/javascript">
function deleteCookie(cookieName){
var cookieDate = new Date();
cookieDate.setTime(cookieDate.getTime()-1);
document.cookie = cookieName + "=; expires='" + cookieDate.toGMTString()+"'; path=/";
}
deleteCookie("InformAuthToken");
function getURLParameter(name) {
return unescape(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Hide or show the translator login input field
// if the URL parameter "translator" is present
var translator = getURLParameter("translator");
if (translator == "null") {
$j('#translatorInput').hide();
} else {
if (translator == "true") {
$j('#translatorInput').show();
} else {
$j('#translatorInput').hide();
}
}
$j('a.popWin').click(function(){
var winURL = $j(this).attr('href');
window.open(winURL);
return false;
});
});
</script>
</head>
<body class="pslogin" id="palogin">
<div id="container">
<div id="branding-powerschool"><img src="./Powerschool_files/ps7-logo-lrg.png" alt="PowerSchool" width="280" height="41"></div>
<div id="content" class="group">
<form action="./Powerschool_files/Powerschool.htm" method="post" name="LoginForm" target="_top" id="LoginForm" onsubmit="doPCASLogin(this);">
<input type="hidden" name="pstoken" value="2465670387a1nxrEimrKqPMN0c7QbxxKLNZe16PRC">
<input type="hidden" name="contextData" value="4EDE156E2FAD0F1A427D2AD066530F496ADC3EEA78CE43E70F28053576FD4EA1">
<input type="hidden" name="dbpw" value="">
<input type="hidden" name="translator_username" value="">
<input type="hidden" name="translator_password" value="">
<input type="hidden" name="translator_ldappassword" value="">
<input type="hidden" name="returnUrl" value="">
<input type="hidden" name="serviceName" value="PS Parent Portal">
<input type="hidden" name="serviceTicket" value="">
<input type="hidden" name="pcasServerUrl" value="/">
<input type="hidden" name="credentialType" value="User Id and Password Credential">
<h2>Parent Sign In</h2>
<!--box content-->
<div id="noscript" class="feedback-alert" style="display: none;"> To sign in to PowerSchool, you must use a browser that supports and has JavaScript enabled. </div>
<fieldset id="login-inputs" class="group">
<div>
<label>Username</label>
<input type="text" id="fieldAccount" name="account" value="" size="39">
</div>
<div>
<label>Password</label>
<input type="password" name="pw" value="" size="39"><div id="login-help">Having trouble signing in?</div>
</div>
<div id="translatorInput" style="display: none;">
<label>Translator Sign In</label>
<input type="password" name="translatorpw" value="" size="39">
</div>
<div class="button-row">
<button type="submit" id="btn-enter" title="Sign In To PowerSchool Parent Access" value="Enter" border="0">Sign In</button>
</div>
</fieldset>
<!-- box content-->
</form>
</div>
<div id="footer" class="group">
<p>Copyright© 2005 - 2013 Pearson Education, Inc., or its affiliate(s). All rights reserved.</p>
<p id="pearsoncorplink">Join us on Facebook</p>
</div>
</div>
<div id="branding-pearson">
<div id="logo-pearson"></div>
<div id="tagline-pearson"></div>
</div>
<script type="text/javascript">
/**
* Set the page's locale via a request_locale URL parameter. If there is already a URL parameter by
* this name, then substitute it with the passed-in locale. NOTE: This function will actually cause the page
* to be re-submitted with the new locale, so it really should not be used with pages submitted via POST
* requests (if there are any, which I hope there are not).
* #param locale the locale to set (e.g. en_US)
*/
function setPageLocale (locale) {
var c=String (window.location);
var rlpos = c.indexOf("request_locale=");
var afterPart = "";
if (rlpos > 0) {
var afterBegin = c.indexOf("&", rlpos);
if (afterBegin > 0) {
afterPart = c.substring(afterBegin);
}
c = c.substring(0, rlpos-1);
}
var s=(c.indexOf('?') > 0 ? '&' : '?');
var np = c + s + 'request_locale=' + locale + afterPart;
window.location = np;
}
function jsCheck() {
document.getElementById("login-inputs").className = 'group';
}
jsCheck();
</script>
<script>
$j('#noscript').hide();
function jsEnabled() {
if(typeof $j != 'function'){
alert('Developer: This page is missing key components required for functionality!\n\nPossible causes include:\n - Commonscripts might be missing.\n - Page customization might enabled, and incomplete.');
//document.write('<script...');
} else {
$j('#login-inputs').removeClass('hide');
$j("#fieldAccount").focus();
}
}
$j(document).ready(function(){
jsEnabled();
});
</script>
</body></html>
I was wondering if it was possible to directly modify the downloaded source to automatically fill the input boxes (the below block is where I think it would be done) to always fill in the username and pass fields with "myUsername" and "myPassword," or something like that. I tried setting the value of the Input and Username fields, but that (chrome) gave me an, shown here:
No webpage was found for the web address: file:///C:/Users/Me/Desktop/Powerschool_files/Powerschool.htm
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.
Do you guys know how this could be done?
Instead of copying the entire page, it's probably simpler to make a bookmarklet that fills in the form. Just edit a normal bookmark and change the link to be this:
javascript:(function() { document.forms[0].elements[0].value="hi" })()
That will set the value of the first field in the first form. (It may take some experimenting to see which form number and which field number.)
You can probably use Chrome to remember your passwords for you automatically, but what you have should actually work. You just need to change any paths to urls for it to work perfectly. One that you definitely need to change is the form action:
- ./Powerschool_files/Powerschool.htm
+ https://example.com/Powerschool_files/Powerschool.htm
This should allow you to submit directly to that site unless they have a CSRF token in the form that I don't see.