How do I get the value of a text field using AngularJS?

Question

I want to get the value of a text field value using AngularJS when a form is submitted.

The code below always shows "undefined".

html:

<form ng-submit="AdvanceSearchSubmit($event)" name="AdvanceSearch" novalidate>
 <p ng-show="!AdvanceSearch.SearchKeyWord.$pristine && AdvanceSearch.SearchKeyWord.$invalid" class="text-danger">Text Cannot Be Empty!</p>
  <div ng-hide="AdvanceSearchModel" class="input-group">
    <input name="SearchKeyWord" ng-model="SearchKeyWord" id="SearchKeyWord" class="form-control" placeholder="Search in timeline...." type="text" required>
      <span class="input-group-btn" ng-click="isAdvanceSearch='false'; SearchPost(0,'true')">
       <button ng-disabled="AdvanceSearch.$invalid" type="submit" name="search" id="search-btn" class="btn btn-flat">
        <i class="fa fa-search"></i>
       </button>
      </span>
     </div>
</form>

one attempt:

$scope.AdvanceSearchSubmit = function(event)
{
    alert(event.target.value);
};

another attempt:

$scope.AdvanceSearchSubmit = function(event)
{
    alert(event.SearchKeyWord.value);
};

Sachila Ranawaka · Accepted Answer · 2017-07-01 06:59:25Z

0

instead of event pass the SearchKeyWord as a parameter

ng-submit="AdvanceSearchSubmit(SearchKeyWord)"

controller

$scope.AdvanceSearchSubmit = function(keyWord)
{
    alert(keyWord);
};

answered Jul 1, 2017 at 6:59

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2017-07-01 07:00:16Z

0

You don't need to pass the event at all to your AdvanceSearchSubmit on submit. You already have your values available inside $scope like ng-model for input field like ng-model="SearchKeyWord"

alert($scope.SearchKeyWord); //access value from `$scope` directly

answered Jul 1, 2017 at 7:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

nayan chowdhury Over a year ago

why event.SearchKeyWord.value is not working can you explain please????

Pankaj Parkar Over a year ago

@nayanchowdhury I'm not saying it isn't possible, you can retrieve form values by doing console.log($(event.target).serializeArray()) inside your function. But there is no need of doing that at all, AngularJS provides you awesome databinding feature that keeps track of your model and updates values whenever user change the values. Better you should pass your model to submit method and send that data to API..

Collectives™ on Stack Overflow

How do I get the value of a text field using AngularJS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related