Multiple submit buttons with different value - java

I need to capture the value of the submit button but pressing the button only sends me the value of the first generated button.
This is my code
modificarVivienda.jsp:
<table border="1">
<thead>
<tr>
<td>
Codigo vivienda
</td>
<td>
Direccion
</td>
<td>
Numero
</td>
<td>
Tipo vivienda
</td>
<td>
Condominio
</td>
<td>
Rut propietario
</td>
</tr>
</thead>
<tbody>
<c:forEach items="${lstviviendas}" var="v">
<tr>
<td>
${v.cod_vivienda}
</td>
<td>
${v.direccion}
</td>
<td>
${v.numero}
</td>
<td>
${v.tipo_vivienda}
</td>
<td>
${v.nombre_condominio}
</td>
<td>
${v.rut_propietario}
</td>
<input type="text" value="${v.cod_vivienda}" name="cod_vivienda" hidden="true">
<td>
<input type="submit" value="Modificar" id="btnModificar">
</td>
</tr>
</c:forEach>
</tbody>
</table>
Servlet:
#Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int cod_vivienda = Integer.parseInt(request.getParameter("cod_vivienda"));
DAOVivienda dv = new DAOVivienda();
HttpSession session = request.getSession();
ArrayList<Vivienda> vivienda = dv.buscarPorId(cod_vivienda);
session.setAttribute("viviendaAModificar", vivienda);
response.sendRedirect("vivienda/modificar.jsp");
}

"I need to capture the value of the submit button"
None of your submit buttons have a name, so no value is submitted for the button.
I think you meant to say that you want the value of the related <input> named cod_vivienda.
"pressing the button only sends me the value of the first generated button"
That is not correct. All the cod_vivienda values are submitted. You probably just called getParameter("cod_vivienda"), and javadoc says:
If you use this method with a multivalued parameter, the value returned is equal to the first value in the array returned by getParameterValues.
As you can see, to get all the values, you have to call getParameterValues("cod_vivienda").
To actually get a single parameter named cod_vivienda, with the value matching the button pressed, you should use the <button> element, which can associate a value with the button, separate from the displayed text.
Replace:
<input type="text" value="${v.cod_vivienda}" name="cod_vivienda" hidden="true">
<td>
<input type="submit" value="Modificar" id="btnModificar">
</td>
With:
<td>
<button type="submit" name="cod_vivienda" value="${v.cod_vivienda}">Modificar</button>
</td>
Now, only the name/value pair of the button pressed will be submitted to the server.

Related

How to return a single data from a row from a table in html?

I have a table that stores the product in the cart of a user. Each row has a button that enables the user to remove a single product from the cart of a user. Here is the code snippet of my html.
<form action="${pageContext.request.contextPath}/customer/removeProduct" method="post">
<input type="hidden" name="page" value="${page}">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<c:forEach items="${productsInCart}" var="product"
varStatus="status">
<input type="hidden" class="form-control" name="upc"
value="${product.getUpc()}">
<tr class="warning">
<td>${product.getName()}</td>
<td>${product.getQuantity()}</td>
<td style="color: green;">₱ ${product.getTotal()}</td>
<td><input type="submit" class="btn btn-warning btn-xs"
value="Remove from cart"></td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
Here is the output.
Product in cart table
The value I want to get is the UPC of a product which is stored in a hidden input type field. However, when the 'remove from cart' button is clicked, it returns all the UPC of the product that is in the cart. Here is the code snippet of the controller.
#RequestMapping(value="/customer/removeProduct", method=RequestMethod.POST)
public String removeProduct(#RequestParam(value = "upc") String upc, HttpServletRequest request){
System.out.println(upc);
// customerService.removeProductInCart(customer.getCustomer(request).getCartId(), upc);
return "customer_home";
}
You may want to create form on every iteration to get the specific upc on each row instead of wrapping your whole table.

Getting undefined in dynamically calling sibling in jquery

I am newbie to jquery. In my code I dynamically generate the radio button in jquery.when user clicked on the radio button I should get the siblings value.here is my jsp code.
<div id="result">
<c:forEach var="user" items="${model.userList}">
<table>
<thead>
<tr>
<td>Name</td>
<td>Is Approver</td>
</tr>
</thead>
<tbody>
<c:forEach var="disp" items="${user.value}">
<tr>
<td><c:out
value="${disp.getTblUserDetails().getUserName()}" /></td>
<td class="phase" style="display:none"><c:out value='${user.key.getId()}'/></td>
<td class="users" style="display:none"><c:out value='${disp.getTblUserDetails().getId()}'/></td>
<td><input type="radio" name="approver" class="some" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</c:forEach>
</div>
My Jquery code:
$("#result").on("click",".some",function() {
event.preventDefault();
var phaseid= $(this).siblings('.phase').val();
var userid=$(this).siblings('.users').val();
alert(userid+" "+phaseid);
});
I am getting undefined in alert box.what's wrong with my code.how to I get siblings.
Any help will be greatly appreciated!!!!
.some is the input element inside a td so the .phase and .users are not siblings of this, they are the siblings of the parent of this. So
$("#result").on("click", ".some", function (event) {
event.preventDefault();
var $td = $(this).parent();
var phaseid = $td.siblings('.phase').text();
var userid = $td.siblings('.users').text();
alert(userid + " " + phaseid);
});
Also td does not have value, you may have to use .text()

