How to auto-select a photo radio button?

Question

I'm trying to do a Greasemonkey script to auto-select a radio button. The poll has two images and when you click on one image, the option is selected and the CAPTCHA box is enabled to vote.

I'd like to know if there's any way to auto-select the image I want. I've tried some commands like .click() and .checked without success.

Here is the (partial) source HTML from the poll:

<fieldset>
<legend>Validação de voto</legend>
<div class="box-votacao">
    <ul class="duplo-lateral clearFix" id="participantes">

        <li class="off">
            <div class="foto">
                <a href="#">
                    <img class="foto-chamada" src="http://s.glbimg.com/et/bb/f/original/participantes/joao_carvalho_360x300.png" alt="João Carvalho">
                    <div class="selecionado"></div>
                    <p class="bloco-01 off">
                        <input name="opt" id="opt" value="1" type="radio">
                        <strong class="nome">João Carvalho</strong>
                    </p>
                </a>
            </div>
            <p class="legenda">Para votar em João Carvalho, disque 0303 108 8401 ou envie um SMS para 88401</p>
        </li>
        <li class="off ultimo">
            <div class="foto">
                <a href="#">
                    <img class="foto-chamada" src="http://s.glbimg.com/et/bb/f/original/participantes/yuri_360x300.png" alt="Yuri">
                    <div class="selecionado"></div>
                    <p class="bloco-01 off">
                        <input name="opt" id="opt" value="2" type="radio">
                        <strong class="nome">Yuri</strong>
                    </p>
                </a>
            </div>
            <p class="legenda">Para votar em Yuri, disque 0303 108 8402 ou envie um SMS para 88402</p>
        </li>

    </ul>
</div>
<div class="validacao clearFix noBorder">
    <div id="desabilitado"></div>
    <ul>
        <li>
            <img id="captcha" title="seguranca" />
        </li>
        <li class="digitar-codigo">
            <input name="answer" type="text" />
            <p id="erro" class="erro"><span>Erro!</span> <span class="erro-txt">Texto incorreto. Tente novamente.</span></p>
        </li>
        <li class="botao">
            <span><input name="votar" type="submit" class="submit" value="votar"/></span>
        </li>
    </ul>
</div>
</fieldset>

Answer 1

How does your script determine which image to click?

And it is the image that's clicked? Assuming that is true, then something like this should work:

var targImage   = document.querySelector ("div.box-votacao img.foto-chamada[alt='João Carvalho']");
var clickEvent  = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
targImage.dispatchEvent (clickEvent);

If it doesn't work, post a link to the target page, if it's public... or a link to a saved snapshot of the page -- including javascript -- if it's not public.

---

---

Update, now that the target page has been given.

That page is a little tricky; a little more than just a click is required. Also, examining the page, it is not the image that gets clicked it is click handlers on the containing <li> that matter.

So, with a combination of clicking and some JS, the following has been tested to work:

//--- Click the link and list-item associated with the desired image.
var targImg     = document.querySelector ("div.box-votacao img.foto-chamada[alt='João Carvalho']");
targLink        = targImg.parentNode;
targListItem    = targImg.parentNode.parentNode.parentNode;

clickNode (targListItem);

var ps          = unsafeWindow.ps;
for (var j in ps) {
    if (ps[j].className) {
        ps[j].className = ps[j].className.replace ("on", "off");
    }
}
targListItem.className  = targListItem.className.replace ("off", "on");
targListItem.getElementsByTagName ("input")[0].checked = "true";

var captchaBox  = document.querySelector ("#desabilitado");
if (captchaBox) {
    captchaBox.id = "habilitado";
}


function clickNode (targNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    targNode.dispatchEvent (clickEvent);
}

Finally, this page may have been designed to thwart scripting like Greasemonkey. If so, your script may be against the terms of service (not reading much Portuguese, I didn't go looking for them) and they may take countermeasures to bust this script.