Develop Reference

Detecting return on input vs button click in reactive form

I'm building a reactive form in Angular with 3 submit buttons on it.
<form [formGroup]="sessionForm" (submit)="submitSession($event)">
<div class="row">
<label>
<span>Title</span>
<input type="text" formControlName="title" [class.required]="markRequired.indexOf('title') >= 0">
</label>
</div>
... more fields ...
<div *ngIf="!admin" class="row">
<button type="submit" (click)="setBtnClicked('submit')" class="btn btn-primary">Submit</button>
</div>
<div *ngIf="admin" class="row">
<button type="submit" (click)="setBtnClicked('save')" class="btn btn-primary">Save</button>
<button type="submit" (click)="setBtnClicked('approve')" class="btn btn-success">Save and approve</button>
<button type="submit" (click)="delete($event, false)" [hidden]="confirmDelete" class="btn btn-danger">Delete</button>
<button type="submit" (click)="delete($event, true)" [hidden]="!confirmDelete" class="btn btn-danger">Are you sure?</button>
</div>
<div [hidden]="!showSuccess" class="msgBox msgBox-success">Your session has been submitted! It will need to be approved before it is listed.</div>
</form>
On each button, I've attached a (click) handler which triggers a function to track which button is hit:
setBtnClicked(value) {
this.btnClicked = value;
}
However, when someone hits return on an input, I notice that the value of this.btnClicked is equal to the first button in the form.
I'm not sure how to track when a user hits return or when they hit the button, so I can respond differently, or if my structure is wrong. I'd like to trigger the submitSession function on any submit, be it return or button. I did try adding a formControl to the buttons, but that failed.

Because you're using a form, pressing enter on an input should run the submitSession() method tied to the form, but it's possible it's defaulting to the first submit button on the form. Maybe removing the submitSession() as well as the type="submit" from the buttons will prevent a form submission based on enter. That way the user would need to actually click a button to trigger something.
Also in the methods where you pass the event in, the following code would detect if it was triggered by an enter key press.
if (event.keyCode === 13) {
console.log('you just clicked enter');
}

Multiple submit buttons in angular2 form

I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".
I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.
<form #ticketForm="ngForm" novalidate>
<input type="text" id="customerName" required
name="customerName" [(ngModel)]="ticket.customerName"
#customerName="ngModel">
<div class="tj-form-input-errors"
*ngIf="customerName.errors && (customerName.dirty ||
customerName.touched || ticketForm.submitted)">
<small [hidden]="!customerName.errors.required">
Customer name is required
</small>
</div>
<button type="button" (click)="save(ticketForm)">Save</button>
<button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>

Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :
In your Html :
<form #form="ngForm" (submit)="firstSave(form,$event)">
...
<div class="form-group">
<input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
<input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
</div>
</form>
Then in your typescript :
firstSave(form: NgForm, $event: Event) {
var activeButton = document.activeElement.id; // document.activeElement?.id
if (activeButton == "submit-1") {
alert("you have clicked on submit 1");
}
if (activeButton == "submit-2") {
alert("you have clicked on submit 2");
}
}
StackBlitz Here.

You can subscribe to form changes, which I think will fire form validation.
I do something like this:
this.physicalForm.valueChanges
.map((value) => {
return value;
})
.filter((value) => this.physicalForm.valid)
.subscribe((value) => {
do what you need with the values here...
});
Then in your click handler for each button, if this.physicalForm.valid you save or save&update.

i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'
Solution
You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.
Sample code
//here formData is my payload for the API call eg: formData.name,formData.email
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>

How to reset form fields the elegant way with javascript or jquery?

How do I reset the form fields more elegant compared to the code below? The code is working. But if I have lots of form fields it does not look so nice. Is there a more compact way?
<script>
function setSearchCriteria(){
var searchcriteria = document.getElementById("TherapistSearch-SearchCriteria");
searchcriteria.value = "";
}
function setCity(){
var city = document.getElementById("TherapistSearch-City");
city.value = "";
}
function setLastName(){
var lastname = document.getElementById("TherapistSearch-LastName");
lastname.value = "";
}
function setFirstName(){
var firstname = document.getElementById("TherapistSearch-FirstName");
firstname.value = "";
}
}
</script>
<input type="button" class="btn btn-default" value="Reset form"
onclick="javascript:clearForms();javascript:setSearchCriteria();setCity();setLastName();setFirstName();" title="Reset form"/>

