0

I have a multi-fieldset HTML form that has a Motor fieldset and a Frame fieldset as part of it. When I need a motor, I populate that part of the form. When I expressly do not need it, I am however required to enter data into Frame fielset. I am not sure how to indicate so via UI so both user and server (one that is receiving data) can understand it. What I mean by this is that say I clearly convey it to the user that only one of the two fieldsets is to be filled out. They fill out only one of them. How do I indicate it to the server that will receive form data that user indented to fill out that specific fieldset?

Easiest thing is to add a checkbox inside the Motor fieldset stating something like

Ignore this motor [x]

The only thing that is stopping me from doing so is that I am using an API library to create my form, and each fielset, so implementing the above will make the "Ignore" checkbox be part of my Motor Entity object, which is not essential to the Entity. But if there is no better solution, maybe I can overlook this ...

Second best is to implement a separate fieldset where I say

motor present? [x]

unchecking which will via JS disable the Motor fieldset. This might be a better solution at the expense of adding another "Control" fieldset. My problem with this is ... an extra fieldset, which is not immediately apparent that it is adjacent to the Motor. I mean users will know it is upon closer inspection so I can too overlook this and implement it if no better solution available.

TL;DR: How can I indicate on an HTML form that a "Motor" fieldset is optional?

Mockups

enter image description here

In full case scenario user must enter one of either Motor of Frame (but not both, and not neither). Each fieldset is generated by a library, where there is a domain entity object behind each. So if any new element has to be added, it will have to become part of that entity. That's why I am considering going outside of the fieldsets as well.

  • Could you show us some mockups? – Dimitra Miha Apr 20 '17 at 9:19
  • Can you make it part of the fieldset title/legend? Something like Motor (optional) or Motor (not required)? – Nicholas Hirras Apr 20 '17 at 13:12
  • @DimitraMiha, added mockups – Dennis Apr 20 '17 at 14:00
  • @Nicholas, - I see, and good point. I can convey it to the user this way, but how do I also convey it to the machine? I think that is my struggle. User may know not to enter Motor, but the form submits (incomplete) motor information anyway to the server. I need a better way to mark it so that both machine and the user know whether or not Motor is required. – Dennis Apr 20 '17 at 14:02
  • Can you have a checkbox in your title [x] Frame Request and only show the fields if that box is checked? – Nicholas Hirras Apr 20 '17 at 15:26
1

It sounds like you want to create an either/or situation here, in which case I would suggest creating some sort of tab/toggle to preclude the possibility of the user interacting with both sections.

For example here I have crudely mocked up a design where clicking on the motor/frame buttons on top of the leftmost frame will show/hide the relevant fields; quick and dirty mock-up of this idea

With a bit of CSS/JS magic(see stack overflow for more on this topic) you can toggle the visibility of the labels and input elements for each "tab" and even disable the fields you don't want to submit.

0

I went ahead and implemented the radio button "switch", which could actually be changed to a "rocker" element as I don't expect a 3rd value to emerge.

Here are the views for Motor selected and for Frame selected. I used jQuery to implement fieldset show/hide behavior.

enter image description here

  • 1
    Just so! Don't forget that client side scripting is not a good substitute for server side verification. If for any reason the script stops running the unaltered HTML version of your form could become available to the end user. – Jim Apr 21 '17 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.