Hi everyone!
I have a text input field that I do display through CSS in the beginning. After a certain answer given to a previous question, the text input pops up. However, when you enter something and submit the page, the text is not saved.
Here is a MWE:

________________
__init.py:
...
class Player(BasePlayer):
    first_q = models.IntegerField()
    other_q = models.StringField()


class MyPage(Page):
    form_model = 'player'
    form_fields = ['first_q']        ## note here that I do not include other_q because it does not necessarily pop up

...
________________
MyPage.html:
...
<style>
    #other_quest {
            display: none;
        }
</style>

<label for="first_q">Please type in some number.</label>
<br>
<input name="first_q" id="first_q" type="number" oninput="show_other_q()"/>
{ formfield_errors "first_q"}}

<div id="other_quest">
    <label for="other_q">Why is this number greater 0?</label>
    <br>
    <input name="other_q" id="other_q" type="text"/>
</div>

<script>
    function show_inc_other_spec (e) {
        let first_quest = document.getElementById('first_q').value;
        if (parseInt(first_quest)>0) {
            document.getElementById('other_quest').style.display = 'block';
        } else {
            document.getElementById('other_quest').style.display = 'none';
        }
    }
</script>


The first variable first_q is saved properly. The second one, other_q, is not saved, even when it is displayed and an answer is entered. Do you have any idea what to do with this?

I’m pretty sure that you have to include 'other_q' in your form_fields definition for participants’ input to be recorded in the oTree database:

form_fields = ['first_q', 'other_q']

To allow it to be empty, make it “optional”, as described in https://otree.readthedocs.io/en/latest/forms.html#optional-fields:

other_q = models.StringField(blank=True)

PS: If you would like to force your participants to provide an answer in the case that the “other_q” input is displayed, you could add the following to the “if” branch of your JavaScript code:

document.getElementById('other_q').required = true;

Hello Holger!
Thanks for the solution, that worked very smooth and even allows me to use the {{ formfield 'other_q' }} option. That works smoothly.
What does not work, however, is to use the models.StringField(blank=True)-option and then use forminputs.other_q.required=true. Thus, the following code does not prevent the field of other_q to be blank.

...
<label for="first_q">Please type in some number.</label>
<br>
<input name="first_q" id="first_q" type="number" oninput="show_other_q()"/>
{ formfield_errors "first_q"}}

<div id="other_quest">
    {{ formfield "other_q" }}
    {{ formfield_errors "other_q"}}
</div>

<script>
    function show_inc_other_spec (e) {
        let first_quest = document.getElementById('first_q').value;
        if (parseInt(first_quest)>0) {
            document.getElementById('other_quest').style.display = 'block';
            forminputs.other_q.required = true;
        } else {
            document.getElementById('other_quest').style.display = 'none';
        }
    }
</script>

The code you posted contains a couple of typos – for instance, a missing “{”, and you renamed the JavaScript function but did not change the “oninput” attribute accordingly.

Im my testing, the following works flawlessly:

In __init__.py:

class Player(BasePlayer):

    first_q = models.IntegerField()
    other_q = models.StringField(blank=True)

class Test(Page):

    form_model = 'player'
    form_fields = ['first_q', 'other_q']

In Test.html:

<label for="first_q">Please type in some number.</label>
<br>
<input name="first_q" id="first_q" type="number" oninput="show_other_q()"/>
{{ formfield_errors "first_q"}}

<div id="other_quest" style="display: none;">
   {{ formfield "other_q" }}
   {{ formfield_errors "other_q"}}
</div>
{{ next_button }}

<script>
   function show_other_q() {
       let first_quest = document.getElementById('first_q').value;
       if (parseInt(first_quest)>0) {
           document.getElementById('other_quest').style.display = 'block';
           forminputs.other_q.required = true;
       } else {
           document.getElementById('other_quest').style.display = 'none';
           forminputs.other_q.required = false;
       }
   }
</script>

• If I type in a number > 0 into the first input field, the second input field appears and also has to be filled for the next_button to work.
• If I type in a number <= 0, then the second input field is now shown and also not required for the next_button to work.

Sorry for the typos, I wrote the code from scratch since it is of course only a dummy example of my problem in the real code. Interestingly, when I set up a testapp with your code exactly, the problem still remains. Leaving other_q blank after it pops up due to a number > 0, I can still press the next_button without any error_message.

My otree version was updated today to 5.8.4

I don't know where the problem could be. Do you have any other idea? I run otree in a virtual environment using Python 3.9.6 on Windows 10 Enterprise.

Can you send me a ZIP archive of your test app/attach it to a post in this forum?

Of course, here is the otreezip of the very basic dummy problem. Thanks again for your help! I am very grateful!

Hmmmmmm, maybe there has been a misunderstanding.

The code you sent works perfectly on my computer (macOS 12.5, oTree 5.8.5, Python 3.8.2). I have tested it with three browsers: Firefox, Chrome, and Safari. By “it works perfectly,” I mean that I cannot press the “Next” button unless I fill in the “q_other” field.

Of course, this does not produce an oTree-generated error message, because the field is never submitted if it is left empty and required is set to true. The only “error” message I get is “Please fill out this field.”

That really is interesting. I tested it on Firefox, Chrome, and Edge, and it doesn't work. I even updated it to otree 5.9.0 now and it still doesn't work. I can resume to the next page without any issues.

Well, then the solution is obvious: Get a Mac. ;-)

Kidding aside, I can only think of one reason: The “forminputs.other_q.required = true;” part of your JavaScript code is not executed by your browser.

That is probably the only reasonable explanation. The interesting question would now be: What happens on the participants' PCs when this is set up online? It would be a pity if it works for some, but not for all..

I’m really puzzled. I just tested the code that you attached previously on a Windows machine in Firefox, Chrome, and Edge, and none of the three browsers lets me advance to the next page if I leave “Other Q” empty.

I have an idea for an alternative, though ...

... and the alternative idea is:

Let both fields be mandatory in __init__.py:

class Player(BasePlayer):

    first_q = models.IntegerField()
    other_q = models.StringField()

In Test.html, include the following:

{{ block content }}

<label for="first_q">Please type in some number.</label>
<br>
<input name="first_q" id="first_q" type="number" oninput="show_other_q()"/>
{{ formfield_errors "first_q"}}

<div id="other_quest" style="display: none;">
   {{ formfield "other_q" }}
</div>

<p>{{ next_button }}</p>

<script>
   function show_other_q() {
       let first_quest = document.getElementById('first_q').value;
       if (parseInt(first_quest) > 0) {
           document.getElementById('other_quest').style.display = 'block';
           if (document.getElementById('id_other_q').value == "N/A") {
             document.getElementById('id_other_q').value = "";
           };
       } else {
           document.getElementById('other_quest').style.display = 'none';
           if (document.getElementById('id_other_q').value == "") {
             document.getElementById('id_other_q').value = "N/A";
           };
       }
   }
</script>

{{ endblock }}

This way, you get an “N/A” entry for “other_q” when the answer to the first question is ≤ 0 (on the first attempt). If the entry for the first question is > 0, the “other_q” input field is initially empty, and the form cannot be submitted if the field is left empty.

Does this help?

forminputs is a new feature, so make sure you are updated to the latest otree version (currently 5.9): https://otree.readthedocs.io/en/latest/forms.html#javascript-access-to-form-inputs

Hi Chris, I did update it yesterday to 5.9.0, but it still did not work. I don't know why, especially since it worked for Holger.