angular bootstrap modal opening on the enter click

Question

In my controller i have methods

$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing

In the partial with a form

<form class="form-inline" role="form" ng-submit="deadForm()">
    <div class="form-group">
         <button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
    </div>
    <div class="form-group">
        <input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
    </div>
    <button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
    <button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>

keyPressed method is

$scope.keyPressed = function($event, eventType) {
        $event.stopImmediatePropagation();
        if(eventType=='search') {
            if($event.which==13) {
                $scope.searchJukeboxes();
           }
       } 
 };

I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.

deadForm() method is impleament and i am not getting any error in chrome console.

Don't down vote just to use that, do have a plausible explanation to whomever down voted this question. — jeevs, Aug 04 '15 at 15:27
Does this answer your question? [HTML button to NOT submit form](https://stackoverflow.com/questions/2825856/html-button-to-not-submit-form) — Michael Freidgeim, Jul 13 '23 at 22:17
Its not mine, most people dont give a reason for downvoting. — Rohit Gupta, Jul 14 '23 at 12:20

score 6 · Accepted Answer · edited Jul 13 '23 at 22:12

Add to your button for openJukeBoxesModalToGroup() type="button" to be:

<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>

The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.

When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...

<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
    <div class="form-group">
         <button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
    </div>
    <div class="form-group">
        <input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
    </div>
    <button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
    <button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>

angular bootstrap modal opening on the enter click

1 Answers1

Linked