How do I make these two buttons look the same on my jsp page?

Arthur Wang
Arthur Wang used Ask the Experts™
on
I have a jsp page using struts tag as below:
<html:form action="/actions/graphics/job/attachFile/confirm">
<html:cancel value="Cancel" styleClass="buttons"></html:cancel>
<html:submit value="Confirm"/>
</html:form>

Open in new window

     
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		ActionForward actionForward = SessionChecking.checkUserBean(mapping, request);
		if (actionForward != null)
			return actionForward;

		if (isCancelled(request))
		{
                 //do something here
                }
               //......
     }//execute

Open in new window

it works very well in production for years, now I am trying to change the looking of the button by integrating with bootstrap.
When I only changed the looking of button confirm, it looks like this:
confirm_button_only.pngat this moment, both buttons are functioning.

however, when I tried to change the looking of both buttons, it looks like this:
confirm_cancel_both.png
             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="submit" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>
		</html:form>		

Open in new window

they both looks good, but the problem is both buttons are doing the same job, which means they both have the CONFIRM function , no more CANCEL function.

then I tried a little modification for experiment:
             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="button" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>
		</html:form>	

Open in new window

the problem for this code is the CANCEL button does NOT work at all regardless how many time I click on it.

can anybody help me on this? all I want is just make the CANCEL button looks as big as the CONFIRM button but keep the original functioning.
I think the real question would be : how to transfer the value of CANCEL button to the HttpServletRequest such that the function isCancelled(request) can return true?
by name="cancel" ?  value="Cancel" ? or type="cancel"?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Kyle SantosSoftware Test Analyst I at Dassault Systemes

Commented:
Hi,

I am following up on your question.  Do you still need help?

If you solved the problem on your own, would you please post the solution here in case others have the same problem?

Regards,

Kyle Santos
Customer Relations

Author

Commented:
not yet, nobody answered my question yet, I just leave the buttons in the ugly way on the page.
Distinguished Expert 2018

Commented:
You have to change the button class (class="btn btn-default"). You have to use the same class for both buttons if you want the same l&f.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
girionis, I think there is no significant difference in terms of the functionality I want. I only want them to be the same size and do the job, either class="btn btn-default" or class="btn btn-default" does NOT matter as long as they are at the same size and each button is functional.
Distinguished Expert 2018

Commented:
What does the cancel do? Does it take you to another screen? You could try this:

<button id="submit" name="submit" class="btn btn-primary" value="Confirm">Confirm</button>
<a href="you cancel page here" id="cancel" name="cancel" class="btn btn-primary" value="Cancel">Cancel</a>

Open in new window

Author

Commented:
When the cancel button clicked, it will delete the file uploaded to the temporary folder on the server, more like a garbage cleaning function.
When confirm button clicked, the file in the temporary folder will be copied to the permanent folder and insert a record into the database.

As an experiment, I just did another test:

 <input type="submit" class ="btn btn-info" name="cancel" value="Cancel"/>
 <input type ="submit" class ="btn btn-primary" name="confirm" value="Confirm"/> 

Open in new window

               
both Cancel button and Confirm button do the same job. I think it's something related to the action function:

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
	{
		ActionForward actionForward = SessionChecking.checkUserBean(mapping, request);
		if (actionForward != null)
			return actionForward;
		
		if (isCancelled(request))       <=====critical

Open in new window


not sure how the HttpServletRequest  request object capture the cancel value by function----isCancelled(request)
Seems like the only way by this request object to capture the cancel value is by this line below:

<html:cancel value="Cancel" styleClass="buttons"></html:cancel>

Open in new window


Maybe I should find another way to capture the "cancel" value when the jsp/html code for the button changed?
Distinguished Expert 2018
Commented:
both Cancel button and Confirm button do the same job. I think it's something related to the action function:

No, it's because you set the type to both buttons as "submit".

Can you not change the style of this

<html:cancel value="Cancel" styleClass="buttons"></html:cancel>

Open in new window


to also be "btn btn-primary"?

Author

Commented:
styleClass is the attribute of struts <html> tag,  "btn btn-primary" is bootstrap attribute. two different domains.

If you want to mix use of both like this below:

<html:cancel value="Cancel" styleClass="btn btn-primary"></html:cancel>

I assume it wouldn't work, but I would like to give it a try right now.

Author

Commented:
girionis, I just tried, the button looks beautiful and function well. This is very creative thought, thank you very much for your help,
Final result

Author

Commented:
Girionis, you had solved the problem in a genius way.
Distinguished Expert 2018

Commented:
I am glad I helped, than you for accepting my comment as answer :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial