Select dropdown item with Tampermonkey creates infinite loop

Question

I would like the browser to pre-select some options from menus on a website of a third party (I do not control the site). My Tampermonkey code (the commented out parts show what else I tried):

    // ==UserScript==
// @name         Select account
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Select the correct account and other transaction parameters.
// @author       Sander Heinsalu
// @match        https://somesite.com*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


    //$("#sometext_id").val("12345").change(); // This creates an infinite loop of selecting the correct dropdown element.
    var once = true;
    if (once){
        $("#sometext_id").val("12345").change(); // Still creates an infinite loop of selecting the correct dropdown element.
        once = false;
    }

    //waitForKeyElements (".format-select:has(span[class='select grid5'])", selectFinickyDropdown); // These and below do not do anything on the website. 
    //waitForKeyElements (".format-select:has(select[id='sometext_id'])", selectFinickyDropdown);
    //waitForKeyElements ("select[id=sometext_id]:has(option[selected='selected'])", selectFinickyDropdown);
    //waitForKeyElements ("select[id=sometext_id]", selectFinickyDropdown);

/*
    //function selectFinickyDropdown (jNode) {
    var jNode = document.evaluate("//option[text().includes('sometext')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    function selectFinickyDropdown () {
        //var evt = new Event ("click");
        var evt = new Event ("keyup");
        jNode[0].dispatchEvent (evt);
        jNode.val('12345');
        //jNode.text().includes('sometext');
        evt = new Event ("change");
        jNode[0].dispatchEvent (evt);
    }

*/
/*
    var toSelect = "//option[text().includes('sometext')]";
    var matchingElement = document.evaluate(toSelect, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    //document.getElementById("stateSelect").selectedIndex = i;
    //matchingElement.selectedIndex=1;
    matchingElement.selected = true;

*/



})();

The other ways to select the dropdown item did not do anything on the webpage. Only the $("#sometext_id").val("12345").change(); selected the item, but repeated it and refreshed the page after each repeat selection. How to select a dropdown item and stop there? No loop or page refresh.

Part of the html of the page (edited field names):

    <input type="hidden" name="i_csrf_token" value="gibberish" id="i_csrf_token"> 
    <div class="message" id="msg-container" style="display:none">
    </div>
        <div class="form-container mt20">
            <div class="field-row ">

                <label for="i_sometext_id" class="req">AText</label> 
                


        <span class="select grid5" style="position: relative; width: 275px;">
        <select name="sometext_id" id="sometext_id" onchange="DoAutopostback(this);" style="width: 100%; visibility: visible;">
        
            <option value="321">
            namex namex • 54321
            </option>
        
            <option value="345" selected="selected">
            optionname • 12345
            </option>
        
        </select>
        <span class="value" style="width: 344px;">
            optionname • 12345
            </span></span>
    
            </div>

            <div class="field-row ">

                <strong class="label">BText</strong> 
                <span class="group">
                    
                        <label class="has-input"><input type="radio" name="i_action_type" id="action_type-1" value="1" class="required" checked="checked">aa</label><br><label class="has-input"><input type="radio" name="i_action_type" id="action_type-2" value="2" class="required">bb</label>
                    
                </span>
            </div>
        
    
    <div class="submit-row">
    
        <span class="submit">
            <button class="button" type="submit">preview</button>
        </span>
    
    </div>
    
    <input type="hidden" name="i_submit" value="1">

Related questions about disabling a function after it runs and one() and IIFE do not apply, because it is the reloading of the page that triggers the Tampermonkey script again, and the Tampermonkey script either triggers reloading the page or does not work.

`onchange="DoAutopostback(this);"` - my bet would be on that one. Isn't it so that even without the tampermonkey stuff (just comment it completely), when you change the selection manually, it reloads the page? — tevemadar, Mar 09 '21 at 09:59
The infinite loop of reloading is the problem. One reload would be fine. I guess the solution would be to run the Tampermonkey code only if the same page has not been reloaded in the past. Is there a way to keep track of whether a page has been reloaded? Maybe with a browser session id, maybe with a timeout. Or replace or disable the `DoAutopostback`. — Sander Heinsalu, Mar 09 '21 at 10:55

score 0 · Answer 1 · answered Mar 09 '21 at 12:07

Changing https://somesite.com* to https://somesite.com?vi=0 fixed the problem, because the website changes its url to https://somesite.com after the first reload, but is https://somesite.com?vi=0 upon initial loading. So the website itself helps me to keep track of its reloading and change the Tampermonkey script accordingly.

Now the problem is how to select items from multiple dropdown menus if each of these reloads the site and the url does not keep track of further reloads after the first one. Either the script does not work (if called on the wrong url) or loops (each reload of the url calls the script again).

Select dropdown item with Tampermonkey creates infinite loop

1 Answers1