FlipSwitch On | Off Value in nested LayoutGrid

[KIRK]

I have to create a fairly large form where I would like to use FlipSwitches.

To keep the form clear, I would like to insert additional LayoutGrids into the LayoutGrid, which is defined as a form.

Now the problem is that only the "On" position of the FlipSwitch is transmitted (as RichText). Not "Off". Value is On | Off.


The transferred data looks like this:

Values submitted from website form:
Text: huhu
FlipSwitch1: $Switch1
FlipSwitch2: On

Is there a solution for this?

Here is a litte demo

Thanks in advance
Kirk

[Pablo]

Note that I cannot see what you have done based on the published page (HTML), because the software has thousands of options and millions of possible combinations.
So, there is no way to know which options you have used by looking at the HTML only.

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.
Also, please include a description how to reproduce this problem.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[KIRK]

Sorry!

Here is the project

[Pablo]

The problem is that the flip switch is not a direct child element of the form.
In that case, the off/on trick will not work.

[KIRK]

Thanks for the support.

Is there a chance that this will change in the future?

[Pablo]

Is there a chance that this will change in the future?

I will investigate if this can be improved.

[KIRK]

It would be great if there was a solution with LayoutGrids!

I tried it with a layer, but then elements are not realigned when they are shown or hidden via a flip switch, for example. It's not visually pretty.

Another alternative would be FlexGrid. But FlexGrid is still much more complicated and time-consuming at the moment (for me)...

[Pablo]

Note that it works with Layout Grids, but not with nested grids.

[KIRK]

Yes, I know that. Thanks.

It is a fairly extensive form, so I would like to add some structure and clarity.

Some form fields are longer (text areas) others are very short (flip switch with a 1 word label). In some cases I would like to arrange the short fields next to each other. For the elements that are arranged next to each other, I work with nested LayoutGrids.

Part of the form can be seen in the picture (first draft).



Or is there an other/better way?

[Pablo]

You can also flexbox for this. However, you will still need nesting because a container can only alignment its elements in one direction.
Or else use a flexgrid.

[SamT]

If you are prepared to add an HTML element on the page and add a little bit of JavaScript there is a way to provide what you want with nested LayoutGrids. There are probably other solutions but this works for my project.

References > formData in the developer.mozilla.org pages points the way.

Note for the below code: 'form' is the name you've given your form. Change to suit. Both 'agerange' and 'tellme' are the names of the FlipSwitch elements in the form. Adjust / add / remove as required. console.log() provides diagnostics while testing your page and not required when the form is working as intended. e.preventDefault() stops the Submit button from firing while testing, if desired remove the comment //. Make sure you have it commented for the live page/form.

Add the following to your HTML element:

Code: Select all

<script>
// grab reference to form
const formElem = document.querySelector("form");

// submit handler
formElem.addEventListener("submit", (e) => {
 // on form submission, prevent default
//  e.preventDefault();

  console.log(formElem.querySelector('input[name="agerange"]'));
  console.log(formElem.querySelector('input[name="tellme"]'));

  // construct a FormData object, which fires the formdata event
  const formData = new FormData(formElem);
  // formdata gets modified by the formdata event
  console.log(formData.get("agerange")); 
  console.log(formData.get("tellme")); 
});

// formdata handler to retrieve data
formElem.onformdata = (e) => {
  console.log("formdata fired");
  // modifies the form data
  const formData = e.formData;
  if(formData.get("agerange") == null) formData.set("agerange", "NO");
  if(formData.get("tellme") == null) formData.set("tellme", "NO");
  formElem.submit();
};
</script>