Issues will multi-page form impementation

Front End Components Bugs
1

Good morning.
I'm a new wappler user and have been really impressed at the power of the product in my first week of using it.

I'm currently transitioning a simple web app I was developing outside of Wappler into it and am mostly there.

Ive been following the tutorial for multi page forms (Wappler Documentation - Creating Multi Steps Forms), however, I am not having any success with the dynamic attributes, they seem to not be triggered when the value of the var is amended.

I can see the tutorial is a little out of date and the picker in the custom attribs etc is a little different. However, its all worked fine.

Code samples (Ive taken the leading < off of the code below to avoid any rendering issues here):
var:
dmx-value id="steps" dmx-bind:value="1">

Button:
button class="w-30" id="beginButton1" dmx-on:click="'steps.setValue('steps.value +1')'">Next

Section:
section id="aboutChild" class="bg-body-tertiary bg-white opacity-100 text-body-tertiary container ms-n5" dmx-show="steps.value==2">

This site has been developed from a template which has meant its a bit smashed together. I did wonder if thats part of the issue, however, its all BS5 and I have just created a seperate attempt from scratch in Wappler and experience the same issues.

You can see my current effort here: https://formdemo.nurseryspaces.co.uk/

Any support welcomed

2

OK, it looks like a nights sleep has helped me progress this.

I have now got it to work using an explicit value rather than incrementing by 1

Here is what has worked:

button class="w-30" id="testButton3" dmx-on:click="steps.setValue(3)">Page 3

Here is what doesnt:
button class="w-30" id="nextButton2" dmx-on:click="steps.setValue('steps.value+1')">Next

Hope this is helpful. If anyone can share some insight into the issue with the incremental code then it would be appreciated.

Thanks

1 Like
3

Ah, sleep is the best debugger! Glad you solved it, and welcome to Wappler :slight_smile:

If you want to post some more code in the forum without having to edit out anything, you can surround code with three tildes (`) and it will show up like this

<h1>Hi ismsoops!<h1>

Multiline code? Just put three tildes at the top and bottom line

like
this

Thanks again for posting the update! I have found a lot of solutions when people post answers like this.