Give a css class to your input fields.
<input type="text" id="firstName" class="resettable" />
<input type="text" id="firstName" class="resettable" />
<select id="states" class="selectResettable">
<option value="0">Select an option </option>
<option value="1">Michigan</option>
<option value="2">Ohio</option>
<select>
<input type="button" id="resetBtn" />
And use this css class(es) as jQuery selector(s) to get all of this inputs and set the value to empty/default value. I also removed the onclick from button HTML markup as we are going to do it in the unobtrusive javascript way.
Add this javascript where we are registering the code for the click event on our button.
$(function(){
$("#resetBtn").click(function(e){
alert("Reset button clicked");
//Set the input text fields to empty string
$("input.resettable").val("");
//Reset the dropdowns.
$(".selectResettable").val("0")
//If you want to do something else, Do it here.
});
});

Simply use HTML the way it's meant to be used, and take advantage of the reset button:
<input type="reset" class="btn btn-default" value="Reset form" title="Reset form"/>
This requires no JavaScript, no additional functionality, and is a native component of HTML forms. Using type="button" gives the element the appearance of a button, but strips the default functionality; using type="reset" gives the appearance of a button and gives the default functionality of resetting the parent <form> element to its default page-load state.
References:
<input> element type attribute-values.

<input type="reset" id="resetBtn" class="resettable" />
use reset type of button or call reset method on form as below
<input type="button"
class="btn btn-default"
value="Reset form"
onclick="document.getElementById('myForm').reset();"
title="Reset form"/>

Angularjs button disable not working properly

I have the following in my page:
<input type="textbox" class="form-control" ng-model="reject_notes" id="rejectnotes" placeholder="Comments">
<button class="btn btn-warning" ng-disabled="!reject_notes" ng-click="rejectorder(reject_notes)">Reject</button>
and in my controller i have initialized:
$scope.reject_notes = "";
This worked a few days back but is not working anymore. When i enter some text in my textbox, i button is not enabling anymore. I also tried the following:
<button class="btn btn-warning" ng-disabled="reject_notes.length==0" ng-click="rejectorder(reject_notes)">Reject</button>
Any idea what might be happening?

You can do it by using ng-minlength also..it disabled button until minlength not proper
<input type="textbox" class="form-control" name ="reject_notes" ng-model="reject_notes" id="rejectnotes" placeholder="Comments" ng-minlength="1">
<button class="btn btn-warning" ng-disabled="ng-disabled='reject_notes.$error.minlength" ng-click="rejectorder(reject_notes)">Reject</button>

Initialize your $scope.reject_notes as undefined:
$scope.reject_notes = undefined;
then change your ng-disabled condition to "!reject_notes"
ng-disabled="!reject_notes"

Javascript onclick function stops HTML5 required from working

Good day,
I am working on a form where all my text fields have a required attribute; I noticed that when i clicked on submit required attribute does not show a pop up to validate if a field is empty.
I have two submit buttons on my page both using an onclick submitform function; One opens up a new tab and the other submits the form and goes to a new page.
For debugging purposes i remove the button that opens up a new tab and remove the onclick attribute on my second button and it work; I have been googling all day but i cannot seem to find the same scenario i have at the moment.
I believe it has to do with my JS but i am not sure what to add or remove on my code; Please see my code below.
JavaScript
function submitForm(action,newtab)
{
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
HTML
<form id="add2" action="add5.php" method="post">
<input placeholder="First Name" tabindex="1"
name="fname" maxlength="128" size="30" required>
<input placeholder="Last Name" tabindex="12"
name="lname" maxlength="128" size="30" required>
<button tabindex="3" value="Save"
name="save" onclick="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onclick="submitForm('add5.php',0);"
type="submit">Save Details</button>
</form>
I have a button attribute but i have set it to type="submit" and i am pretty much sure that works as i have already tested it when i removed the onclick functions; My question is can i required attribute worked without removing the onclick function of JavaScript?
Any help is much appreciated.

I found the answer to my question, The problem is that i was binding onClick method to the submit. The onClick will trigger first which results in it getting past the validator.
Solution is i change the onClick to onSubmit on my HTML code.
<button tabindex="3" value="Save"
name="save" onsubmit="submitForm('add3.php',1);"
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onsubmit="submitForm('add5.php',0);"
type="submit">Save Details</button>

You just need to use the "checkValidity()" method on the form before submitting in your onclick function like this:
if($("#add2").checkValidity()) {
document.getElementById('add2').submit();
}
See this fiddle: http://jsfiddle.net/36uv2e52/33/

Rather than using required you can simply check the values before you submit.
function submitForm(action,newtab) {
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
if (fname == "" || lname == "") {
alert("First and last name are required");
exit;
} else {
document.getElementById('add2').target = newtab ? '_blank' : '_self';
document.getElementById('add2').action = action;
document.getElementById('add2').submit();
}
}