Add dynamically radio button to JSP Form - java

I was trying to add dynamically extra fields to a Form. However only text/number fields are getting created as expected. The radio buttons got created but the choose list is being shared with all the objects. Also notice Im closing the FORM after the script close otherwise path FORM input will throw and error. rAny idea what Im missing? Thank you in advance.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-5 p-1">
<form:form method="POST" modelAttribute="investmentForm" class="p-4">
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="form-group">
<label><h5><b>Invoice ID</b></h5></label>
<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />
</div>
<div class="form-group">
<label><h5><b>Amount</b></h5></label>
<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input" step=".01" required="required" min="1" max="10000"/>
</div>
<label><h5><b>Currency</b></h5></label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>
</label>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add Row</button>
</div>
</div>
<button type="submit" class="btn mt-4 btn-block p-2 btn-success shadowed">Invest!</button>
<script type="text/javascript">
// add row
var counter = 1;
$("#addRow").click(function () {
counter += 1;
var html ='<div id="inputFormRow">'
+'<div class="form-group">'
+'<label><h5><b>Invoice ID</b></h5></label>'
+'<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />'
+'</div>'
+'<div class="form-group">'
+'<label><h5><b>Amount</b></h5></label>'
+'<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input" step=".01" required="required" min="1" max="10000"/>'
+'</div>'
+ '<div class="form-group">'
+'<label><h5><b>Currency</b></h5></label>'
+'<div class="form-check form-check-inline">'
+'<label class="form-check-label">'
+'<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>'
+'</label>'
+'</div>'
+'<div class="input-group-append">'
+'<button id="removeRow" type="button" class="btn btn-danger">Remove</button>'
+'</div>'
+'</div>'
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
</form:form>

Related

405 - request GET and POST

Hello i have problem with update object, i dont know how always aftre update data i have message: Request method 'GET' not supported. But date after refresh object is update.
Controller with GET and POST method to update object
#Controller
#RequestMapping("/packet")
public class PacketController {
#GetMapping("/modify/{id}")
public String modifyPacketGet(Model model, #PathVariable Long id)
{
model.addAttribute("channels", channelService.getAllChannels());
model.addAttribute("packet", packetService.getById(id));
return "packet/modify";
}
#PostMapping("/modify")
public String modifyPacketPost(Model model, #ModelAttribute PacketDto packetDto)
{
packetService.updatePacket(packetDto);
return "redirect:/packet/modify";
}
HTML form
<form th:action="#{/packet/modify}" method="post" th:object="${packet}" enctype="multipart/form-data">
<input type="text" hidden="hidden" readonly="readonly" th:field="*{id}" />
<input type="text" hidden="hidden" readonly="readonly" th:field="*{filename}" />
<div class="form-group">
<label for="name" class="h3 text-success">Name:</label>
<input id="name" type="text" th:field="*{name}" class="form-control">
</div>
<div class="form-group">
<label for="price" class="h3 text-success">Price:</label>
<input id="price" type="text" th:field="*{price}" class="form-control">
</div>
<div class="form-group">
<label for="description" class="h3 text-success">Description:</label>
<textarea class="form-control" rows="5" th:field="*{description}" id="description"></textarea>
</div>
<div class="form-group">
<label for="image" class="h3 text-success">Image:</label>
<input id="image" type="file" th:field="*{multipartFile}" accept="image/**" class="form-control">
</div>
<div class="form-group">
<label for="channel" class="h2 text-secondary">Channels:</label>
<ul class="list-inline">
<li class="list-inline-item" th:each="c : ${channels}">
<input id="channel" type="checkbox" th:field="*{channelIds}" th:value="${c.id}">
<label th:text="${c.name}"></label>
</li>
</ul>
</div>
<button type="submit" class="btn btn-success btn-lg mr-2">Add</button>
</form>
The http request GET /packet/modify is not being handled in your controller and you are redirecting your POST method to that http request:
return "redirect:/packet/modify";
To solve this you need to do one of the following:
Change the redirect request in your POST to an endpoint that is being handled:
return "redirect:/packet/modify/" + packetDto.getPacketId();
Or, handle that GET endpoint:
#GetMapping("/modify/")
public String retrievePacket(...) { ... }
Hope this helps.

the div tag is not showing when i call its content in jquery

the html code:
<div class="col-md-12">
<span>Select Payment Option</span>
<select class="form-control" name="select1" id="select1"
onchange="fun_showtextbox()">
<option value="x">Cash</option>
<option value="y">Cheque</option>
<option value="z">Mobile Money</option>
</select>
</div>
<div class ="row" style="display:none;" id="mobileno_textbox">
<div class="col-md-12">
<div class="form-group label-floating is-empty is-focused">
<label class ="control-label">Cash</label>
<input type="text" name="select" "id="select"class="form-
control"placeholder="number">
</div>
</div>
</div>
<div class ="row">
<div class="col-md-12">
<div class="form-group label-floating is-empty is-focused">
<label class ="control-label">Amount: </label>
<input type="text" name="select" "id="select"class="form-control"
placeholder="amount">
</div>
</div>
</div>
the div content in number does not show after calling the function.
jquery code:
function fun_showtextbox()
{
var select_status=$('#select1').val();
/* select from select box then show my text box */
if(select_status == "y")
{
$('#mobileno_textbox').show();// By using this id you can show your
content
}
else
{
$('#mobileno_textbox').hide();// otherwise hide
}
}
i don't know what i am doing wrong but div content for id="mobileno_textbox" is not showing?
looks like you may have a few typos. especially your Id. you have "id="select"
anyway I think I have it working here.
https://jsfiddle.net/qLg1fy9d/
js
$(document).ready(function() {
fun_showtextbox();
$('#select1').change(function() {
fun_showtextbox();
})
});
function fun_showtextbox() {
var select_status = $('#select1').val();
/* select from select box then show my text box */
if (select_status == "y") {
$('#mobileno_textbox').show(); // By using this id you can show your
content
} else {
$('#mobileno_textbox').hide(); // otherwise hide
}
}
html
<div class="row">
<div class="col-md-12">
<span>Select Payment Option</span>
<select class="form-control" name="select1" id="select1">
<option value="x">Cash</option>
<option value="y">Cheque</option>
<option value="z">Mobile Money</option>
</select>
</div>
</div>
<div class="row" style="display:none;" id="mobileno_textbox">
<div class="col-md-12">
<div class="form-group label-floating is-empty is-focused">
<label class="control-label">Cash</label>
<input type="text" name="select" id="select" class="form-control" placeholder="number">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group label-floating is-empty is-focused">
<label class="control-label">Amount: </label>
<input type="text" name="select" id="select" class="form-control" placeholder="amount">
</div>
</div>
</div>
It seems like the problem is that you have no jquery included in your html file. This is working with plain js code.
function fun_showtextbox()
{
var select_status = document.getElementById('select1').value;
/* select from select box then show my text box */
if(select_status == "y")
{
document.getElementById('mobileno_textbox').style.display = "block";
}
else
{
document.getElementById('mobileno_textbox').style.display = "none";
}
}
<!DOCTYPE html>
<html>
<body>
<div class="col-md-12">
<span>Select Payment Option</span>
<select class="form-control" name="select1" id="select1"
onchange="fun_showtextbox()">
<option value="x">Cash</option>
<option value="y">Cheque</option>
<option value="z">Mobile Money</option>
</select>
</div>
<div class ="row" style="display:none;" id="mobileno_textbox">
<div class="col-md-12">
<div class="form-group label-floating is-empty is-focused">
<label class ="control-label">Cash</label>
<input type="text" name="select" "id="select"class="form-
control"placeholder="number">
</div>
</div>
</div>
<div class ="row">
<div class="col-md-12">
<div class="form-group label-floating is-empty is-focused">
<label class ="control-label">Amount: </label>
<input type="text" name="select" "id="select"class="form-control"
placeholder="amount">
</div>
</div>
</div>
</body>
</html>

Get id value from list jsp

I have view on my jsp like this:
<form:form name = "command"
method = "post"
action = "withdrawRequest"
class = "form-horizontal group-border-dashed"
style = "border-radius: 0px;">
<table class = "table table-bordered"
id = "datatable-icons" > <!-- start table table-bordered -->
<thead>
<tr>
<th>ID</th>
<th>NO</th>
<th>AMOUNT (RP)</th>
<th>DOCTOR BALANCE (RP)</th>
<th>DOCTOR ID</th>
<th>DOCTOR NAME</th>
<th>TRANSFER ADMIN NAME</th>
<th>TRANSFER DATE</th>
<th>TRANSFER REFERENCE</th>
<th>TRANSFERRED</th>
</tr>
</thead>
<tbody>
<c:forEach var = "withdrawal"
items = "${listWithdrawals}"
varStatus = "loopStatus">
<tr class="odd gradeX">
<td>${withdrawal.id}</td>
<td>${loopStatus.index + 1}</td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.amount}" /></td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.doctor_balance}" /></td>
<td>${withdrawal.doctor_id}</td>
<td>${withdrawal.doctor_name}</td>
<td>${withdrawal.transfer_admin_name}</td>
<td><%-- <fmt:formatDate type="date" value="${withdrawal.transfer_date}" /> --%>${withdrawal.transfer_date}</td>
<td>${withdrawal.transfer_reference}</td>
<td class="text-center">
<c:if test="${withdrawal.transferred == true}">
<span class="label label-success">Transferred</span>
</c:if>
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button">Pending</button>
</c:if>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="id" value="${withdrawal.id}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference" value="${transferReference}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</form:form>
I cannot get the ID of which button I selected from view,
<input type = "text"
class = "form-control"
name = "id"
value = "${withdrawal.id}" />
If I use this code
String withdrawalId = request.getParameter("id");
The value is always 120.
For example:
How do I get the correct ID when I click the modal window?
It seems that the problem is in Nifty Modal Window Effects you are using for popup. It opens modal window for the last row.
It can be fixed with following jsp modifications.
Move modal window declaration out of table. Make it single for page. And rename id field to make it unique, e.g. transferredId
Add onclick to buttons opening modal window in order to init it (set transferredId and others) with necessary values
So your form would be (just ending to save space)
....
<td class="text-center">
....
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button"
onclick="document.getElementById('transferredId').value=${withdrawal.id}">
Pending
</button>
</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="transferredId" id="transferredId" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
After that String withdrawalId = request.getParameter("transferredId"); will return correct id.
Excuse me for not add this as a comment, as i can't because i still not have 50 reputation (still 16), i just want you to test something, try to refresh the page, and open row with ID 119 for example first time, i mean any Id rather than 120, and see what happen, if the value that you opened first time is always still exist, so the problem is not in id 120 and the problem is that u may use if not null to set the value some where, so first time it will be null and the value added to it, but next times it will have a value already so u can't change it, and if u can't solve the problem after doing that, please upload your controller so we can detect the problem
Check the generated HTML. Looks to me that it contains listWithdrawals.length instances of that <input and all of them have the same name.
request.getParameter("id") is going to return a single value, not a list of all the values. What you need is request.getParamaterValues("id") that is going to return all of them.
This is because when the form is submitted all those input values are going to be sent.
So the simple solution (with no JavaScript magic) is to get all the lists of values with request.getParamaterValues and deal with everything that changed. ids[0] and transferReferences[0] would be the needed values for the first item in listWithdrawals:
String[] ids = request.getParamaterValues("id");
String[] transferReferences = request.getParamaterValues("transferReference");
for (int i = 0; i < ids.length; i++) {
System.out.println(ids[i]);
System.out.println(transferReferences[i]);
}
Another solution would be to generate unique names for each input/item in listWithdrawals:
<c:forEach var="withdrawal" items="${listWithdrawals}" varStatus="loopStatus">
<input type="text" class="form-control" name="${'transferReference_'.concat(withdrawal.id)}" value="${withdrawal.id}" />
</c:forEach>
And then you'd be able to access the transferReference value of a withdrawal with ID 119 like this:
request.getParameter("transferReference_119")

How to get values from multiple form submission in Java

I have a form which has two tabs.On load it will fetch me values to that tab's input fields if available else the user must enter the details and save it.And on save I send it to a servlet and get processed.Below is the code for jsp
<link rel="stylesheet" type="text/css" href="../css/responsive-tabs.css " />
<header class="panel-heading vtab">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#reference-0">
Reference 1
</a>
</li>
<li class="">
<a data-toggle="tab" href="#reference-1">
Reference 2
</a>
</li>
</ul>
</header>
<div class="panel-body vcontent">
<div class="tab-content">
<%
String refname[] = new String[2];
String refmob[] = new String[2];
String refdesg[] = new String[2];
String refmail[] = new String[2];
//get ref data here
for (int i = 0; i < refData.length; i++) {
refname[i] = //get detail
refmob[i] = //get detail
refdesg[i] = //get detail
refmail[i] = //get detail
%>
<div id="reference-0" class="tab-pane">
<form action="profileref" name="form<%=i%>" method="post" class="clearfix">
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refname[i]%>" name="refname<%=i%>" class="form-control" placeholder="Reference Name" id="refname0"/>
</div>
<div class="col-md-6">
<input type="text" value="<%=refdesg[i]%>" name="refdesg<%=i%>" class="form-control" placeholder="Designation" id="refdesg0" />
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refmail[i]%>" name="refmail<%=i%>" class="form-control" placeholder="Email" id="refmail0" />
</div>
<div class="col-md-6">
<input type="text" value="<%=refmob[i]%>" name="refmob0<%=i%>" class="form-control" placeholder="Mobile No" id="refmob0" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info m-r-10" id="save">Save</button>
</div>
</form>
</div>
<!-- <div id="reference-1" class="tab-pane">
<form action="profileref" name="form1" method="post" class="clearfix">
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refname[1]%>" name="refname1" class="form-control" placeholder="Reference Name" id="refname1"/>
</div>
<div class="col-md-6">
<input type="text" value="<%=refdesg[1]%>" name="refdesg1" class="form-control" placeholder="Designation" id="refdesg1" />
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refmail[1]%>" name="refmail1" class="form-control" placeholder="Email" id="refmail1" />
</div>
<div class="col-md-6">
<input type="text" value="<%=refmob[1]%>" name="refmob1" class="form-control" placeholder="Mobile No" id="refmob1" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info m-r-10" id="save">Save</button>
</div>
</form>
</div> -->
<script>
$("#reference-0:first-child").addClass("active");
</script>
<!--
<div class="text-center">
<button type="button" class="btn btn-lg btn-info m-r-10">Save</button>
<button type="button" class="btn btn-info select-tab" value="1">Next</button>
</div> </form>-->
<%
}
%>
</div>
</div>
</form>
I tried using loop to get the data but i was only able to get tab 1 details ,tab 2 details are null. I also tried using 2 forms this also not working according to my wish.What am I doing wrong here.Below I have attached my servlet code(Only given the code inside the servlet)
String refname[] = new String[2];
String refdesg[] = new String[2];
String refmail[] = new String[2];
String refmob[] = new String[2];
refname[0] = request.getParameter("refname0");
refdesg[0] = request.getParameter("refdesg0");
refmail[0] = request.getParameter("refmail0");
refmob[0] = request.getParameter("refmob0");
out.print(refname[0]);
out.print(refmail[0]);
out.print(refdesg[0]);
refname[1] = request.getParameter("refname1");
refdesg[1] = request.getParameter("refdesg1");
refmail[1] = request.getParameter("refmail1");
refmob[1] = request.getParameter("refmob1");
out.print(refname[1]);
out.print(refmail[1]);
out.print(refdesg[1]);

getParamter() returns NULL

Why is request.getParameter("termin"); returning NULL
.The Connection and the Statement for my Databse are correct.It works fine in an more simple Version.
This is JSp/JAva Code:
int result = 0;
if(request.getParameter("submit") != null) {
String name = new String();
if(request.getParameter("termin") != null) {
name = request.getParameter("termin");
}else {
out.println("termin is null");
}
Termin t1 = new Termin();
result = t1.setTermin(name);
Here is the HTML Code :
<form action="index.jsp" method="POST" name="test">
<div class="modal fade" id="bModal" tabindex="-1" role="dialog" aria-labelledby="beispielModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Schließen</span></button>
<h4 class="modal-title" id="beispielModalLabel">Neuer Termin</h4>
</div>
<div class="modal-body">
<!-- <form role="form" action="index.jsp" method="POST"> -->
<div class="form-group">
<label for="empfaenger-name" class="control-label">Name</label>
<input type="text" class="form-control" id="empfaenger-name" name="termin" value="">
</div>
<div class="form-group">
<label for="nachricht-text" class="control-label">Zusätzlich:</label>
<textarea class="form-control" id="nachricht-text"></textarea>
</div>
<!-- </form> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="del" data-dismiss="modal" >Löschen</button>
<input type="submit" name="submit" class="btn btn-primary" id="eintrag" data-dismiss="modal" value="Speichern" >
</div>
</div>
</div>
</div>
</form>
I'm not a Bootstrap expert yet I can see a few potential causes to this issue:
data-dismiss="modal"- looking at:
http://getbootstrap.com/javascript/#modals-related-target it seems that data-dismiss="modal" is used only with "close" buttons - never with "submit"!
the class class="btn btn-primary" is supposed to be used with elements of type button and you're using it with input
using the id attribute might create a conflict with bootstrap autogenerated html-elements, but I'm just guessing here based on your comment above.

Categories