Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change AngularJS input text value using javascript

I'm trying to run javascript in a browser extension to automate a process of filling in a form on a website and then clicking a button -- the extension code can be simulated by typing javascript:code into the address bar.

The website that I'm having problems with uses angularJS. I have the names of the input field ids and am using those to change the input field values. The fields fill up but when I click the button it says they are not filled, there are no values and they are all in error. Some validation is going on that does not "see" my changes unless I type in the values manually.

Is there a simple way to change the value of the AngularJS input fields that have validation using just the id of the input field.

Here is the code:

<input id="shippingAddr-first-name" type="text" class="first-name ng-pristine ng-valid" maxlength="16" data-ng-model="addressTypes[addressType].FirstName" focus-me="commonAddressTypeProps[addressType].focusOnFirstName" client-validation="onExit" data-required-on-exit="">

My attempts using document.getElementById("shippingAddr-first-name").value="Dave"; change the field but do not register correctly during the form submission. It does work however if I type it in manually. I've also tried click(), blur(), and focus(), to simulate some things I might be doing manually but those do not work either.

like image 245
techdog Avatar asked Jul 19 '15 06:07

techdog


People also ask

How to call function when input control value changed in AngularJS?

Following is the example of using ng-change event with input text control to call function when input control value changed in angularjs applications. If you observe above example we added ng-change event to input textbox control and it will raise event whenever we change the value of input text control in angularjs application.

What is ng-change in AngularJS?

AngularJS ng-change Event Directive In angularjs ng-change event is used to raise or call function whenever the value of input element changes. We can use this angularjs ng-change event with input elements like textboxes, checkboxes, dropdowns and textarea control elements.

How to change the text of an input field in JavaScript?

DOM is the short form of the Document Object Model, which is helpful to handle any HTML element using JavaScript. Here, we are going to use the .value property of the DOM element to change the value of the input field. It is the straight forward approach to change the text of an input field in javascript.

How to change input value on click event in JavaScript?

JavaScript Change Input Value On Click Event Here, we are going to use the.value property of the DOM element to change the value of the input field. It is the straight forward approach to change the text of an input field in javascript.


1 Answers

Trigger input event on element with ng-model attribute that is observable by AngularJS. Event input is the way from where Angular knows that some changes occurs and it must run $digest loop

Some source code:

// if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
  // input event on backspace, delete or cut
  if ($sniffer.hasEvent('input')) {
    element.on('input', listener);
  } else {
    var timeout;

    var deferListener = function(ev, input, origValue) {
      if (!timeout) {
        timeout = $browser.defer(function() {
          timeout = null;
          if (!input || input.value !== origValue) {
            listener(ev);
          }
        });
      }
    };

    element.on('keydown', function(event) {
      var key = event.keyCode;

      // ignore
      //    command            modifiers                   arrows
      if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;

      deferListener(event, this, this.value);
    });

    // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it
    if ($sniffer.hasEvent('paste')) {
      element.on('paste cut', deferListener);
    }
  }

Some working proof of concept:

angular.module('app', []).controller('app', function($scope) {
  $scope.user = {}
  $scope.handleSubmit = function(user) {
    alert('passed name ' + JSON.stringify(user))
  }
})

$(function() {
  $('#run').click(function() {
    fillElement($('[ng-model="user.name"]'), 'some user name')
    sendForm($('[ng-submit="handleSubmit(user)"]'));
  })

  function fillElement($el, text) {
    $el.val(text).trigger('input')
  }

  function sendForm($form) {
    $form.submit()
  }
})
<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>
  <button id="run">Execute `input` event outside AngularJS</button>
</div>
<div ng-app="app">
  <div ng-controller="app">
    <form ng-submit="handleSubmit(user)">
      <input type="text" ng-model="user.name" />
      <input type="submit" id="submit" value="Submit" />
    </form>
  </div>
</div>
like image 130
Krzysztof Safjanowski Avatar answered Nov 15 '22 16:11

Krzysztof Safjanowski