function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
I am trying to give the user the option to verify that they want to submit the form. Currently the above code shows the popup confirm box, but the form will submit regardless if 'ok' or 'cancel' is clicked.
My understanding of 'confirm()' was that if 'cancel' was clicked the form submission would be stopped.
How does Confirm() work, and how is it best implemented?
You need to precede the next() with a return in your HTML:
function next() {
return confirm('Are you sure you want to Foo');
}
<form method="GET" action="/foo" onsubmit="return next()">
<input type="hidden" name="delete" value={{$foo} />
<button class="btn btn-warning" type="submit"> Foo</button>
</form>
To stop submission, the onsubmit handler needs to return false, which you missed. confirm() returns false when the modal is dismissed.
Related
I created a form name="form" and and included a submit button
<button type="submit" id="create" onclick=" go();" name="create">Create</button>
This is my function go()
function go() {
$("#create").prop("disabled", true);
document.forms["form"].submit();
}
The function did disable the button, however, it did not submit the form. Help.
I know you said you wrapped it in the form however you need to give the button the type Submit and the form the go() function like so:
<form name="form" onSubmit="go()">
<input type="submit" id="create" value="Create" />
</form>
I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.
You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>
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');
}
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>
I am using the following solution (How to best implement Save | Save and Close | Cancel form actions in ASP.NET MVC 3 RC) of multiple submit buttons to allow cancel and save from my MVC form:
<form action="Xxxx" method="post" onsubmit="return validatePost()">
...
<input type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
With javascript called onsubmit:
function validatePost() {
if(Blah blah){
return true;
}
}
I only want to do this javascript validation if 'Save' is clicked, but cannot tell which button was clicked from the javascript.
I tried getting the actionType value using document.forms[0].elements["actionType"].value but could not, as there is more than one item named actionType on the form.
Can anyone help?
Thanks
You can use id (http://jsfiddle.net/7p5N5/)
<form method="post">
<input id="save" type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
function validate() {
alert('Validate');
return false; // cancel click, true will submit
}
$("#save").click(function () {
return validate();
});
If you don't want to use id, you can use $('input[name="actionType"][value="Save"]') to select the Save button
Are you able to listen to the onclick event of only the 'Save' input and have it use your validatePost function.
Then you could have a different function for the onclick of 'Cancel' to do appropriate action.