I am working on a modal screen that allows users to create new publications and edit existing ones:
<div class="modal-content">
<form role="form">
<div class="modal-header ng-scope">
<h3 class="modal-title">{{ items.ui.header }}</h3>
</div>
<div class="modal-body ng-scope">
<div class="row">
<div class="col-xs-12">
<input type="hidden" name="publicationId" ng-model="items.publication.id" />
<label for="publicationTitle">{{ items.ui.label }}</label>
<input type="text" class="form-control" id="publicationTitle" name="publicationTitle" ng-model="items.publication.title" />
</div>
</div>
</div>
<div class="modal-footer ng-scope">
<button class="btn btn-primary" ng-click="new()" ng-show="items.ui.modalType=='new'" ng-enter="new();">{{ items.ui.action }}</button>
<button class="btn btn-info" ng-click="edit()" ng-show="items.ui.modalType=='edit'"ng-enter="edit();">{{ items.ui.action }}</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button class="btn btn-danger pull-left" ng-click="delete()" ng-show="items.ui.modalType=='edit'"><span class="glyphicon glyphicon-trash"></span></button>
</div>
</form>
</div>
Currently, only one of the two buttons new() and edit() is visible at a time. However, I have noticed that when the ENTER key is used to submit the form, it sometimes triggers the incorrect action. It seems to trigger the previous action in the modal, even if that button is not currently displayed.
Is there a more effective way to handle this functionality?