Is it possible to submit a form that have a submit button (by pressing enter)
I have two text fields by clicking the login button I am able to process the outcome but I am unable to do it by hitting enter.
Here is the HTML code(updated with full code)
this is signin.component.html
<div class="modal-content" style="padding: 10px;" id="login" *ngIf="show">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
</div>
</form>
<div class = "error"> {{ errMsg }} </div>
<button class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<hr>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password? Reset
</p>
<p class="forgotPwd">
New User? Register now
</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="showSignUp">
<app-sign-up></app-sign-up>
</div>
<div *ngIf="showForgotPassword">
<app-forgot-password></app-forgot-password>
</div>
this signin.component.ts file
import { Component, OnInit } from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import { Router } from '#angular/router';
import { AuthService } from '../services/auth/auth.service';
#Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
username:string;
password:string;
show = true;
showSignUp = false;
showForgotPassword = false;
errMsg = "";
constructor(
private authService: AuthService,
public activeModal: NgbActiveModal,
) { }
ngOnInit() {
this.authService.getEmitter().subscribe(res => {
if(res){
this.activeModal.dismiss('success');
}
else{
this.username = "";
this.password = "";
this.errMsg = "Invalid Username/Password";
}
})
}
signInGoogle(){
this.authService.loginWithGoogle();
}
signInFacebook(){
this.authService.loginWithFacebook();
}
signInLinkedin(){
this.authService.loginWithLinkedin();
}
logOut(){
this.authService.logOut();
}
login(){
this.authService.login(this.username,this.password);
}
reset(){
this.show = false;
this.showSignUp = false;
this.showForgotPassword = true;
}
signup(){
this.show = false;
this.showSignUp = true;
this.showForgotPassword = false;
}
}
Use (keyup.enter)="focusableSubmit.click()" to input Password and call #focusableSubmit to Button login, this would perform the task and same for button as shown in code below.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required (keyup.enter)="focusableSubmit.click()">
</div>
</form>
<div class = "error"> {{ errMsg }} </div>
<button #focusableSubmit class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<hr>
</div>
</div>
Your button should be inside the form but you have closed it inside the two input fields.
Update your code like this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
</div>
<div class = "error"> {{ errMsg }} </div>
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
</form>
<hr>
</div>
</div>
Yes you can.
Usually, you need to put your code in action="". But this isn't old HTML, this is Angular, and it works with Javascript.
So, in order to do that, you need to add the novalidate tag, and tell the form what to do when you validate it.
You also need to declare a submit input instead of your button.
This would look like
<form class="loginForm" novalidate (ngSubmit)="login()" autocomplete="off">
<input type="submit" value="Login" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()"/>
Yes it is possible and quite easy!
First you have to replace
(button)="button()"
with
(ngSubmit)="login()"
and remove the click handler from the button and change the type to submit.
Both lines changed look like this:
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" (ngSubmit)="login()" method="POST">
and:
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid">Login</button
Dont forget that this way, that button() does not get called.
Angular documentation is really helpful on most of the generel topics, maybe you should take a look there.
Additionally you should consider reading up on some basic information about forms. I personally suggest: forms on MDN and buttons on MDN.
Here's a strapped version of my form for sending comments.
As you see, I prevented the ENTER event on textarea and that will cause pressing ENTER while focused on textarea to not make a new line (but you can use SHIFT + ENTER).
Pressing enter sends a form.
<form #addCommentForm="ngForm" (keydown.enter)="addComment(addCommentForm.value)">
<textarea (keydown.enter)="$event.preventDefault()" type="text" placeholder="Leave a comment..." name="description" #description="ngModel" [(ngModel)]="comment.description"></textarea>
</form>
Give a try to
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
Related
When i load login.jsp it doesn't alert if i dont input password or username
tried checking wether i correctly attached the file but it still doesnt work for me, what could be the reason?jsp just reacts the way it would react if i wouldn't use js at all
LoginPage.js
function check()
{
var username = document.form.username.value;
var password = document.form.password.value;
if (username==null || username=="")
{
alert("Username can't be blank");
return false;
}
else if(password==null||password=="")
{
alert("Password must be inserted ");
return false;
}
}
my jsp:
<body>
<div class="card-body">
<form method="get" action="LoginServlet" onsubmit="return check()">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input id="username" type="text" class="form-control" placeholder="username" name="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input id="password" type="password" class="form-control" placeholder="password" name="password">
</div>
<div class="form-group">
<input id="login-button" type="submit" value="Login" class="btn float-right login_btn" >
</div>
</form>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center links">
Don't have an account?Sign Up
</div>
</div>
</div>
</div>
</div>
<script src="LoginPage.js"></script>
</body>
</html>
any suggestions ?
firstly check the HTML syntax of your jsp, it seems that the html is broken because of the last three </div> because of the missing opening tags.
Then, you don't have by default a document.form property so you could get your username and password in the following way:
// or you can use document.getElementById('username')
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
here details about the querySelector function
I want to create login form, and then the result is going to another page, using js to catch the value and create the process.
I have success created it using onclick, but I want to change onclick to onsubmit as I don't want to click the button, just press 'Enter' keyboard, the process is working. I have tried change from onclick to onsubmit process, but I still not get the value on the js page.
Here's the login form
<form >
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
</div>
</form>
<script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>
Here's the js page
function login()
{
var phone_number = $('#phone_number').val();
var password = $('#password').val();
console.log(phone_number)
}
I have changed the onclick to onsubmit, but I can't get the value on the js page again.
here's my change
<form id="myform" onsubmit="login()">
......
<div class="form-group">
<input type="submit" value="Submit" class="btn float-justify login_btn">
</div>
Do you know where's the error on my code ?
Thank you
As I see it , everything is good , where should be looking now on 2 things
first its jquery you are using but i can not see its link
second check your base url , it is properly being generated or not
Below you can see its working on onclick
same way you can do with on submit but you have to pass event in function so that you can stop its default action . you can do that using event.preventDefault();
function login(e)
{
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();
alert(phone_number)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-justify login_btn" >
</div>
</form>
I have a two pages sign-in and sign-up in my navbar(header) angular2 project. In my sign-up page I have a link which should have to redirect to sign-in page when we clicked it. I am unable to process it.Can anyone guide me how to do it. thanks in advance
Here are the both codes i have tried with router aswell.
sign-in.component.html
<div class="modal-content" style="padding: 10px;" id="login">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="text" class="form-control" name="username" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="btn btn-lg btn-info btn-block btnlog" type="submit">Login</button>
<hr>
</form>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password?
</p>
</div>
</div>
</div>
</div>
</div>
sign-up.component.html
<div class="modal-content" style="padding: 20px;">
<div class="modal-body text-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-primary">
<div class="panel-body">
<form method="POST" action="#" role="form">
<div class="form-group">
<h2>Create account</h2>
<hr>
</div>
<div class="form-group">
<label class="control-label" for="signupName">Your name</label>
<input id="signupName" type="text" maxlength="50" class="form-control" placeholder="Your name">
</div>
<div class="form-group">
<label class="control-label" for="signupEmail">Email</label>
<input id="signupEmail" type="email" maxlength="50" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signupPassword">Password</label>
<input id="signupPassword" type="password" minlength="6" maxlength="25" class="form-control" length="40" placeholder="Password">
</div>
<div class="form-group">
<label class="control-label" for="signupPasswordagain">Confirm Password</label>
<input id="signupPasswordagain" type="password" minlength="6" maxlength="25" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create your account</button>
</div>
<hr>
<p>Already have an account? Sign in</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
PS:- I should only do this in angular r javascriprt r bootstrap way thanks in advance
Edit :- Is there anyone can do this?
I solved my issue by adding in my signup component
<div *ngIf="hide"> //at the top
<div class="modal-content" id="register" style="padding: 20px;">
<div *ngIf="show"> //at the bottom
<app-sign-in></app-sign-in>
</div>
adding a click function to the button
<p>Already have an account? <button type="button" (click)="signin()">Sign In</button></p>
in the ts file making show = true and hide= false when required like below
export class SignUpComponent implements OnInit {
show = false;
hide = true;
signin(){
this.hide=false;
this.show=true;
}
}
I have a form that looks like this:
<div class="col-xs-12 col-lg-4">
<form name="deliveryForm" ng-class="{ 'has-error': deliveryForm.$invalid && !deliveryForm.contact.$pristine }">
<div class="form-group">
<div class="btn-group">
<label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="true" ng-change="controller.setDeliveryDetails()">For delivery</label>
<label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="false" ng-change="controller.findCollectionPoints()">For collection</label>
</div>
</div>
<div class="form-group" ng-if="!controller.order.lines[0].forDelivery">
<label class="control-label">Contact</label>
<input class="form-control" type="text" name="contact" ng-model="controller.model.contact" ng-change="controller.setDeliveryDetails()" autocomplete="off" required />
<input type="hidden" name="collectionPoint" ng-model="controller.model.collectionPoint" ng-change="controller.setDeliveryDetails()" required />
</div>
<div class="form-group">
<label class="control-label">Instructions</label>
<input class="form-control" type="text" name="instructions" ng-model="controller.model.instructions" ng-change="controller.setDeliveryDetails()" autocomplete="off" />
</div>
<div class="form-group">
<button class="btn btn-default" type="button" ui-sref="saveOrder.lines">Back</button>
<a class="btn btn-primary pull-right" ng-if="deliveryForm.$valid" ui-sref="saveOrder.confirm">Continue</a>
</div>
</form>
</div>
As you can see, if my first line is not for delivery, then I show the contact input and the hidden collectionPoint input.
A bit further down I have a link that changes the collectionPoint:
What I was hoping would happen is that the hidden input would detect the change and fire the controller.setDeliveryDetails() method, but it doesn't seem to work.
Is there a way I can do this?
ng-change is triggered when changes are made on an input not on the model.
What you can do is either run controller.setDeliveryDetails() on ng-click :
Or set up a watch in your controller on controller.model.collectionPoint
$scope.$watch(angular.bind(this, function () {
return this.model.collectionPoint;
}), function (newVal) {
controller.setDeliveryDetails();
});
I Have a requirement where i have 3 input fields namely
1.old password
2.new password
3.confirm password.
For which i need to apply rules as follows.
1.Old and new passwords should not match.
2.No field should be empty.
3.New password and confirm password inputs should be same.
If all these validations passes then only form should be submitted.
Here is the Html file for which i need to apply js
<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>
thank you
Please replace with your ids..
function checkForm()
{
var oldP=document.getElementById("oldP").value;
var newP=document.getElementById("newP").value;
var confirmP =document.getElementById("confirmP").value;
if(oldP!=""&&newP!=""&&confirmP!="")
{
if(oldP!=newP)
{
if(newP==confirmP)
{
return true;
}
else
{
alert("Confirm password is not same as you new password.");
return false;
}
}
else
{
alert(" This Is Your Old Password,Please Provide A New Password");
return false;
}
}
else
{
alert("All Fields Are Required");
return false;
}
}
An in thml you need to add
<form onsubmit="return checkForm();" ----- >
For reset you can create a function somting like this
function resetForm()
{
var oldP=document.getElementById("oldP").value="";
var newP=document.getElementById("newP").value="";
var confirmP =document.getElementById("confirmP").value="";
}
and call when you want form reset.
firstly you should catch the click avtion on submit button and check the fields
$([name=Submit]).on('click', function(e) {
if (($('#oldPassword').val() == "")||($('#newPassword').val() == "")||($('#confirmPassword').val() == "")) {//check 2
e.preventDefault();
}
if ($('#oldPassword').val() == $('#newPassword').val()) {//check 1
e.preventDefault();
}
if ($('#newPassword').val() != $('#confirmPassword').val()) {//check 3
e.preventDefault();
}
}
P.S. i wrote code in this style because i want to show all steps. shurely you can combine 'if's in one to clear your code. as example u can combine check 1 and check 3 and put it in else block of check 2
create a function and call on onClick of button
<button type="button" name="Submit" value="Save" class="btn btn-danger" onclick="Function();"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" "></i> Save</button>
Your javascript Function will be Like this
<script>
function Function() {
var oldpasswprd = document.getElementById('oldPassword').value;
var newpassword = document.getElementById('newPassword').value;
var confirmpassword = document.getElementById('confirmPassword').value;
if (oldPassword == "" || newpassword == "" || confirmpassword == "") {
alert('Please fill all the details');
}
else if (oldpasswprd == newpassword) {
alert("Old password and New Password cannot be same");
}
else if (newpassword != confirmpassword) {
alert("password mismatch");
}
}
</script>
<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>