Develop Reference

Angular modal with two submit buttons to trigger on "enter"

I have a search modal that has two buttons I want to trigger on pressing enter. There is the initial "Search" button, and then a final "Submit" button.
The user is in an Angular Modal, puts a name into a search field (During this time, the Submit button is disabled) and then would press the "Enter" key to initiate the search. The search populates a table, after which the user clicks on a name to select and then the Submit button is enabled, and now I want a keypress of "Enter" to submit the selection.
I can get the first "Enter" to run the search functionality, but I can't get the second press of "Enter" to initiate the Submit of the selection.
Here is my code:
<button type="submit" class="btn btn-default" ng-click="getNames(params)" value="Search">Search</button>
<button class="btn btn-default" type="button" ng-click="Clear(params)">Clear</button>
And then once the list of names populates, the user selects one and then should be able to press "Enter" again to trigger the Submit button.
<div class="modal-footer">
<input class="btn btn-default" type="submit" ng-click="OK()" ng-disabled="disableOK()"/>
<button class="btn btn-default" type="button" ng-click="Cancel()">Cancel</button>
</div>
Using <button type="submit" class="btn btn-default "ng-click="OK()" g-disabled="disableOK()"></button> Doesn't work here either.
I've looked everywhere since this seems like it would be a common problem, but I haven't seen a fix for this, mostly it's people with multiple buttons wanting to do different things on submit, not triggering with the "Enter" key.
Can I assign it to be the default when it becomes enabled?

I'm having a hard time following what you are trying to do.. however, if I was trying to accomplish a form doing different things on a keypress I would do the following in my controller:
var keypressed = false;
$scope.keyPressedFunction = function() {
if (keypressed) {
// do second thing
} else {
// do first thing
keypressed = true
}
}
Does this answer your question at all?

clear sorting button of ngtable is calling form submit

i am using ng-table inside a form.
<form role="form" name="frmCommand" class="formValidCommand" novalidate="novalidate" ng-submit="frmCommand.$valid && vm.saveCommandChanges()">
i have a clear sorting button on the table.
<button ng-click="storeCommandsTableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
clicking this button is calling vm.saveCommandChanges() instead of clearing the sort.
any suggestions please?

Default type attribute value for button tag is submit, so when you click on it it will trigger its parent form's submit event which is captured by ng-submit directive. So try change it to button type so that submit event does not happen.
ie.
<button
type="button"
ng-click="storeCommandsTableParams.sorting({})"
class="btn btn-default pull-right">Clear sorting</button>

How can I do a form submit on ENTER when I have multiple possible submit buttons?

I have an unusual problem. My form loos like this:
<form>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
ng-show="ts.test.current && ts.test.userTestId">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
ng-show="ts.test.current && !ts.test.userTestId">
Acquire
</button>
</form>
What I need is for the enter key to trigger the action of the current button primary. Note that the button primary can be one of two buttons depending on the state of other items on the page.
Can anyone suggest how this could be done? I saw reference to the ng-enter directive but if possible I think it would be better for me not to use non-standard directives.
Here is what I have tried so far. Unfortunately when I click enter nothing happens:
<form ng-show="ts.test.current && ts.test.userTestId"
ng-submit="$state.transitionTo('s.e.q');">
<button ng-class="{'btn-primary': ts.test.current == true}"
type="submit">
View
</button>
</form>
<form ng-show="ts.test.current && !ts.test.userTestId"
ng-submit="getTest(ts.test)">
<button class="btn"
ng-class="{'btn-primary': ts.test.current == true}"
type="submit">
Acquire
</button>
</form>