how do I dynamically print out a page that is loaded into text boxes?

I have a blur function that writes to the data base
$(".thoughts_box").blur(function(){
var box_id= $(this).attr("id").split("_")[$(this).attr("id").split("_").length-1];
writeListValue(1,box_id,$(this).val());
});
Here is my table
<td><input class="printArea_1 thoughts_box" name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" name="_1" /></td>
</tr>
here is how I am printing it out
function print_list() {
$('input[id=printLoad_1]').val($('input[class=printArea_1]').val());
$('input[id=printLoad_2]').val($('input[class=printArea_2]').val());
$('input[id=printLoad_3]').val($('input[class=printArea_3]').val());
$('input[id=printLoad_4]').val($('input[class=printArea_4]').val());
$('input[id=printLoad_5]').val($('input[class=printArea_5]').val());
for( var i=1; i<=5; i++ ) {
if( document.getElementById('printLoad_'+i).value === '' ) {
document.getElementById('num_'+i).style.display = 'none';
}
}
$(".printing_list").printElement(
{
overrideElementCSS:[
'/css/print_fixer.css',
{ href:'/css/print_fixer.css',media:'print'}],
//leaveOpen:true,
//printMode:'popup',
});
}
here is the page that prints out I need to find a way to dynamically print out what the user puts into the text fields. can anybody please help me.
<div class="printing_list" id="printList" >
<img id="print_logo" src="/images/print_header_med.png">
<div align="left" id="printHead_text"></div>
<br />
<div align="left" class="listPrint_info" style="width:700px;"></div>
<br /><br />
<table width="100%" style="line-height:0px; margin-left:20px;" >
<tr id="num_1">
<td><input id="printLoad_1" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_2">
<td><input id="printLoad_2" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_3">
<td><input id="printLoad_3" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_4">
<td><input id="printLoad_4" type="text" style="width:700px;" />
</td>
</tr>
<tr id="num_5">
<td><input id="printLoad_5" type="text" style="width:700px;" />
</td>
</table>
</div>
elclanrs has the right idea. The code you wrote isn't maintainable. Try something like this:
// My print_list function assumes that I have some textboxes that are class
// textboxClass
function print_list() {
Array.filter( document.getElementsByClassName('textboxClass'), function(elem){
$(".printing_list").printElement( elem );
});
}
If you assign class textboxClass to all of your text boxes, this will loop through each of them, and you can do whatever you want.

using <form> within <foreach> a few time

