Getting the value inside a textbox ng-model using javascript .value

Question

I'm currently confuse in trying to obtain the value inside a text box using jquery .value

<input class="input referral-code" disabled="true" ng-model="account.referral_code_string" id="input-refcode">

I tried using document.getElementById('input-refcode').value to try to obtain the value but it comes out as empty on my console.

But if I tried binding it onto a on-click event, it manages to obtain the value stored inside the ng-model

$('.trigger').on('click', function(){
   console.log(document.getElementbyId('input-refcode'))
});

As you can see there is a value inside the text box itself. But when you tried inspecting it, this is what came out.

<input class="input referral-code" disabled="true" ng-model="account.referral_code_string" id="input-refcode">

If you look at there is no value inside the input textbox. I'm not sure if it has something to do with angular.js

When does your jQuery code execute? Does the element exist? Does it have text in it? — Phil
– Phil, Commented May 16, 2017 at 4:51
When does your jQuery code execute? After rendering the document Does the element exist? Yes Does it have text in it? Yes — clestcruz
– clestcruz, Commented May 16, 2017 at 4:57
You'll need to prove it. If the element exists, with that id and containing text, then document.getElementById('input-refcode').value should return that text — Phil
– Phil, Commented May 16, 2017 at 4:59

Satpal · Accepted Answer · 2017-05-16 04:50:55Z

1

You can get the scope object using element

var scope =  angular.element(document.getElementById('input-refcode')).scope();
var desiredValue = scope.account.referral_code_string;

answered May 16, 2017 at 4:50

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

D C · Accepted Answer · 2017-05-16 05:28:43Z

0

This might help you.

inject $timeout service in controller

$timeout(function(){
 console.log(document.getElementById('input-refcode')); },200);

Note: Use capital B in getElementById not getElementbyId.

answered May 16, 2017 at 5:28

D C

7461 gold badge7 silver badges18 bronze badges

Comments

sumit chauhan · Accepted Answer · 2017-05-16 05:44:51Z

0

var app = angular.module('todoApp', []);
app.controller('TodoListController', function($scope){

        $scope.$watch('referral_code_string'), function(){ console.log($scope.referral_code_string)};
    
     console.log(document.getElementById('input-refcode').value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="todoApp" ng-controller="TodoListController as todoList">
<input class="input referral-code" disabled="true"  ng-model="referral_code_string"  ng-init="referral_code_string = 'abc'" id="input-refcode" value="abc">
</div>

answered May 16, 2017 at 5:44

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Getting the value inside a textbox ng-model using javascript .value

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related