Unable to get input field `value` assigned using javascript

Question

I am using Laravel with Angular JS for forms. I got a text box in the form as below

<input type="text" name="removedSiblings" ng-model="form.removedSiblings"
       id="div_removedSiblings" class="form-control">

Using Javascript I am assigning a value (a button click)

var elem = document.getElementById('div_removedSiblings');
elem.value = 'malai';

Got the below code inside the Controller PHP

$removedSiblings = \Input::get('removedSiblings');
logger($removedSiblings);

I always get null value for $removedSiblings variable whenever the field gets value using the javascript.

But, when I type a value manually inside the text box, then that value is printed inside the controller.

Whats wrong here?

georgeawg · Accepted Answer · 2020-03-18 18:42:21Z

2

The AngularJS framework does not watch the value property of <input> elements. It only updates the model after user input or an update from inside the framework.

Use the ng-click directive for the button:

<button ng-click="form.removedSiblings = 'malai'">
    Click me
</button>

For more information, see

AngularJS ng-click Directive API Reference

answered Mar 18, 2020 at 18:42

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Comments

Harish Dhami · Accepted Answer · 2020-03-18 17:33:13Z

0

It's is because of the usage of ng-model which uses two way binding.. Try to set the value on the controller scope variable which is form.removedSiblings.

hope this helps.

answered Mar 18, 2020 at 17:33

Harish Dhami

1,1061 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

Unable to get input field `value` assigned using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related