I forgot to mention that the 3 counter values are coming from the 3 variables.
So if your data come from a query, you have to pass the data to the variables and then any change is reflected to the text inputs of your form.
Hope I helped my friend… Please share your problem so we understand better what is missing
I modified the code by inserting it into the page without using Modal
It seems to work well, although to be fixed for variable passing Then I will also have to put limits on the count, preventing negative values and limiting a maximum for each counter
However the real problem is that the dropdown doesn’t work and the module with the three counters is always open
This the code
`
</div>
<div class="mb-3 row pb-3 g-0 border-bottom border-primary justify-content-center">
<label for="MinoriValue" class="form-label ps-2 pt-2 fw-bold me-2 col-6 text-start col-form-label-sm">Minori (alt.max 1 mt):</label>
<button id="btn7" class="btn w-auto h-100 btn-sm btn-outline-secondary" dmx-on:click="varMinori.setValue(varMinori.value>=1?varMinori.value-1:0)">
<i class="fas fa-minus fa-fw fa-lg lh-base"></i></button>
<div class="col-2 px-0">
<input class="form-control text-center fw-bold" id="MinoriValue" dmx-bind:value="varMinori.value" type="number" name="MinoriValue">
</div><button id="btn6" class="btn w-auto btn-sm h-100 btn-outline-secondary" dmx-on:click="varMinori.setValue(varMinori.value+1)">
<i class="fas fa-plus fa-fw fa-lg lh-base"></i></button>
</div>
<div class="mb-2 row pb-3 g-0 border-bottom border-primary justify-content-center">
<label for="CaniValue" class="form-label ps-2 pt-2 fw-bold me-2 col-6 text-start">Cani :</label>
<button id="btn8" class="btn w-auto h-100 btn-sm btn-outline-secondary" dmx-on:click="varCani.setValue(varCani.value>=1?varCani.value-1:0)">
<i class="fas fa-minus fa-fw fa-lg lh-base"></i></button>
<div class="col-2 px-0">
<input class="form-control text-center fw-bold" id="CaniValue" dmx-bind:value="varCani.value" type="number" name="CaniValue">
</div><button id="btn9" class="btn w-auto btn-sm h-100 btn-outline-secondary" dmx-on:click="varCani.setValue(varCani.value+1)">
<i class="fas fa-plus fa-fw fa-lg lh-base"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
`
I cannot really see the whole dropdown menu code… Also the dropdown toggle is missing.
Can you please share a Screenshot instead of the code and we go from there to solve it.
Mine is working fine as it was inside the modal.
Please paste my code in your page (like a modal, its fine for testing) and see if its behavior is OK.
If you want to post code in your replies please make sure to follow:
Ok thank you Teodor
I tried to insert another dropdown on the page and it works normally, so I have to look for the error inside the dropdown
Hello Famousmag
I managed to get the dropdown to work, but I still have a problem: when I click on + or - the dropdown closes, while it should stay open and the closure should be done by clicking on the dropdown icon
Here the code after the changes
<div class="dropdown" id="Passeggeri">
<dmx-value id="varCani" dmx-bind:value="0"></dmx-value>
<dmx-value id="varMinori" dmx-bind:value="0"></dmx-value>
<dmx-value id="varAdulti" dmx-bind:value="1"></dmx-value>
<button id="dropBtn_passeggeri" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><b>{{varAdulti.value}}</b> Adulti - <b>{{varMinori.value}}</b> Minori - <b>{{varCani.value==0?'0':varCani.value}}</b> Cani. </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div class="mb-3 row pb-3 g-0 border-bottom border-primary justify-content-center" id="Adulti">
<label for="AdultiValue" class="form-label ps-2 pt-2 fw-bold me-2 col-6 text-start col-form-label-sm">Adulti:</label>
<button id="btn_adulti_dim" class="btn w-auto h-100 btn-sm btn-outline-secondary" dmx-on:click="varAdulti.setValue(varAdulti.value>=1?varAdulti.value-1:0)">
<i class="fas fa-minus fa-fw fa-lg lh-base"></i></button>
<div class="col-2 px-0 ">
<input class="form-control text-center fw-bold" id="AdultiValue" value="1" dmx-bind:value="varAdulti.value" name="adultiValue" type="number">
</div>
<button id="btn_adulti_add" class="btn w-auto btn-sm h-100 btn-outline-secondary" dmx-on:click="varAdulti.setValue((varAdulti.value + 1))">
<i class="fas fa-plus fa-fw fa-lg lh-base"></i></button>
</div>
<div class="mb-3 row pb-3 g-0 border-bottom border-primary justify-content-center" id="Minori">
<label for="MinoriValue" class="form-label ps-2 pt-2 fw-bold me-2 col-6 text-start col-form-label-sm">Minori (alt.max 1 mt):</label>
<button id="btn_minori_dim" class="btn w-auto h-100 btn-sm btn-outline-secondary" dmx-on:click="varMinori.setValue(varMinori.value>=1?varMinori.value-1:0)">
<i class="fas fa-minus fa-fw fa-lg lh-base"></i></button>
<div class="col-2 px-0">
<input class="form-control text-center fw-bold" id="MinoriValue" dmx-bind:value="varMinori.value" type="number" name="MinoriValue" value="0">
</div><button id="btn_minori_add" class="btn w-auto btn-sm h-100 btn-outline-secondary" dmx-on:click="varMinori.setValue(varMinori.value+1)">
<i class="fas fa-plus fa-fw fa-lg lh-base"></i></button>
</div>
<div class="mb-2 row pb-3 g-0 border-bottom border-primary justify-content-center" id="Cani">
<label for="CaniValue" class="form-label ps-2 pt-2 fw-bold me-2 col-6 text-start">Cani :</label>
<button id="btn_cani_dim" class="btn w-auto h-100 btn-sm btn-outline-secondary" dmx-on:click="varCani.setValue(varCani.value>=1?varCani.value-1:0)">
<i class="fas fa-minus fa-fw fa-lg lh-base"></i></button>
<div class="col-2 px-0">
<input class="form-control text-center fw-bold" id="CaniValue" dmx-bind:value="varCani.value" type="number" name="CaniValue" value="0">
</div><button id="btn_cani_add" class="btn w-auto btn-sm h-100 btn-outline-secondary" dmx-on:click="varCani.setValue(varCani.value+1)">
<i class="fas fa-plus fa-fw fa-lg lh-base"></i></button>
</div>
</div>
</div>
Add this to tour dropdown toggle button (button id=“dropBtn_passeggeri”)
data-bs-auto-close="false"
wow perfect
now I have only one problem left: I would like to insert a maximum limit for each increment type —> max=“12”, but I can’t get it to work
add the events on each button…
for example, this is for the minus button checking the down limit…
dmx-on:click=“varAdults.setValue(varAdults.value>=1?varAdults.value-1:0)”
Add any condition you need on each button you need
Cheers
But for the decrease button it’s already correctly set, and it doesn’t proceed below zero
dmx-on:click=“varAdults.setValue(varAdults.value>=1?varAdults.value-1:0)”
For the increase button instead I tried all the combinations, but I can't create a maximum
dmx-on:click=“varAdulti.setValue((varAdulti.value+1:12))”
dmx-on:click=“varAdulti.setValue(varAdulti.value<=11?varAdulti.value+1:12)”
Correct syntax:
(Condition ? True : False)
You can just check the input/var value and disable the button when its value is >= 12
famousmag’s suggestion sadly doesn’t work; maybe there is a problem with the < character
Teodor’s suggestion is a great alternative; but is it to be entered manually in the code or can I use Wappler?
Well … just select your button, add new dynamic attribute and select “disabled”. Enter the condition for it and that’s all.
Ok now it works perfectly
Thank you all
Hi Teodor
I still encounter a little problem
Everything works, even the min and max limits, if I use the + and - buttons
But if I click on the number, the two little buttons + and - appear, which do not respect the limits
