Hacking AngularJS Form Elements to Change Values

I'm new to Angular JS and can't find a solution to this problem. I have to use an online web form (which I don't control) that is written in Angular 1.4 and I want to inject some JavaScript to change the values in the fields. However, when I try to change the values using JavaScript, they appear correct on the screen, but the old values are the ones that save. I can't find any hidden fields I need to modify.

So, for example, on the form there's a date field with an ID of "end_date." See the code for it below. When I go into the console and type

document.getElementById("end_date").value = "2018-11-20 00:00:00"

the value on the screen is what I entered but it doesn't save. Any idea what I need to do?

<input type="text" ng-model="rawValue" id="end_date" name="end_date" 

       class="form-control ng-pristine ng-valid ng-isolate-scope ng-valid-date ng-valid-required ng-touched"

       uib-datepicker-popup="yyyy-MM-dd HH:mm:ss" is-open="isOpen"

       ng-required="v.required" close-text="Close" clear-text="Clear"

       current-text="Current" pom-field-change-name="propertyChange">

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

asked Nov 20 '18 at 20:25

user1850261

142

Try triggering an event on the DOM element, maybe the "change" event

– Frank Modica
Nov 20 '18 at 20:27

Sure there is dupes, but you need to manually trigger the change events.

– epascarello
Nov 20 '18 at 20:31

add a comment |

So, for example, on the form there's a date field with an ID of "end_date." See the code for it below. When I go into the console and type

document.getElementById("end_date").value = "2018-11-20 00:00:00"

the value on the screen is what I entered but it doesn't save. Any idea what I need to do?

<input type="text" ng-model="rawValue" id="end_date" name="end_date" 

       class="form-control ng-pristine ng-valid ng-isolate-scope ng-valid-date ng-valid-required ng-touched"

       uib-datepicker-popup="yyyy-MM-dd HH:mm:ss" is-open="isOpen"

       ng-required="v.required" close-text="Close" clear-text="Clear"

       current-text="Current" pom-field-change-name="propertyChange">

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

asked Nov 20 '18 at 20:25

user1850261

142

Try triggering an event on the DOM element, maybe the "change" event

– Frank Modica
Nov 20 '18 at 20:27

Sure there is dupes, but you need to manually trigger the change events.

– epascarello
Nov 20 '18 at 20:31

add a comment |

So, for example, on the form there's a date field with an ID of "end_date." See the code for it below. When I go into the console and type

document.getElementById("end_date").value = "2018-11-20 00:00:00"

the value on the screen is what I entered but it doesn't save. Any idea what I need to do?

<input type="text" ng-model="rawValue" id="end_date" name="end_date" 

       class="form-control ng-pristine ng-valid ng-isolate-scope ng-valid-date ng-valid-required ng-touched"

       uib-datepicker-popup="yyyy-MM-dd HH:mm:ss" is-open="isOpen"

       ng-required="v.required" close-text="Close" clear-text="Clear"

       current-text="Current" pom-field-change-name="propertyChange">

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

asked Nov 20 '18 at 20:25

user1850261

142

So, for example, on the form there's a date field with an ID of "end_date." See the code for it below. When I go into the console and type

document.getElementById("end_date").value = "2018-11-20 00:00:00"

the value on the screen is what I entered but it doesn't save. Any idea what I need to do?

<input type="text" ng-model="rawValue" id="end_date" name="end_date" 

       class="form-control ng-pristine ng-valid ng-isolate-scope ng-valid-date ng-valid-required ng-touched"

       uib-datepicker-popup="yyyy-MM-dd HH:mm:ss" is-open="isOpen"

       ng-required="v.required" close-text="Close" clear-text="Clear"

       current-text="Current" pom-field-change-name="propertyChange">

javascript angularjs

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

asked Nov 20 '18 at 20:25

user1850261

142

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

asked Nov 20 '18 at 20:25

user1850261

142

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

edited Nov 20 '18 at 21:39

georgeawg

33.1k104968

asked Nov 20 '18 at 20:25

user1850261

142

asked Nov 20 '18 at 20:25

user1850261

142

asked Nov 20 '18 at 20:25

user1850261

142

Try triggering an event on the DOM element, maybe the "change" event

– Frank Modica
Nov 20 '18 at 20:27

Sure there is dupes, but you need to manually trigger the change events.

– epascarello
Nov 20 '18 at 20:31

add a comment |

Try triggering an event on the DOM element, maybe the "change" event

– Frank Modica
Nov 20 '18 at 20:27

Sure there is dupes, but you need to manually trigger the change events.

– epascarello
Nov 20 '18 at 20:31

Try triggering an event on the DOM element, maybe the "change" event

– Frank Modica
Nov 20 '18 at 20:27

Sure there is dupes, but you need to manually trigger the change events.

– epascarello
Nov 20 '18 at 20:31

add a comment |

1 Answer
1

active

oldest

votes

First, make your change to the input, then do:

var input = document.getElementById("end_date")

angular.element(input).triggerHandler('change');

That should trigger AngularJS to detect the change.

answered Nov 20 '18 at 20:42

JM-AGMS

608620

Thanks. That works! I'm building this into a Chrome extension and one other thing I noticed is that, even if I tell the script not to execute until the document is ready, it still fails to find end_date half of the time when it loads (this happens even if I make it delay for 10 seconds). Is there an angular equivalent of document ready or window loaded I should try to make sure my script sees the end_date field?

– user1850261
Nov 20 '18 at 21:12

Glad it worked for you. I wouldn't know the answer to your second question. I would recommend you post a new question if you cannot find existing answers for it.

– JM-AGMS
Nov 20 '18 at 21:16

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400993%2fhacking-angularjs-form-elements-to-change-values%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

First, make your change to the input, then do:

var input = document.getElementById("end_date")

angular.element(input).triggerHandler('change');

That should trigger AngularJS to detect the change.

answered Nov 20 '18 at 20:42

JM-AGMS

608620

Thanks. That works! I'm building this into a Chrome extension and one other thing I noticed is that, even if I tell the script not to execute until the document is ready, it still fails to find end_date half of the time when it loads (this happens even if I make it delay for 10 seconds). Is there an angular equivalent of document ready or window loaded I should try to make sure my script sees the end_date field?

– user1850261
Nov 20 '18 at 21:12

Glad it worked for you. I wouldn't know the answer to your second question. I would recommend you post a new question if you cannot find existing answers for it.

– JM-AGMS
Nov 20 '18 at 21:16

add a comment |

First, make your change to the input, then do:

var input = document.getElementById("end_date")

angular.element(input).triggerHandler('change');

That should trigger AngularJS to detect the change.

answered Nov 20 '18 at 20:42

JM-AGMS

608620

Thanks. That works! I'm building this into a Chrome extension and one other thing I noticed is that, even if I tell the script not to execute until the document is ready, it still fails to find end_date half of the time when it loads (this happens even if I make it delay for 10 seconds). Is there an angular equivalent of document ready or window loaded I should try to make sure my script sees the end_date field?

– user1850261
Nov 20 '18 at 21:12

Glad it worked for you. I wouldn't know the answer to your second question. I would recommend you post a new question if you cannot find existing answers for it.

– JM-AGMS
Nov 20 '18 at 21:16

add a comment |

First, make your change to the input, then do:

var input = document.getElementById("end_date")

angular.element(input).triggerHandler('change');

That should trigger AngularJS to detect the change.

answered Nov 20 '18 at 20:42

JM-AGMS

608620

First, make your change to the input, then do:

var input = document.getElementById("end_date")

angular.element(input).triggerHandler('change');

That should trigger AngularJS to detect the change.

answered Nov 20 '18 at 20:42

JM-AGMS

608620

answered Nov 20 '18 at 20:42

JM-AGMS

608620

answered Nov 20 '18 at 20:42

JM-AGMS

608620

answered Nov 20 '18 at 20:42

JM-AGMS

608620

Thanks. That works! I'm building this into a Chrome extension and one other thing I noticed is that, even if I tell the script not to execute until the document is ready, it still fails to find end_date half of the time when it loads (this happens even if I make it delay for 10 seconds). Is there an angular equivalent of document ready or window loaded I should try to make sure my script sees the end_date field?

– user1850261
Nov 20 '18 at 21:12

Glad it worked for you. I wouldn't know the answer to your second question. I would recommend you post a new question if you cannot find existing answers for it.

– JM-AGMS
Nov 20 '18 at 21:16

add a comment |

Thanks. That works! I'm building this into a Chrome extension and one other thing I noticed is that, even if I tell the script not to execute until the document is ready, it still fails to find end_date half of the time when it loads (this happens even if I make it delay for 10 seconds). Is there an angular equivalent of document ready or window loaded I should try to make sure my script sees the end_date field?

– user1850261
Nov 20 '18 at 21:12

Glad it worked for you. I wouldn't know the answer to your second question. I would recommend you post a new question if you cannot find existing answers for it.

– JM-AGMS
Nov 20 '18 at 21:16

Thanks. That works! I'm building this into a Chrome extension and one other thing I noticed is that, even if I tell the script not to execute until the document is ready, it still fails to find end_date half of the time when it loads (this happens even if I make it delay for 10 seconds). Is there an angular equivalent of document ready or window loaded I should try to make sure my script sees the end_date field?

– user1850261
Nov 20 '18 at 21:12

Glad it worked for you. I wouldn't know the answer to your second question. I would recommend you post a new question if you cannot find existing answers for it.

– JM-AGMS
Nov 20 '18 at 21:16

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu