How to obtain the id of a clicked button

[Ricardo Estafan]

Hi guys,

i have a problem concerning a dispatch action. I pass the method name with the submit. However i also need an extra parameter. I am not sure how to pass on this value.

So i stopped using the html:submit tag and instead used :

<input type="submit" class="button" id="<%= productId %>" name="<%=ActionConstants.PARAM_METHOD%>" value="<bean:message key="cart.delete.orderline" />">

As you can see i experimented by setting the product id as the id of the button.

Now i would like to know how i can obtain the id of the clicked button in my action.

I know there are several javascript possibilities to set a certain value on click of the button. I would prefer not using javascript so can someone please help me out?!!

[Merrill Higginson]

The "id" attribute of an html tag is for javaScript use only. It does not get passed to the server when the page is submitted. If you want to pass the product ID to the server when the page is submitted, use a hidden field (<html:hidden> or <input type="hidden">).

[ February 22, 2006: Message edited by: Merrill Higginson ]
[ February 22, 2006: Message edited by: Merrill Higginson ]

[Ricardo Estafan]

Ok thanks.

However i've tried to do so, but somehow the wrong value gets passed :

 <logic:iterate id="orderline" name="<%=Constants.SHOPPING_CART%>" property="orderlines" indexId="ctr">
<bean :mrgreen: efine id="product" name="orderline" property="product" />
<bean :mrgreen: efine id="productId" name="product" property="id" />
<tr>
<td valign="center>
<p>
<input type="hidden" name="<%=ActionConstants.PARAM_DELETE_PRODUCT_ID%>" value="<%= productId %>" />
<html:submit property="<%=ActionConstants.PARAM_METHOD%>" onclic="this.form.deleteProductId.value='<%= productId %>'"  styleClass="button">
<bean:message key="cart.delete.orderline" />
    </html:submit>
</p>
</td>
 

It somehow passes the id of the previous product...

[Merrill Higginson]

If you're iterating through a collection, you're creating multiple hidden fields all with the same name and different values. When the form is submitted, Struts is going to place the first one in the Form bean.

One possible solution would be to make each product line a separate form following this pattern:

<logic:iterate>
<html:form ...>
<input type="hidden" ...>
<html:submit ... />
</html:form>
</logic:iterate>

This way, only the product ID enclosed in a single <html:form> tag set will be submitted when the submit button is pressed.

If you do this, you will undoubtedly have to chang other parts of the page, though. Since this appears to be a shopping cart, I asuume you have a "checkout" button. This button would now have to be in it's own <html:form> tag set.

[Ricardo Estafan]

Ok this worked fine.
However a new issue arises ... <<sigh>>

Within the first form tag (which contains the delete submit) I declare the following :

    
<%
Order order = (Order) session.getAttribute(AntenneConstants.SHOPPING_CART);
OrderLine line = (OrderLine) order.getOrderLine("" + productId);
%>
<input type="hidden" name="Id" value="<%= productId %>">
<input type="text" class="productAmount" name="amount" value="<%= line.getAmount()%>"> 

At the bottom of the page i indeed have a checkout in my case order button.
However i also have an update button. The action uses the above declared Id and amount values to update the amounts contained by the shoppingcart.

    
<html:form action="/shoppingCart">
<td colspan="5" align="right>
 
</td>
<td align="right">
<html:submit property="<%=ActionConstants.PARAM_METHOD%>" styleClass="button">
      <bean:message key="cart.update.cart" />
    </html:submit>
</td>
<td align="right">
<html:submit property="<%=ActionConstants.PARAM_METHOD%>" styleClass="button">
<bean:message key="cart.order" />
</html:submit>
</td>
</tr>
</html:form>     

When i try to obtain the values of Id and amount in my action both are null.
Probably because they are not contained within the same form tag as the submit.

Could anyone please help me out on this issue?

[Merrill Higginson]

Ricardo,

You now have a couple of options:

1- Keep the multiple forms design of the page, and for each product, have both a delete button and an "update this product" button for each product. This way when the update button is pressed, the action will have access to both the product ID and the amount. This is the only way I see it for you to avoid using JavaScript.

2- Bite the bullet and use some JavaScript. In my experience, it is nearly impossible to create a robust, friendly user interface without the use of at least some JavaScript. Here's a possible solution:

Redesign your ActionForm so that one of the properties is of type java.util.List, and contains a list of products. You should have a Product class with has an ID and an amount property.

Change your JSP back to using a single <html:form> tag pair for the entire document and use indexed properties for the product ID and amount. Read this link to understand how to use indexed properties. Your property attribute will look something like: property='<%="product["+index+"].id" %>'

Add a single hidden field to the form to contain the product ID of the product to be deleted if one of the delete buttons is pressed. Change your delete buttons from submit buttons to a regular buttons (<html:button>) and have the onclick event of those buttons place the current product Id (the product ID just preceding the delete button) into the deleted product ID field. Then have it submit the form. This way your Action class can tell which product should be deleted.
[ February 24, 2006: Message edited by: Merrill Higginson ]