I have a question regarding the checkbox input when used within an API form.
Currently I have two checkbox’s, each one if selected will trigger the next set of questions associated with the box selected. Currently, I show and hide based on values applied to the session manager. Right now, no matter what I do, the values associated with both boxes when check either send both values to the session manager or do not send their value to the session manager. I need to have only the value of the selected box send its value at the time of the submit click.
Attached is a quick video of how I have set up the buttons.
<div class="col" id="calcQAS" dmx-hide="session1.data.userName">
<h5>please enter your name</h5>
<input id="userName" name="userName" type="text" class="form-control" placeholder="Enter your first and last name">
<h5>Choose the footprint profile you would like to start</h5>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" id="userBusiness" name="UserBusiness" dmx-bind:checked="value">
<label class="form-check-label" for="userBusiness">Personal Profile</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" id="userPersonal" name="userPersonal" dmx-bind:checked="value">
<label class="form-check-label" for="userPersonal">Business Profile</label>
</div><button id="btn5" class="btn btn-primary btn-sm" dmx-on:click="session1.set('userName',userName.value);session1.set('userBusiness',userBusiness.value);session1.set('userPersonal',userPersonal.value)" type="submit">Step 1</button>
</div>
Screen Recording 2023-02-21 at 7.15.11 PM
Here is what the data looks like via the developer tools.
What I am trying to do is have a form where information displayed is based on the box a user checks. In this case, I have two checkboxes, one that is personal and another is business. If they check the personal box it will show and hide the related questions for the calculator, and vice versa for if they check business. Right now, no matter what I do it stores the both as checked in the session manager.
Sorry i am not following. What has showing and hiding elements on the page with session storage and what’s saved there. I really don’t understand what do you mean. But as i said:
I have a strange feeling your concept is quite wrong.
Why would you need to set a checkbox value on click like that:
dmx-on:click=“checkbox2.setValue(1)”
?
Checkboxes should have their values set initially, you don’t change them dynamically.
Checkboxes will send values on form submit only when their state is checked.
When working with checkboxes and what to do anything with their values you should be checking their checked state, not changing a checkbox value with a dynamic event …
You seem completely confused as to how check boxes work
Starting with the basics, a checkbox represents a Boolean value
1 == checked, 0 == not checked
So for example, if your API action returns two fields, say “personal” and “business” they can be either a value 0 or 1
Before going further you need to understand that the value for a checkbox in a form is ONLY passed when it is checked otherwise the post field is effectively ignored.
So to set a checkbox based on the value returned by the API you use the dynamic attribute “checked”
So the boxed would be checked on these definitions:
dmx-bind:checked=“personal==1” and dmx-bind:checked=“business==1”
That would set the checkboxes based on the values returned
secondly, the value sent to the API action when checked is whatever you set as the static value, generally “1”
BUT you must also be aware that when “unchecked” by the user then no value is send on submit so no value will be set in the update (as stated earlier).
You need a process to clear the Boolean value back to zero in this case.
There are a few ways of dealing with this but i find the easiest is simply to use a default value of “0” in the update action like this so if no value is sent a default of “0” is used.
