JSP forms with Spring mvc - java

I create the following JSP.This jsp creates two buttons.
<form:form method="POST" action="${pageContext.request.contextPath}/link">
<div class="button-container" style="float:left;clear:right">
<table>
<tr>
<td>
<input id="post" type="image" src="${pageContext.request.contextPath}/<spring:theme code="image"/>votup.png"
</td>
</tr>
<tr class="hidden">
<td class="hidden">
<input type="text" name="mark" value="up"/>
</td>
</tr>
<tr>
<td>
<input id="post" type="image" src="${pageContext.request.contextPath}/<spring:theme code="image"/>votdown.png"
</td>
</tr>
<tr class="hidden">
<td class="hidden">
<input type="text" name="mark" value="down"/>
</td>
</tr>
In the controller class
#RequestMapping(value = "/link", method = RequestMethod.POST)
public String sendMark(#RequestParam("mark") final String marking){
}
I notice that the value of the String marking= up,down.This happens no matter which of the 2 buttons i click. Instead of this i want to be only up or down according to the button that the user will click.(If click at the first button should be up, if click at the second button should be down). I understood that the reason i take this result is because i named both of the hidden values as mark, but i don't know how to make the seperation with another way. Actually is the first time i'm doing something with JSP.Could i use some tag libraries for this problem?Any comments or answers are much appreciated!
Thank you

I'll advise you to put only one hidden field and change its value with javascript before processing the POST command.

I recommend you to create two separate forms for the two buttons and both form will contain the hidden field. Now you will get only one value.
But if you create two separate forms with different actions then you won't need the hidden field.
Hope this helps you.
Cheers.

As i understand, you will submit the form eithef for vote up or down. And you want 2 buttons for each action in the same form, but don't know how to make the difference. I would do something like this:
On form, put the action according to your request mapping (seems already done).
Then, both buttons would be made to submit the form. First of all, both your buttons have the same id, and the id has to be unique for each element. So, give your arrows and form id's like:
<input id="postup" type="image"
<input id="postdown" type="image"
<form id="myform"
Then, pun an onclick action on it like:
And create 2 JS functions:
function postUp () {
$('#mark').val("up");
$('#myform').submit();
}
function postDown () {
$('#mark').val("down");
$('#myform').submit();
}
Your controller will look like:
#RequestMapping(value = "/link", method = RequestMethod.POST)
public String sendMark(Model model, HttpServletRequest request){
String mark = request.getParameter("mark");
return "yourjsp"
}
And you will have your value.
Hope it helps !
Regards !

Related

JSP Spring MVC Populating Form Fields Based on Value in Another Field

I have a Spring MVC Form that I am building in a JSP, which will require entering an account number in a field. When I enter that number, I want to run a query to the database to pull back related information for that specific number. This data will then populate other fields on the form.
This is my Spring bind code in the JSP for the account number that will be entered. So, as soon as I enter this number, a DB query should trigger, to bring back the data for the other fields.
<spring:bind path="strExpenseAcctNum">
<div class="form-group ${status.error ? 'has-error' : ''}">
<label class="col-sm-2 control-label">Expense Account Number :</label>
<div class="col-sm-10">
<form:input path="strExpenseAcctNum" type="string" class="form-control " id="strExpenseAcctNum" placeholder="strExpenseAcctNum" />
<form:errors path="strExpenseAcctNum" class="control-label" />
</div>
</div>
</spring:bind>
From my research, I am thinking a combination of Javascript and JQuery might be the best approach, but being new at this, I am not sure how to configure it.
Any help would be greatly appreciated.
Thanks,
Dave
#Dave
First implement your form using spring form tags, something like below.
<form:form method="POST" action="/spring-mvc-example" modelAttribute="example">
<table>
<tr>
<td><form:label path="number">Account Number</form:label></td>
<td><form:input path="number" id="number"/></td>
</tr>
<tr>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form:form>
Then use Jquery's focusout method to make an Ajax call in the background as soon as the user focus outs from account number field. Then in the success block, just parse it if needed and bind to your other fields using jquery's val method like below.
$("#number").focusout(function(){
$.ajax({
type:"POST",
url:"https://example.com/getDetails",
success: function(data) {
//Response from the controller comes here
var json = JSON.stringify(data);
//Bind it to fields like these
$("#firstname").val(json.firstname);
}
});
});
Hope this works for you, let me know if any questions.

How to catch a table in POST and use it as an array