From the docs
You can use one of the following two ways to specify what javascript
method should be called when a form is submitted:
ngSubmit directive on the form element ngClick directive on the first
button or input field of type submit (input[type=submit]) To prevent
double execution of the handler, use only one of the ngSubmit or
ngClick directives. This is because of the following form submission
rules in the HTML specification:
If a form has only one input field then hitting enter in this field
triggers form submit (ngSubmit) if a form has 2+ input fields and no
buttons or input[type=submit] then hitting enter doesn't trigger
submit if a form has one or more input fields and one or more buttons
or input[type=submit] then hitting enter in any of the input fields
will trigger the click handler on the first button or
input[type=submit] (ngClick) and a submit handler on the enclosing
form (ngSubmit)
So the trick becomes having only one button of type "submit" in your form at any given time, and choosing that button based on the state of your model. With multiple buttons, enter will trigger the ng-click on the the first button with type="submit" (and it will call ng-submit, although that's not needed here)
Unfortunatly, you can't modify the "type" of a button with a binding like this:
<button type="{{isPrimary ? 'submit' : 'button'}}">Acquire</button>
Also, ng-show doesn't remove the button from the DOM, so your current solution leaves you with multiple buttons of type="submit", in which case only the first one (hidden or not) will have it's click function executed.
If you only wanted to have one button visible at any given time, then changing ng-show to ng-if will do the trick (see this Plunk).
If you want both buttons visible, then the only solution I can come up with that doesn't involve creating a custom button directive is to duplicate your button blocks so that you use a different block based on your condition (see this Plunk).
<form>
<div ng-if="ts.test.userTestId">
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
type="submit">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
type="button">
Acquire
</button>
</div>
<div ng-if="!ts.test.userTestId">
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
type="button">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
type="submit">
Acquire
</button>
</div>
</form>

Change the button which should not submit the form to <button type="button">
button "clickable, but without any event handler until one is assigned"
See also: AngularJS: All buttons inside form triggers submit?

Do try ng-if instead of ng-show
CODE
<form>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="$state.transitionTo('s.e.q');"
ng-if="ts.test.current && ts.test.userTestId">
View
</button>
<button ng-class="{'btn-primary': ts.test.current == true}"
ng-click="getTest(ts.test)"
ng-if="ts.test.current && !ts.test.userTestId">
Acquire
</button>
</form>

You need to provide a submit method on the form itself and then just mark buttons as type="submit" if you want them to submit the form.
See Angular documentation on ngSumbit.
Reading your code it looks as though you only want one button visible at any given time. Based on that, I think what you really want is modify the label on the button depending on the condition of ts.test.userTestId.
Here's a jsfiddle demonstrating 1) the form submit handling, 2) the label change on your View/Acquire button, and 3) the fact that you can have an extra button if you really want it.
function ButtonController($scope) {
$scope.ts = {
test: {
userTestId: ''
}
}
$scope.getTest = function (value) {
alert('getTest called');
}
$scope.submit = function () {
if ($scope.ts.test.userTestId) {
alert("call $state.tranistionTo('s.e.q')");
} else {
$scope.getTest($scope.ts.test);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>The button</h2>
<div ng-controller="ButtonController">
<form ng-submit="submit()">
<input type="text"
ng-model="ts.test.userTestId">
<button type="submit">{{ ts.test.userTestId ? 'View' : 'Acquire' }}</button>
<br><br>
Here's an extra button which also submits the form. Notice that the submit routine
still only runs once and having this extra button doesn't cause any problems.
<br>
<button type="submit">Some other submit button</button>
</form>
</div>
</div>

Using Javascript to submit a form with multiple submit buttons as a user

I'm trying to figure out (on the client side) how to use javascript to submit a specific submit button for a form with multiple submit buttons.
Currently,
document.forms[0].submit()
does not seem to be working because it submits the first submit button instead of the second one, which is what I want to be submitted.
Is there a way to submit only the second submit button?
Here is an example of the buttons:
<input type="submit" class="submitButton_1" id="cancelButton" value="Cancel"
title="Cancel" name="cancel"/>
<input type="submit" class="submitButton_2 " id="Button" value="Test"
title="Test" name="TestButton"/>

document.getElementById('whatever-id-here').click();
will "click" on the button with ID whatever-id-here

How to prevent form submit from triggering `button:first.onclick()`?

Every time I submit a form by pressing enter, the click() function on the first <button> in the associated form is getting triggered. The problem (other than the fact that I just find this behavior odd) is that it is literally a click event, indistinguishable from actually clicking on the button. If it triggered the even on my submit button, I'd be fine with it.
The issue is that in this case the first button has nothing to do with the actual form, it's actually in a hidden popup.
So the exact question: Why is this happening? How do I prevent it? How do I distinguish this "fake click" event from a real one?
(this is a very simplified example; actual code is using jQuery (in case jQuery happens to acknowledge this and there is a fix for it), but the actual issue has nothing to do with jQuery)
<form>
<input>
<button onclick="alert('button A click');">Button A</button>
<button onclick="alert('button B click');">Button B</button>
<input type="submit" value="Submit Button">
</form>
http://jsfiddle.net/NexHC/2/
Please, no suggestions to "move the button"

-snip-
Edit
<form>
<input>
<button type="button" onclick="alert('button A click');">Button A</button>
<button type="button" onclick="alert('button A click');">Button B</button>
<input type="submit" onclick="alert('button Submit click');" value="Submit Button">
</form>
Actually I take it back... the reason is a lot more concrete and simple than that. Submit is the default type for <button> as specified by the w3c. Therefore, by leaving the button type attributes blank on your form, you were making three submit buttons and it was picking the first when you hit enter (love the <kbd> styling on this site :P). See here for w3c info and here for the updated fiddle

My advice would be, if the <button> has nothing to do with the form and is also controlling a hidden popup, then take it out of the context of the <form> and place it elsewhere. This would also solve your click issue.