I'm pretty new to Spring and I'm trying to use Spring MVC + JSP + JSTL. My goal is to make JSP which containts list of Users and allow to edit each User separately from others. So I think I should use separate <form> tag and separate <sumbit> button for every User in the list and my JSP looks like:
<c:forEach items="${userList}" var="currentUser" varStatus="index">
<form:form method="post" action = "edit" commandName="userList[${index}]">
<tr>
<td><form:input path = "userList[${index}].login" value = "${currentUser.login}" /></td>
<td><form:input path = "userList[${index}].password" value = "${currentUser.password}" /></td>
<td><form:input path = "userList[${index}].smtpServer" value = "${currentUser.smtpServer}" /></td>
<td><form:input path = "userList[${index}].popServer" value = "${currentUser.popServer}" /></td>
<form:hidden path="userList[${index}].id" value=""/>
<td>
<spring:message code="label.delete" />
</td>
</tr>
<input type="submit" value = "edit">
</form:form>
</c:forEach>
the idea is to have an opportunity to edit each user separately by pressing the button "edit". Ofcourse this code doesn't work. It gives me an exception:
java.lang.IllegalStateException: Neither BindingResult nor plain
target object for bean name 'userList[javax' available as request
attribute
I'm really totally noob at Spring and at web-programming too. I'll appreciate any help.
Your use of ${index} isn't what you think. To get the index of the current item you must append ".index" to your varStatus variable... in your case it would be ${index.index}. For clarity, consider naming your varStatus something other than index...
<c:forEach items="${userList}" var="currentUser" varStatus="uStatus">
<form:form method="post" action = "edit" commandName="userList">
<tr>
<td><form:input path = "userList[${uStatus.index}].login" value = "${currentUser.login}" /></td>
<td><form:input path = "userList[${uStatus.index}].password" value = "${currentUser.password}" /></td>
<td><form:input path = "userList[${uStatus.index}].smtpServer" value = "${currentUser.smtpServer}" /></td>
<td><form:input path = "userList[${uStatus.index}].popServer" value = "${currentUser.popServer}" /></td>
<form:hidden path="userList[${uStatus.index}].id" value=""/>
<td>
<spring:message code="label.delete" />
</td>
</tr>
<input type="submit" value = "edit">
</form:form>
</c:forEach>
Keep in mind, this doesn't make sense using a different form for each user... but say you wanted to edit any/all of your users at once....
<form:form method="post" action = "edit" commandName="userList">
<c:forEach items="${userList}" var="currentUser" varStatus="uStatus">
<tr>
<td><form:input path = "userList[${uStatus.index}].login" value = "${currentUser.login}" /></td>
<td><form:input path = "userList[${uStatus.index}].password" value = "${currentUser.password}" /></td>
<td><form:input path = "userList[${uStatus.index}].smtpServer" value = "${currentUser.smtpServer}" /></td>
<td><form:input path = "userList[${uStatus.index}].popServer" value = "${currentUser.popServer}" /></td>
<form:hidden path="userList[${uStatus.index}].id" value=""/>
<td>
<spring:message code="label.delete" />
</td>
</tr>
</c:forEach>
<input type="submit" value = "edit">
</form:form>
I dont understant why you are using userList[${index}] since you have a different form for each user. Anyway your code isnt right at this line commandName="userList[${index}]"
Here is what I suggest :
<c:forEach items="${userList}" var="currentUser" varStatus="index">
<form:form method="post" action = "edit" commandName="user">
<tr>
<td><form:input path = "login" value = "${currentUser.login}" /></td>
<td><form:input path = "password" value = "${currentUser.password}" /></td>
<td><form:input path = "smtpServer" value = "${currentUser.smtpServer}" /></td>
<td><form:input path = "popServer" value = "${currentUser.popServer}" /></td>
<form:hidden path="id" value=""/>
<td>
<spring:message code="label.delete" />
</td>
</tr>
<input type="submit" value = "edit">
</form:form>
</c:forEach>
According that your user class is user.

Java Get ALL elements from a multiselect Box

I have a multi-select Box and I'm doing some javascript to sort the order of the elements in the box. I want to submit the whole array after sorting back to the Java and not just the select items. How can I achieve this?
JSP:
<script type="text/javascript">
$(document).ready(function(){
$("#mup")[0].attachEvent("onclick", moveUpItem);
$("#mdown")[0].attachEvent("onclick", moveDownItem);
});
function moveUpItem(){
$('#list option:selected').each(function(){
$(this).insertBefore($(this).prev());
});
}
function moveDownItem(){
$('#list option:selected').each(function(){
$(this).insertAfter($(this).next());
});
}
</script>
<table width="100%">
<tr>
<td width="50%" align="center">
<h1>DET Column Maintenance</h1>
</td>
</tr>
</table>
<form action="process.det_column_order" method="post" name="detColumnSortorder" >
<table class="data_table">
<tr align="center">
<td>
<select id="list" name="fieldNames" size="35" multiple="multiple" style="width: 250px;">
<c:forEach var="field" items="${detFields}">
<option value="${field.fieldName}">${field.displayName}</option>
</c:forEach>
</select>
</td>
<tr>
<td style="text-align: center;">
<button id="mup">Move Up</button>
<button id="mdown">Move Down</button>
</td>
</tr>
<tr>
<td style="text-align: center;">
<input name="action" type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
FORM:
private String[] fieldNames;
public String[] getFieldNames() { return this.fieldNames; }
public void setFieldNames(String[] val) { this.fieldNames = val; }
Since forms only submit the selected values, you'll need a little more JS and another form field.
Introduce a hidden form field that will hold the values you care about:
<input type="hidden" name="fieldNamesOrder" id="fieldNamesOrder"/>
And after every click of Move Up/Move Down:
var order = [], sel = document.getElementById("list");
for(var i = 0, len = sel.options.length; i < len; i++) {
order.push(sel.options(i).value);
}
document.getElementById("fieldNamesOrder").value = order.join(",");
Then, on the server side, you can read your ordered field names out of that posted field.
You either need to create a hidden text field in your HTML form that stores the values from each of your options... or you need to programatically select all of the options before the form is submitted.

Categories

Resources