so basically to lay this out I have
AffidavitController - Controller
Affidavit.jsp - GET view page
summary.jsp - POST view page
so basically I have a form that a user fills out and then they hit the submit button and it posts it.
This method is then called in the controller
#RequestMapping(value = "/affidavit", method = RequestMethod.POST)
public String post(AffidavitDetailDto affidavitDetail, HttpServletRequest request, HttpServletResponse response, Model model) {
now within this method I catch the information that was passed over in the response object.
an example of this is I have a name field on the GET view page and the name of this field is 'custName'
so I catch it like so
String contactName = request.getParameter("custName");
model.addAttribute("contactName", contactName);
and then I can display it on my POST view page
<p>Name: ${contactName}</p>
but now I am trying to figure out how I can do the same with a table and treat it like an array
the following is how it is added on the GET view page
<table id="certEmail" name="certEmail">
<tr>
<td>${user.email}</td>
</tr>
</table>
the following is what I have attempted
String[] certEmail = request.getParameterValues("certEmail");
model.addAttribute("certEmail", certEmail);
and this is what I have on the view page to display it
<div id="Emails">
<c:forEach items="${certEmail}" var="email">
<p>${email}</p>
</c:forEach>
</div>
this does not currently work. I know I am probably just doing it wrong so can someone please at least point me in right direction. I just haven't figured out a good google query yet to get an answer.
Table is not a form element (https://www.w3schools.com/html/html_form_elements.asp). Only form element values on form are submitted to server. So instead of
<table id="certEmail" name="certEmail">
<tr>
<td>${user.email}</td>
</tr>
</table>
You should have something like
<table id="certEmail">
<tr>
<td>
<input type="text" name="certEmail" value="${user.email}" />
</td>
</tr>
</table>
if you want your data to be editable, or
<table id="certEmail">
<tr>
<td>
${user.email}
<input type="hidden" name="certEmail" value="${user.email}" />
</td>
</tr>
</table>
if you want it to be hidden and just resent to the server.
While I should denote that second variant generally should be avoided. I would recommend you to pass the user id and use it in back-end to load user and read his email.
Please learn how to use HTML forms: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form

Java- determine which radio button selected

I am dynamically filling a table which contains a radio button in each row. How can I go about determining in which row the radio button has been selected using Java?
<form action='ReceptionManagerController' method='POST'>
<table >
<tr style="text-align:center">
<th>Check-In</th>
<th>Check-Out</th>
<th>Type</th>
<th>Assign Room?</th>
</tr>
<c:forEach var="item" items="${unassignedBookings}">
<tr>
<td>${item.checkIn}</td>
<td>${item.checkOut}</td>
<td>${item.size}</td>
<td><input type="radio" name="checked"></td>
<td><input type="hidden" name="id${count}"></td>
<td><input type="hidden" name="checkIn${count}" value="${item.checkIn}"></td>
<td><input type="hidden" name="checkOut${count}" value="${item.checkOut}"></td>
<td><input type="hidden" name="type${count}" value="${item.size}"></td>
<c:set var="count" value="${count + 1}" scope="page"/>
</tr>
</c:forEach>
</table>
<input type="submit" name="action" value="Assign Booking"/>
</form>
If I give each radio button the same name, then only one can be selected at a time. However, this stops me from determining uniquely which button has been pressed.
Any suggestions?
Thank you for your help.
I had a similar problem last year while working on a struts 1.3 based web application. You can refer to the this link. I hope it will help you. If still its not clear to you, let me put some try on it.
You can take an ArrayList of your bean type(Using Generics) having the setter and getter for it and keep the appropriate values for all the bean objects and add all those objects one by one in your ArrayList. After that iterate the ArrayList in your JSP to display the properties along with radio button. Rest of all is explained in given link.
Note: Your bean class must have a property with proper getter/setter for the radio button.
By the form that I can see, Check-Box seems to be appropriate choice rather than Radio Button. As far as capturing the selection is concerned, you can follow same strategy that you are doing for rest of the form elements, suffix count value to radio-Button or check-box to give them uniqueness.

How to handle buttons with same value but different names in Spring

I have a table that is dynamically created that has rows of movies.
It has a title column,
a media type column,
a rating column,
and a column that contains a "view" button.
When one of these view buttons is clicked,
I would like to go to a page that contains all the details of that movie by sending the title to the controller so I can query for it in mySql.
The problem is that for all these buttons,
the value is always going to be "view".
So my solution is to make the name of the button different as shown in the code below (this is the raw html generated from the jsp):
<html>
<body>
<form action="someAction">
<table>
<tr>
<th>title</th>
<th>type</th>
<th>rating</th>
</tr>
<tr>
<td>title1</td>
<td>DVD</td>
<td>R</td>
<td><input type="submit" name="mediaType.title1" value="view"></td>
</tr>
<tr>
<td>title2</td>
<td>DVD</td>
<td>R</td>
<td><input type="submit" name="mediaType.title2" value="view"></td>
</tr>
<tr>
<td>title3</td>
<td>BLU-RAY</td>
<td>PG-13</td>
<td><input type="submit" name="mediaType.title3" value="view"></td>
</tr>
</table>
</form>
</body>
</html>
I could then use a parameterMap to figure out which view was pressed.
That is messy and Spring has to have some way of being able to do this.
I thought something like this would work in the controller:
#RequestMapping("someAction", params = "mediaType.{title}=view")
public ModelAndView loadPage(String title) {
// use title to query mysql
// build Model
// return ModelAndView
}
However this doesn't work.
Is there something that I can use in Spring that would be simpler and cleaner like above instead of getting the parameterMap from the request?
If I'm understanding this correctly, you have rows of information organized into a table. You're looping through some kind of collection, which has the side effect of making each input field have similar 'name' attributes. As a result, it's difficult to determine which input fields you really care about. You've then chosen to use the button as an identifier (presumably, because only the one button you actually click on get's added to the request -all the others don't get submitted) to determine which 'row', and subsequent input fields.
I think this might all come down to which 'button' you're using. If you're using a literal input tag (type="submit" or "button") the 'value' attribute is what the user sees as the text on the button -so, you're forced to play shenanigans with the 'name' attribute (presumably by adding an index to the name, splitting the string once you get it out of the request, and using that identifier to get the other parameters out of the request that also have the same identifier appended to their 'name' attribute).
JSP
<input type="submit" name="view${varStatus.index}" value="View" />
HTML Source
<input type="submit" name="view3" value="View">
You should probably use the button tag instead. It allows the text that the user sees to be different than the value that is submitted in the request.
JSP
<button type="submit" name="view" value="${varStatus.index}" >View</button>
HTML Source
<button type="submit" name="view" value="3">View</button>
This gives you the 'identifier' for the row.
How Spring fits into this:
I played with the #RequestMapping and the #RequestParam annotations, and was unable to get Spring to give me the values directly into the controller. But, I was able to do it by writing a custom HandlerMethodArgumentResolver along with a custom annotation.
note: I'm using annotations and java config instead of xml config, AND probably more importantly -this was a quick and dirty example to get it working. adjust it as needed for your situation.
HandlerMethodArgumentResolver
Annotation
Controller method
Instead of putting the table inside one form, you could put multiple forms inside the table, in the TRs:
<tr>
<form action="someAction">
<td>title1<input type='hidden' name='title' value='title1' /></td>
<td>DVD</td>
<td>R</td>
<td><input type="submit" value="view"></td>
</form>
</tr>
Then each title has its own form and you send in the title (always with parameter name of title) from a hidden input.
The solution lies in this statement:
"I have a table that is dynamically created that has rows of movies".
Presumably,
you are looping through a list of movies and generating the table in the jsp file and each row has some unique identifier.
Add a hidden to identify the selected row.
Set the value of the hidden value in an onclick handler from the submit buttons.
Here is some example stuff:
<form ...>
<c:forEach blah var="row">
<tr>
...
<td><input type="submit" value="View" onclick="setSelectedRow('${row.id}')"/></td>
</c:forEach>
<input type="hidden" id="blammy" name="blammy" value=""/>
</form>
<script type="text/javascript">
function setSelectedRow(rowId)
{
... set blammy.value equal to rowId.
}
</script>
// the id is used by JavaScript to find the object in the DOM.
// the name is what appears in the request.
#RequestMapping("someAction")
public ModelAndView loadPage(
#RequestParameter("blammy") final String blammy)
{
...
}

How to get custom value from text field in JSP?

I'm working in a very simple and small web application, it is a jsp that handles a shopping cart.
What I do at this point is to iterate through all the products that are stored in the car and add them one by one to the jsp with each iteration.
This is the code that adds a row to the jsp in each iteration:
<tr>
<td>
<input type=text name=Quantity value=<%=quantity%>>
</td>
<td>
<input type=text name=id value=<%=id%>>
</td>
<td>
<input type=submit value="Delete" onclick=<%CustomSubmit(request, id); %>>
</td>
</tr>
As you can see I add to the end of each row a submit type control with a custom method for handling Click events, the use of this control is to remove from the car the respective product.
The problem that I have is that when I click in the delete button of a product, the id that is passed to the CustomSubmit(...) method is not the id of the product that I'm trying to remove but the id of the last product added to the jsp.
So, my question is how can I get the correct id from the item that I'm trying to remove?
The way i use to do it is as follows:
Replace
<input type=submit with a button
<input type="button" value="Delete" onclick="deleteIt('yourid');" />
add the deleteIt javascript function, in the function you fill a hidden input field with the id.
Then submit the page and the correct id gets passed to your page
Little sidenote its always prudent to escape all your Strings
dont use <input type=submit but use <input type="submit"
maybe like
<td>
<input type="text" name="id" value="<%=id%>">
</td>
<td>
<input type="button" value="Delete" onclick="deleteItem('<%=id%>')">
</td>
I assume your cart is a list of objects, each having the attributes id and quantity. So I would expect you code to look something like this (noting Peter's answer about using a 'button'):
<input type="button" value="Delete" onclick="CustomSubmit('<%=cartItem.id%>');"/>
I'm not entirely sure what you are trying to do with the 'request' parameter in your original code but if this is the HTTP request all you will get when you try to write it to the JSP is the result of the request.toString method.

Categories