two inline buttons aligned in struts

Question

two inline buttons aligned in struts

Although it may seem simple, I am struggling to figure out how to align two buttons next to each other with different functions. One button is for logging in the user and the other is for signing up a new user. They are currently in two separate forms. Is there any way to align the log in button next to the sign-up button without using JavaScript or any other method – ideally just using JSP?

Here is my code for the login JSP file. Can these buttons be aligned without additional scripts? I would like to achieve this alignment solely through JSP.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Login</title>
</head>
<body>

<s:form action="login">
    <s:textfield label="email" key="email" name="email" size="20" />
    <s:password label="password" key="password" size="20" />
    <s:submit value="LogIn"/>     
</s:form>

<s:form action="register.jsp">
    <s:submit value="SignUp" type="submit" float="right"/>     
</s:form>

EDIT

Updated code based on comments:

<s:form action="login" style="float:right"> 
  <s:textfield label="email" key="email" name="email" /> 
  <s:password label="password" key="password" /> 
  <s:submit value="LogIn"/> 
</s:form> 

<s:form action="register.jsp" style="float:right"> 
  <s:submit value="SignUp" type="submit"/> 
</s:form>

UPDATE: How can I make it look similar to this image provided by the user? ![enter image description here][2]

java html css jsp struts2

Answer 1

Answer №1

1) You don't need two separate forms, instead you can utilize s:submit and specify the action property within it.

2) If you want to display two buttons on the same line, you can make use of s:form's theme property

<s:form action="loginAction" theme="simple">
  <s:textfield label="email" key="email" name="email" size="20" /><br/>
  <s:password label="password" key="password" size="20" /><br/>
  <s:submit value="Register" name="registerBtn" />
  <s:submit value="LogIn" name="loginBtn"/>      
</s:form>

Update

loginAction

String registerBtn = request.getParameter("registerBtn");
String loginBtn = request.getParameter("loginBtn");

//if registerBtn is clicked then it's value Register is get stored in registerBtn.
//if not registerBtn is not clicked then variable registerBtn has null.
if(registerBtn != null)
{
  //return and call action for register.jsp
}
if(loginBtn != null)
{
  //do the login code here
}

To access the request object, you must implement the ServletRequestAware interface and override the setServletRequest method

public class LoginAction  implements ServletRequestAware
{
   HttpServletRequest request;
   public void setServletRequest(HttpServletRequest arg0) 
   {
      this.request = arg0;      
   }

   //rest of the above updated code here
}

Answer 2

1) You don't need two separate forms, instead you can utilize s:submit and specify the action property within it.

2) If you want to display two buttons on the same line, you can make use of s:form's theme property

<s:form action="loginAction" theme="simple">
  <s:textfield label="email" key="email" name="email" size="20" /><br/>
  <s:password label="password" key="password" size="20" /><br/>
  <s:submit value="Register" name="registerBtn" />
  <s:submit value="LogIn" name="loginBtn"/>      
</s:form>

Update

loginAction

String registerBtn = request.getParameter("registerBtn");
String loginBtn = request.getParameter("loginBtn");

//if registerBtn is clicked then it's value Register is get stored in registerBtn.
//if not registerBtn is not clicked then variable registerBtn has null.
if(registerBtn != null)
{
  //return and call action for register.jsp
}
if(loginBtn != null)
{
  //do the login code here
}

To access the request object, you must implement the ServletRequestAware interface and override the setServletRequest method

public class LoginAction  implements ServletRequestAware
{
   HttpServletRequest request;
   public void setServletRequest(HttpServletRequest arg0) 
   {
      this.request = arg0;      
   }

   //rest of the above updated code here
}

Answer 3

Answer №2

Change the positioning of the Signup button by removing float and applying it to the form field instead for it to function correctly.... check out a basic demo here

Furthermore, make sure to add the float properties to both form fields and not just one....

UPDATE

This tip will help you save your time

<form action="login" style="float:right;"> 
    <input type="textfield" label="email" key="email" name="email" /> <br />
  <input type="password" label="password" key="password" /> <br />
  <input type="submit" value="LogIn" style="float:right;"/> <br />
<form> 

<!--form method="post" ACTION="pagination.jsp"> 
<input type="submit" value="View"> 
</form--> 
<form action="register.jsp"> 
<input type="submit" value="SignUp" type="submit" style="float:right;margin-top:-20px;"/> 
<form>

see demo here

Answer 4

Change the positioning of the Signup button by removing float and applying it to the form field instead for it to function correctly.... check out a basic demo here

Furthermore, make sure to add the float properties to both form fields and not just one....

UPDATE

This tip will help you save your time

<form action="login" style="float:right;"> 
    <input type="textfield" label="email" key="email" name="email" /> <br />
  <input type="password" label="password" key="password" /> <br />
  <input type="submit" value="LogIn" style="float:right;"/> <br />
<form> 

<!--form method="post" ACTION="pagination.jsp"> 
<input type="submit" value="View"> 
</form--> 
<form action="register.jsp"> 
<input type="submit" value="SignUp" type="submit" style="float:right;margin-top:-20px;"/> 
<form>

see demo here

Answer 5

Answer №3

Although not the ideal solution, I managed to find a workaround for my problem that looks nice and functions adequately. I customized the buttons with CSS to enhance their appearance.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="java.util.*" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Login</title>
</head>
<body>
<s:form action="login">
    <s:textfield label="email" key="email" name="email" size="20" />
    <s:password label="password" key="password" size="20" />
    <s:submit value="LogIn" style="float:left;"/>     
</s:form>
<s:form action="register.jsp">
    <s:submit value="SignUp" type="submit" style="float:right;margin-top:-5px;"/>     
</s:form>
</body>
</html>

Answer 6

Although not the ideal solution, I managed to find a workaround for my problem that looks nice and functions adequately. I customized the buttons with CSS to enhance their appearance.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="java.util.*" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Login</title>
</head>
<body>
<s:form action="login">
    <s:textfield label="email" key="email" name="email" size="20" />
    <s:password label="password" key="password" size="20" />
    <s:submit value="LogIn" style="float:left;"/>     
</s:form>
<s:form action="register.jsp">
    <s:submit value="SignUp" type="submit" style="float:right;margin-top:-5px;"/>     
</s:form>
</body>
</html>

Answer 7

Answer №4

Discover how to resolve the issue by using a div tag for one element and a td and div combination enclosed in another td within a tr that is functioning correctly

<tr>
                <td class="pageHeader">
                <div class="formButton"><input type="submit" value="Login" name="loginActionForm.loginButton" class="btncolor"/>
</div>
                    <td>
<div class="formButton"><input type="reset" name="loginActionForm.clearButton" value="Clear" class="btncolor" onfocus="document.forms[0].user.focus()"/>
</div></td>
                    </td>

        </tr>

Answer 8

Discover how to resolve the issue by using a div tag for one element and a td and div combination enclosed in another td within a tr that is functioning correctly

<tr>
                <td class="pageHeader">
                <div class="formButton"><input type="submit" value="Login" name="loginActionForm.loginButton" class="btncolor"/>
</div>
                    <td>
<div class="formButton"><input type="reset" name="loginActionForm.clearButton" value="Clear" class="btncolor" onfocus="document.forms[0].user.focus()"/>
</div></td>
                    </td>

        </tr>

two inline buttons aligned in struts

Answer №1

Update

loginAction

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting problem related to handling several Volley requests simultaneously

Show the Array List in a left-to-right format

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to submit the value of a textbox that has been generated dynamically using jQuery?

Show and hide the div by clicking a button

Whenever isEmailVerified() returns false, even after the email has been verified

Learn how to center content and stretch a column using Vuetify frameworks

The functionality of HTML5 canvas image objects is not functioning as expected

Retrieving a value from an input field within a table cell using jQuery

Tips for creating stylish diagonal backgrounds using Bootstrap 5

Extract the text content from an HTML file while ignoring the tags to get the substring

Please retain only the clean <p> elements using Jsoup and remove all other content

The value of the HTML input control vanishes once padding is added

The collision between the Textfield Label and Value is being caused by Chrome's Autofill feature

Having Difficulty Applying a Background Color to a Class in Bulk

What are some ways to utilize the <span> tag to apply distinct styles to specific characters within text compared to

Disabling the submit button prevents the form from being submitted

An error occurred: TypeError - Unable to access the 'value' property of a null object during a value change

Using Java to print an already existing PDF document with correct scaling

creating unique styles for your Ionic app with Angular using JSON