Detect if <input> is active or not

Questions and Help
1

Hi there,

I am seeking assistance with a feature implementation on our company's web application. Specifically, I need to determine whether a particular <input> element within a radio button group is active or not.

To provide some context, our application includes a section with two radio buttons, allowing users to select either 'Yes' or 'No'. The user's choice is saved both in the background and visually indicated using CSS ::before and ::after selectors.

Here is the HTML structure of the relevant section for reference, in which the radio button No is active:

<div>
    <div>
        <label>PayoutCancellation Enabled</label>
        <div class="gt-flex-row gt-flex-gap">
            <div class="gt-flex-radio">
                <input type="radio" name="payoutcancellation" id="PayoutCancellationYes" value="1" title="Enables cancellation possibility of requested payouts by player" />
                ::before
                <label for="PayoutCancellationYes" class="static-text">Yes</label>
            </div>
            <div class="gt-flex-radio">
                <input type="radio" checked name="payoutcancellation" id="PayoutCancellationNo" value="0" title="Disables cancellation possibility of requested payouts by player" />
                ::before
                ::after
                <label for="PayoutCancellationNo" class="static-text">No</label>
            </div>
        </div>
    </div>
</div>

My question is: How can I detect which radio button (Yes or No) is currently active using the {site} command or any other method?

I appreciate any guidance or resources you can provide regarding this matter.

2

Can you take a look at the :focus and :checked pseudo-classes:

One of them may be exactly what you are looking for.

3

Thank you for your quick reply.

That could maybe solve the problem. Maybe this is a rookie question, but how would I then extract this information with Textblaze. For reference when I look at the pseudo ::before and ::after element I get the following code:

image

4

I don't think you need access to the :before or :after.

What you could do is get the HTML of the currently focused radio button and then check which one it is based on that HTML.

For example, looking at the HTML you sent, something like this might work in your case:

Payout cancellation enabled: {=contains({site: html; selector=input:checked}, "PayoutCancellationYes")}

It checks whether the html of the currently active radio button contains "PayoutCancellationYes". Does that work for you?

1 Like
5

The solution was effective; I adjusted the setting to allow for 'multiple' selections due to the presence of various input fields on the website.

I have a quick follow-up question: Currently, I can only interact with the radio button that's already selected using the {click} function. Could you advise on the specific selector to use with the {click} command to target and activate an unselected radio button?

6

Something, like this should work:

input[type="radio"]:not(:checked)

7

Yes, this has worked perfectly.

Your support has helped me immensely, so thank you for your time!

2 Likes