javascript - How do I prevent form submission in Angularjs if I am submitting the form using enter key? -


i have applied validation form (it has 2 fields) don't know how prevent submitting,current flow is: after pressing enter key student's name , marks added on localstorage , displayed on screen there unable prevent empty data submitting.

these js functions:

$scope.searchenter = function() {     if (event.which == 13 && $scope.student != "") {         $scope.addstudent();     } }; $scope.addstudent = function() {     if ($scope.marks > 65) {         var pass = true;     } else {         pass = false;     }     $scope.students.push({ 'studentname': $scope.student, 'marks': parseint($scope.marks), 'pass': pass });     $scope.student = '';     $scope.marks = '';     localstorage['studentslist'] = json.stringify($scope.students);  };

this html part:

 <div class="row">         <div class="col-xs-12">             <form class="form-horizontal" novalidate name="studentform" >                 <div class="form-group">                     <label class="col-sm-2 control-label" for="student_name">student's name</label>                     <div class="col-sm-5">                     <input ng-model="student" ng-keyup="searchenter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname">                         <div ng-show="studentform.stdname.$touched && studentform.stdname.$invalid">                             <small style="color:red; display:block;">enter valid name </small>                         </div>                     </div>                 </div>                  <div class="form-group">                     <label class="col-sm-2 control-label" for="student_marks">marks obtained</label>                     <div class="col-sm-5">                     <input ng-model="marks" ng-keyup="searchenter()" type="number" class="form-control" id="student_marks" ng-required="true">press enter insert student's data in table.</div>                 </div>             </form>         </div>     </div>

supposing fields correctly validating, prevent submit use ngdisabled directive, below:

<button type="submit" ng-disabled="form.$invalid">submit</button>

edit: since op provided full code able give correct answer, is:

change check to:

if (event.which == 13 && $scope.student && $scope.marks) {

snippet working based on code:

(function() {    angular      .module('app', [])      .controller('mainctrl', mainctrl);      mainctrl.$inject = ['$scope'];        function mainctrl($scope) {      $scope.students = [];        $scope.searchenter = function() {        if (event.which == 13 && $scope.student && $scope.marks) {          $scope.addstudent();        }      };        $scope.addstudent = function() {        console.log('addstudent called');        $scope.students.push({          'studentname': $scope.student,          'marks': $scope.marks,          'pass': $scope.marks > 65        });        $scope.student = '';        $scope.marks = '';        localstorage['studentslist'] = json.stringify($scope.students);      };    }  })();
<!doctype html>  <html ng-app="app">    <head>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">  </head>    <body ng-controller="mainctrl">    <div class="row">      <div class="col-xs-12">        <form class="form-horizontal" novalidate name="studentform">          <div class="form-group">            <label class="col-sm-2 control-label" for="student_name">student's name</label>            <div class="col-sm-5">              <input ng-model="student" ng-keyup="searchenter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname">              <div ng-show="studentform.stdname.$touched && studentform.stdname.$invalid">                <small style="color:red; display:block;">enter valid name </small>              </div>            </div>          </div>            <div class="form-group">            <label class="col-sm-2 control-label" for="student_marks">marks obtained</label>            <div class="col-sm-5">              <input ng-model="marks" ng-keyup="searchenter()" type="number" class="form-control" id="student_marks" ng-required="true">press enter insert student's data in table.</div>          </div>        </form>      </div>    </div>  </body>    </html>

tips:

  1. the ngmodel $scope.marks number, don't need to parse, can have 'marks': $scope.marks.

  2. the check of pass can reduced to: 'pass': $scope.marks > 65


Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more