Why isn't a simple radio button submitting with HTML Form Entry?

Ask OpenMRS
1

Hi all,

I created a simple HTML form with only one radio button:

<section id="section1" sectionTag="section" headerStyle="title" headerCode="My Section">
	<fieldset>
		<legend>
			Radio button 1
		</legend>
		
		<p class="left">
			<obs conceptId="1646" style="radio" answers="Answer #1,Answer #2,Answer #3" />
		</p>
	</fieldset>
</section>

The form can only be submitted when the first option of the radio button is selected. Whenever I choose another option than the first one, the submit button is greyed out and the form canā€™t be submitted.

Step 1 I tick another option than the first one:

Step 2 No data is ā€˜readā€™, and the empty form canā€™t be submitted:

rb-02.png1005Ɨ245 27.3 KB

I donā€™t see anything in the log, but that looks 100% client-side anyway. I tried to debug the JavaScript a bit but Iā€™m really not too sure where to look. Surely Iā€™m missing something obvious as I guess that the radio buttons should probably work out of the box.

Any help would really be appreciated.

1 Like
2

We havenā€™t used radio buttons much in the new(ish) one question per screen flow that you are using, so itā€™s certainly possible there is a conflict with it. Iā€™m on vacation now, but hopefully someone else will be able to take a lookā€“otherwise, Iā€™ll try to take a look when I get a chanceā€“feel free to ping me to remind me!

3

Hi Mark,

Thanks for coming back to me so quick. This is not urgent since we can use a dropdown menu instead for the time being, but it would be great if you could look into it eventually.

Otherwise, could you maybe point me out towards where to look for debugging? I was guessing that I could debug calls to

htmlForm.submitHtmlForm()

but I am really not sure where to look. The one instance of this call that I find is in

/openmrs/htmlformentryui/htmlform/enterHtmlFormWithSimpleUi.page?patientId=f19813f0-8b4b-4bcc-874d-be25f594f1d9&visitId=&formUuid=a000cb34-1111-4344-a1c8-f692232f6edd&returnUrl=%2Fopenmrs%2Fcoreapps%2Fclinicianfacing%2Fpatient.page%3FpatientId%3Df19813f0-8b4b-4bcc-874d-be25f594f1d9%26encounterId%3D5%26

and the breakpoint is never reached, so Iā€™m clearly looking in the wrong place.

4

The underlying issue has to do with the Simple Form UI whose code is here.

Basically, the UI only correctly handles a single input element per field, so there is some code that doesnā€™t recognize that youā€™ve selected anything. If you had added another non-radio field/question and given it an answer, I expect that you would not be blocked from submitting, and things would work fine after submission (but the confirm screen would show a blank value for the radio question).

The reason that nobody has bothered to fix this yet is that radio buttons work badly with this question-per-screen UI, so youā€™re better off avoiding them in the first place. I suggest doing a select where you specify size=ā€œ3ā€ (or, however many options you have) as this works pretty nicely for both keyboard and mouse usage.

Hope this helps! Feel free to edit the wiki page about Simple Form UI to mention this issue somehow.