Search code examples
javascriptgreasemonkeyautofilluserscriptstampermonkey

Way to automatically click button that contains certain text?

I've been searching restlessly for a way to automatically select a survey form button that contains a specific word. I am using Tampermonkey in Google Chrome. In this case, I would like to automatically select buttons with the word 'Male' in them.

Here is an example of the type of button I am talking about (including CSS/HTML):

enter image description here

So for the question: "What is your gender?", I would like to automatically select 'Male.' I have been running through all of the stackoverflow questions I can find that could possibly help, but with no results. I chose a label-based method and used "textContent" to hopefully be able to recognize the text within the form question.

Here is the code I am currently working with (from How can I auto-select a radio button with Greasemonkey?):

// ==UserScript==
// @name         Button Text Form Filler
// @include      https://tasupport.co1.qualtrics.com/jfe/form/SV_0qez6NHJGoCAmMt
// @version      1.0
// @description  Demonstration script to change form values
// ==/UserScript==

var labels = document.getElementsByTagName('label'); 
for (var i = 0; i < labels.length; ++i) { 
    if (labels[i].textContent == "Male") { 
        labels[i].click(); 
    }
}

Unfortunately, the code doesn't work and the button for 'Male' is not selected on page load. This can be tested in the 2nd page of the following website: https://tasupport.co1.qualtrics.com/jfe/form/SV_0qez6NHJGoCAmMt (where the above screenshot comes from).

I have also tried the following with jQuery (How do I automatically click this button with tampermonkey?):

// ==UserScript==
// @name         jQuery Button Test
// @version      0.1
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @include      https://tasupport.co1.qualtrics.com/jfe/form/SV_0qez6NHJGoCAmMt
// ==/UserScript==

$(document).ready(function() {
  $("button:contains('Male')").click();
});

Again, nothing.

There are a few similar questions to mine scattered across stackoverflow, but none of the solutions appear to work here, or perhaps the code I am working with is outdated. I would appreciate any and all help. Thanks in advance.

Solution

  • I have tried the following in the dev console and it works. Hope it helps

    Array.from(document.querySelectorAll('label > span')).find(e => e.textContent === 'Male').parentElement.click()

    The label has an id you can use. You don't need to search in the textContent for Male when you use these id.

    document.getElementById('QID2-1-label').click()

    edit

    for tampermonkey you need some settings to deal with the xhr requests. You need jQuery, waitForKeyElements.js and the @match needs your xhr urls.

    // ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You

// @match        https://tasupport.co1.qualtrics.com/jfe/form/SV_0qez6NHJGoCAmMt
// @match        https://tasupport.co1.qualtrics.com/jfe2/form/SV_0qez6NHJGoCAmMt/next?rand=775440350&tid=1&t=1547858208474
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==

const fire = () => Array.from(document.querySelectorAll('label > span')).find(e => e.textContent === 'Male').parentElement.click();

// another option
// const fire = () => document.getElementById('QID2-1-label').click();

waitForKeyElements (
    "#QID2-1-label",
    fire
);