Hi Chris,

I tried the following code of snippet radio_switching_point in otree studio. However, when I click the next button, it did not submit the data, nor did it goes to the next page.

I found that this was a bug and you have fixed it according to https://groups.google.com/g/otree/c/hcnSRTKtb3c
So I am confused why it doesn't work well for me.

The code:

<input type="hidden" name="switching_point">
{{ formfield_errors 'switching_point' }}

<table class="table table-striped">
    <colgroup>
        <col width="45%">
        <col width="10%">
        <col width="45%">
    </colgroup>
    <tr>
        <td align="right"><b>Option A</b></td>
        <td></td>
        <td align="left"><b>Option B</b></td>
    </tr>
    {{ for amount in right_side_amounts }}
    <tr>
        <td align="right">
            <b>{{ player.left_side_amount }}</b> now
        <td align="middle">
            <input type="radio"
                   value="left"
                   name="{{ amount }}"
                   required>&nbsp;&nbsp;
            <input type="radio"
                   name="{{ amount }}"
                   value="right" data-amount="{{ amount }}"
                   required>
        </td>
        <td align="left">
            <b>{{ amount }} </b> next month
    </tr>
    {{ endfor }}
</table>


<button type="button" class="btn btn-primary" onclick="submitForm()">Next</button>

<script>
    let allRadios = document.querySelectorAll('input[type=radio]')
    function submitForm() {
        let form = document.getElementById('form');
        if (form.reportValidity()) {
            let allChoicesAreOnLeft = true;
            for (let radio of allRadios) {
                if (radio.value === 'right' && radio.checked) {
                    forminputs.switching_point.value = radio.dataset.amount;
                    allChoicesAreOnLeft = false;
                    break;
                }
            }
            if (allChoicesAreOnLeft) {
                // '9999' represents the valueInput if the user didn't click the right side for any choice
                // it means their switching point is off the scale. you can change 9999 to some other valueInput
                // that is larger than any right-hand-side choice.
                forminputs.switching_point.value = '9999';
            }
            form.submit();
        }
    }

    function onRadioClick(evt) {
        let clickedRadio = evt.target;
        let afterClickedRadio = false;
        let clickedRightRadio = clickedRadio.value === 'right';

        for (let aRadio of allRadios) {
            if (aRadio === clickedRadio) {
                afterClickedRadio = true;
                continue;
            }
            if (clickedRightRadio && afterClickedRadio && aRadio.value === 'right') {
                aRadio.checked = true;
            }
            if (!clickedRightRadio && !afterClickedRadio && aRadio.value === 'left') {
                aRadio.checked = true;
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        for (let radio of document.querySelectorAll('input[type=radio]')) {
            radio.onchange = onRadioClick;
        }
    });

</script>

I just tested the code (locally, not using oTree Studio) with oTree v5.10.3 and up-to-date Chrome, Edge, Firefox, and Safari browsers. The code works perfectly fine, which includes recording the value for switching_point correctly and advancing to the next page.

If you do a right click on one of the elements (say, the “Next” button) and choose “Inspect,” do you observe any JavaScript errors when clicking the “Next” button?

Thank you for your help. The error is:
Uncaught ReferenceError: forminputs is not defined
    at submitForm (6:250:21)
    at HTMLButtonElement.onclick (6:240:70)
    
Even when I run the radio_switching_point snippet of the downloaded otree-snippets.otreezip, the same error occurs.

Upgrade oTree. forminputs doesn’t work in old otree versions.

Thank you. I used the command pip3 install -U otree to upgrage otree, the screenshot is attached below. However, the "next" button still didn't work.
According to the screenshot, it seems that my otree version is still not the latest, right? How can I get the latest version?