Submit button that doesn't go to next page

886 views
Skip to first unread message

Xinxin Lyu

unread,
Jan 10, 2022, 11:08:04 PM1/10/22
to oTree help & discussion
Hi Chris,

I am trying to create a quiz page where subjects need to fill in multiple form fileds. To give them a reinforcement feedback on the correct answers, I want them to firstly submit the answers and have their answers validfied. (Thus, I have multiple error messages defined.) If they got all the answers correctly, I want them to see the "Next" button. Just in case some people want to take a quick look on the correct answer. 

Here are the codes I plan to use: 

<input  name='quiz1_D' id='quiz1_D' type='number' style='width: 60px;' placeholder="integer"/> points </div>
<input  name='quiz1_C' id='quiz1_C' type='number' style='width: 60px;' placeholder="integer"/> points </div> 
....

<div>
    <input type="submit">
    </div>

<button class='otree-btn-next btn btn-primary' id='NextButton' style='display:none;'>Next</button>

I want to change the "Next" button to display once all the forms are validified. My question is how to overwrite the type="submit" to forbid automatically going to the next page OR how to write an onclick() function that can both submit and validify the forms with my defined error messages in _init_.py, then I can change the display settings to my Next button. I wonder which method is a better one. 

Hope my question is clear and thanks in advance for the help! 

Best,
Xinxin 

 

Chris Crabbe

unread,
Jan 10, 2022, 11:34:36 PM1/10/22
to Xinxin Lyu, oTree help & discussion
Hi Xinxin -

Instead of a <button>, add an <input type="button" onclick="clickFunction()"> and define def clickFunction() inside the scripts block of your template to update the page as you see fit (and/or validate the input client-side), and then show the next_button once everything is satisfied.

Thanks,
--Chris

--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/a0b683ee-9c32-4c75-8573-83f8f6fb9edcn%40googlegroups.com.

Xinxin Lyu

unread,
Jan 10, 2022, 11:46:18 PM1/10/22
to oTree help & discussion
I see. Thanks for the suggestion! 
Reply all
Reply to author
Forward
0 new messages