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

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?

Related

Two "Submit" buttons on AngularJS Bootstrap Form triggered by 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 "Enter" 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 can't get it to move to the second button. Here is the code for my first button
<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?

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>

Submit Form with Enter Key [duplicate]

I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>

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.

Categories

Resources