Menu
I have an Angular 5 form application using all the usual models but on the forms I want the form to submit without having to physically click on the 'Submit' button.
I know it's normally as easy as adding type=submit to my button element but it does not seem to be working at all.
I don't really want to call an onclick function just to get it working. Can anyone suggest anything that I may be missing.
<form (submit)="search(ref, id, forename, surname, postcode)" action="#"> <mat-card> <mat-card-title class="firstCard">Investor/Adviser search</mat-card-title> <mat-card-content> <p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p> <p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p> <mat-form-field> <input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref> </mat-form-field> <mat-form-field> <input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id> </mat-form-field> <mat-form-field> <input matInput id="invForname" placeholder="Forename" #forename> </mat-form-field> <mat-form-field> <input matInput id="invSurname" placeholder="Surname" #surname> </mat-form-field> <mat-form-field> <input matInput id="invPostcode" placeholder="Postcode" #postcode> </mat-form-field> </mat-card-content> <mat-card-footer> <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button> </mat-card-footer> </mat-card> </form> 
307
To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. Explanation: We use the jQuery event. which to check the keycode on the keypress.
Check the event. And the following JavaScript code to detect whether the Enter key is pressed: const input = document. querySelector("input"); input. addEventListener("keyup", (event) => { if (event.
Use an <input type="submit"> instead of a link. Then the enter key will work automatically. Nice, but beware if you have some kind of javascript validation attached to the "onSubmit" of your form.
try use keyup.enter or keydown.enter
<button type="submit" (keyup.enter)="search(...)">Search</button> In case anyone is wondering what input value
<input (keydown.enter)="search($event.target.value)" /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
