How to give value of textbox to ngModel textbox using javascript

Question

This is my first html textbox with javascript code

<div>
<input type="text" onchange="getTheValue(this)" id="12345" />
</div>

and this is my second html tag

<input type="hidden" id="12345_hiddenField" ng-model="hiddenField"/>

And on onchange event i am calling this javascript function

function getTheValue(data) {
document.getElementById("12345_hiddenField").value = data.value;
}

i want first textbox value to be assigned to second textbox ngmodel value with pure javascript no angualrjs methods in that, becoz that onchange function is written in seperate pure javascript file,is their anyway to do this?

What if i told you you don't need an onChange method ? Is that ok for you ? — Andrew Donovan
– Andrew Donovan, Commented May 13, 2016 at 11:41
You can remove the ng-model tag from the second input field. — Venkat
– Venkat, Commented May 13, 2016 at 11:42
yes its ok, all i need is that eventually i want that first textbox value to be assigned to ngmodel value and even it should watch that. — Syed Rasheed
– Syed Rasheed, Commented May 13, 2016 at 11:43

Jesper Højer · Accepted Answer · 2016-05-13 11:48:11Z

1

I would do it like this.

 document.getElementById("12345").addEventListener('change',function() {
 document.getElementById("12345_hiddenField").value = document.getElementById("12345").value;

See fiddle https://jsfiddle.net/9fh8rxck/

answered May 13, 2016 at 11:48

Jesper Højer

3,2221 gold badge18 silver badges26 bronze badges

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

4 Comments

Syed Rasheed Over a year ago

is their anyway to add that value to ngmodel?

Jesper Højer Over a year ago

document.getElementById("12345").setAttribute("ng-model", "YourValue") But ofcourse i don't know if ng-model is visible when rendered to html. So I would suggest that you use a data-value in your html input like this. <input type="hidden" id="12345_hiddenField" ng-model="hiddenField" data-value="empty"/> and then you document.getElementById("12345_hiddenField").setAttribute("data-value", "YourValue")

Syed Rasheed Over a year ago

is their anyway to watch that 'data-value'?

Jesper Højer Over a year ago

Depends on what you mean by watch? You can always right-click on your site and select "Inspect Element" and then locate your hidden field in the html, here you can watch the data-value. Btw. you can call it whatever you want, just as long as you call i data- , so it could be data-tempvalue or data-myvalue etc. But if you want to get the value then you just say document.getElementById("12345_hiddenField").getAttribute("data-value");

Andrew Donovan · Accepted Answer · 2016-05-13 11:44:41Z

0

<input type="text" ng-model="textboxValue" id="12345" />

and your hidden:

<input type="hidden" id="12345_hiddenField" value="{{textboxValue}}"/>

Your input text is bound to the $scope property textboxValue

Your hidden input uses that variable as value {{textboxValue}}, everything is 2-way data-bound.

answered May 13, 2016 at 11:44

Andrew Donovan

5522 silver badges14 bronze badges

3 Comments

Syed Rasheed Over a year ago

but i should not have that first textbox in angualrjs format, instead second textbox has angularjs code, what i want is value inside of textbox changes i want to watch that and assign it to ngmodel

Andrew Donovan Over a year ago

The function you're calling, is it within a separate js file ? Is it within angularjs ?

Syed Rasheed Over a year ago

the function which i am calling is pure javascript file

Collectives™ on Stack Overflow

How to give value of textbox to ngModel textbox using javascript

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related