Search code examples
javascriptgoogle-chromeautofill

How to update page after filling the blank with javascipt commands in chrome console?

I can fill a blank of an HTML page in Chrome console with javascript command like :

document.getElementById("blankID").value = 1;

This code works fine however, it does not update the page.

If I do the same thing manually, when I place the cursor on the same place and type "1" and click somewhere else or press enter, the page is updated (not reloaded). I want to do the same thing using javascript. Any thoughts?

Solution

  • Based on your description it seems that you did two things to trigger this behavior:

    • change the value of some field
    • blurring out from it

    Your Javascript sets the value of a field, for the purpose of this answer I will suppose that you are setting the correct field correctly. Then, you need to focus on another element. So, let's suppose you get an element (via a selector or something), called element that differs from the one whose value you have changed. You can try

    element.focus();

    I'm writing this answer without having an example of your code or a reproducible example. Let me know if it works for you. If not, then please provide more information to your question.

    EDIT

    This script worked for me at your example:

    var element = document.getElementById("calcSearchTerm");
element.value = 3;
calcSearch();

    This is what led me to the solution:

    enter image description here

    Look at the onkeyup attribute, which is a handler for the keyup event. Since we programmatically change the value, there is no keyup being triggered. Yet, we know what function it should induce, so we do not need to trigger the event programmatically, instead, we can just call the function it would otherwise call.