Before using Struts2 I had the following code :
<form class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" placeholder="Identifiant" name="username" value="" required autofocus>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" placeholder="Mot de passe" class="form-control" name="password" required>
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-12 controls">
<button id="btn-login" class="btn btn-success" type="submit">Se connecter</button>
</div>
</div>
</form>
And I had the following
I tried to insert Struts tags, so I have this code now :
<s:form action="actionA" method="post" cssClass="form-horizontal">
<div style="margin-bottom: 25px;" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<s:textfield cssClass="form-control" name="identifiant" placeholder="Identifiant" required="true"/>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<s:password cssClass="form-control" name="motDePasse" placeholder="Mot de passe" required="true"/>
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-12 controls">
<s:submit key="submit" cssClass="btn btn-success" value="Se connecter"/>
</div>
</div>
</s:form>
The problem is that the display has changed
Do you know why the display is not the same?
The view is not the same because the document is not the same. Struts2 UI tags generate some HTML and javascript content behind the scene that you can see looking in the browser source window. If you want to keep changes as less as possible you can use simple theme on the form tag
<s:form action="actionA" method="post" cssClass="form-horizontal" theme="simple">
or configure it globally in struts.xml
<constant name="struts.ui.theme" value="simple"/>
You can read more about themes in Struts 2 Themes.
Related
My required attribute is not working when I am clicking on submit button in login component.
Here is my login form code -
<form onSubmit={this.onSubmit} noValidate>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-envelope"></i>
</span>
</div>
<input
type="email"
className="form-control"
name="email"
placeholder="Please enter your email"
value={this.state.email}
onChange={this.onChange}
required="required"
/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input
type="password"
className="form-control"
name="password"
placeholder="Please enter password"
value={this.state.password}
onChange={this.onChange}
required=""
/>
</div>
</div>
<br />
<button type="submit" className="btn btn-primary btn-block">
{loading ? <LoadingSpinner /> : "LOGIN"}
</button>
</form>
I also checked with removing novalidate attribute in form but still It's not working.
remove the noValidate from the form attribute in the first line and you are good to go
it worked for me with your code
The problem is that when i click on the button nothing happens at all which it should be at least to me.
I don't need a direct answer. Just a hint, or a pointer of what can be going on.
Here is part of the code for the modal form
<div class="modal-body">
<form Method="POST" id="Signin-Form" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_uname" id="txt" type="text" class="form-control input-lg" placeholder="Enter User Name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input name="txt_umail" id="email" type="text" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass" id="pass1" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass2" id="pass2" type="password" class="form-control input-lg" placeholder="Confirm Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg"><i class="glyphicon glyphicon-open-file">CREATE ACCOUNT!</i></button>
</form>
You need to add action attribute to the form to be able to send the form-data when the form is submitted.
Sample code below
<form action="submittedpage.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
After you click submit button, the form data is sent for processing to a PHP file named "submittedpage.php". The form data is sent with the HTTP POST method.
To display the submitted data you could simply echo all the variables. The "submittedpage.php" see the code below:
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
You can see this link for more info in form handling.
https://www.w3schools.com/php/php_forms.asp
Hope this helps.
I have created a register form inside a modal of index page , when user submit it, user gets directed to 2nd page which is confirmation through PHP.
If users gets an error it is necessary to go back to previous page and fill the whole form again, how can i save the values inputted by user recently and when he gets redirected to previous page he see the form but filled of his recent values
<div class="modal fade" id="registermodal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" 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"> x </span><span class="sr-only">Close</span></button>
<h3 class="modal-title text-center" id="lineModalLabel"> Register </h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form action="confirmation.php" method="POST" enctype="multipart/form-data">
<div id="cfirstname" class="form-group" style="float:left;width:45%;">
<label for="firstname"> First Name </label>
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off">
</div>
<div id="clastname" class="form-group" style="float:right;width:45%;">
<label for="lastname"> Last Name </label>
<input oninvalid="this.setCustomValidity('Please enter your last name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name" autocomplete="off">
</div>
<div id="cemail" class="form-group" style="clear:both;">
<label for="email"> Email </label>
<input oninvalid="this.setCustomValidity('Please enter your email name')" oninput="setCustomValidity('')" required type="email" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div id="ccategory" class="form-group" style="clear:both;">
<label for="category"> Category </label>
<input oninvalid="this.setCustomValidity('Category is Required')" oninput="setCustomValidity('')" required type="text" class="form-control" id="category" name="category" placeholder="Category" autocomplete="off"> <span class="help">Enter the category you are expert in </span>
</div>
<div class="form-group ">
<label for="Password"> Password </label>
<input oninvalid="this.setCustomValidity('Please enter a password)" oninput="setCustomValidity('')" required type="password" class="form-control" name="rpassword" id="password" placeholder="Password" autocomplete="off">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
</div>
<div class="form-group ">
<label for="Password">Confirm Password </label>
<input oninvalid="this.setCustomValidity('Please confirm your password')" oninput="setCustomValidity('')" required type="password" class="form-control" name="rcpassword" id="cpassword" placeholder="Repeat Password" autocomplete="off">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
<div id="cfblink" class="form-group">
<label for="fblink"> Facebook profile link </label>
<input type="text" class="form-control" id="fblink" name="fblink" placeholder="Facebook Link" autocomplete="off">
</div>
<div class="form-group">
<label for="ppic">Please upload an image of yourself</label>
<input class="btn btn-default" required="required" type="file" name="file" id="file">
<span id="cppic" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Image uploaded
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group" role="group">
<button type="submit" id="signup" name="signup" class="btn btn-default btn-hover-green" role="button"> Proceed </button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
well i found answer myself just put the variable as value input tag
<input oninvalid="this.setCustomValidity('Please enter your first name')" oninput="setCustomValidity('')" required type="text" class="form-control" id="firstname" name="firstname" placeholder="First name" autocomplete="off" <?php echo 'value="'.$variable_name.'"'; ?> >
At Click "Login", Nothing, Don't Procces The Form, Can Help me?
Code:
<form method="POST" action="" id="login">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="Username" name="Username" aria-describedby="basic-addon1" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-key" aria-hidden="true"></i></span>
<input type="password" class="form-control" placeholder="Password" name="Password" aria-describedby="basic-addon2" required>
</div>
<div class="text-center">
<input type="submit" form="login" class="btn btn-success btn-submit" value="Login">
</div>
</form>
what is Wrong? Can Help Me?
uPDATE Code: https://hastebin.com/wemerigodu.scala
When you are making the form, you have typed:
<form method="POST" action="" id="login>"
To make the form working type the file name that contains the code to login for example:
<form method="POST" action="login_verify.php" id="login">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="Username" name="Username" aria-describedby="basic-addon1" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-key" aria-hidden="true"></i></span>
<input type="password" class="form-control" placeholder="Password" name="Password" aria-describedby="basic-addon2" required>
</div>
<div class="text-center">
<input type="submit" form="login" class="btn btn-success btn-submit" value="Login">
</div>
</form>
A button located outside a form (but still a part of the form).
And you have a page in action attribute that receives the submitted field's value.
<form action="Your_Handle_Page" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
you haven't specify action on form submit you need to write redirect url in form action element as below.
<form method="POST" action="xyz.html" id="login">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="fa fa-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" placeholder="Username" name="Username" aria-describedby="basic-addon1" required>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">
<i class="fa fa-key" aria-hidden="true"></i></span>
<input type="password" class="form-control" placeholder="Password" name="Password" aria-describedby="basic-addon2" required>
</div>
<div class="text-center">
<input type="submit" form="login" class="btn btn-success btn-submit" value="Login">
</div>
</form>
i have two forms. One form for login and the other form for reset the password.
Now i want to set the both buttons (login, password reset) side by side.
But i don't know, how to do that.
And here is my code:
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
I hope you can help me.
Keep the button elements in same form and add form attribute to the other button to which you want to associate with other form element.
From MDN:
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a element in the same document. If this attribute is not specified, the element will be associated to an ancestor element, if one exists. This attribute enables you to associate elements to elements anywhere within a document, not just as descendants of elements.
Example:
<form id="firstForm">
<button>Submit First form</button>
<button form="secondForm">Submit Second form</button>
</form>
<form id="secondForm">
</form>
Give your second form an id (e.g. "form2"), and add this CSS:
#form2 {
position: relative;
bottom: 25px;
left: 55px;
}
i changed css of two buttons, now it works, here you can run, nd see it's working now.
i added style="float:left;" in <input type="submit" class="form-control btn-default" value="Login"/> and <input class="form-control btn-default" type="submit" value="Passwort vergessen"/>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left;" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" style="float:left;" />
</div>
</div>
</form>
<style>
#resetForm {
position: relative;
bottom: 37px;
left: 55px;
}
</style>
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row" id="resetForm">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
If you want to put the buttons side by side you can add the css property float: left; to the login button and it'll work, but it'll work only for this example.
<form action="login" method="POST">
<div class="row">
<div class="col-md-2">Username:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="text" name="username" id="username" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2">Passwort:</div>
<div class="col-md-4 input-group input-group-sm">
<span class="input-group-addon" id="important">
<span class="glyphicon glyphicon-play" />
<input class="form-control" type="password" name="password" id="password" aria-describedby="important" />
</span>
</div>
</div>
<div class="row">
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" style="float:left; />
</div>
</div>
</form>
<form action="reset" method="POST">
<div class="row">
<div class="col-md-2 input-group-sm">
<input class="form-control btn-default" type="submit" value="Passwort vergessen" />
</div>
</div>
</form>
Important note:
I don't think it's a good idea to use a form only for a button element, you should think of using it in the same form and apply the float: left; property to the buttons, it makes more sense and it's better for your DOM.
Better way to do
You should not use a second form to reset your first form.
You have to use only one form and add an input with type="reset"
By this way you can place your buttons side by side in only one line and reset works !
<div class="col-md-2 input-group-sm">
<input type="submit" class="form-control btn-default" value="Login" />
<input type="reset" value="Reset"/>
</div>
Live demo :
https://jsfiddle.net/20o2ahnr/