I believe you’ll need to figure out how to format, including the data from the repeat. I haven’t done much of that in Wappler, but it may look something like this. Without knowing more about the structure that you need in your API call I’m not sure anyone will be able to help.
Thanks for the help. Let me write up a more detailed description and get back to you. I have a few ideas in the meantime.
Then the data are still in the form and there’s no need to store it. Just use the variable for showing the different sections and once they get to the submit button call the API Action and use the values in the form.
@kfawcett Yah it is working on storing the data now so that is a good thing.
I am having difficulty with the show and hide.
In the tutorial, it states that the first element i.e. row (question) needs to be selected and a value in the Dynamic Attribute > show needs to be carbonCal.value==1
When I do this the first question is not shown. wouldn’t the first be a hide and the rest be a show? do you not need show and hide on each to appear and hide when the data is sent?
You shouldn’t need to do anything with the data until you submit the form. That’s why I think you should go back to a simple form and make sure that works before working on the multiple steps.
I did test the form as a single page and it worked so that is a good thing.
Do you have any suggestions on the show / hide process? its just not working
Thanks it was that the value was not set to 1.
Thanks for you help!
@kfawcett good morning buddy, my apologies for bugging you again. Good news is the form is working great.
However there is a very weird glitch, when I am setting dynamic attribute > show,
dmx-show="calc.value==1" dmx-show="calc.value==2" dmx-show="calc.value==3" dmx-show="calc.value==4" dmx-show="calc.value==5"
show 1 works correctly
show 2 works correctly
show 3 is skipped
show 4 shows after show 2 button is clicked
show 5 is skipped
I am praying this is not a bug and I am just missing something. but why would the first two and third show and the other do not?
Showing actual code/screenshots is going to be helpful. No one can really help troubleshoot without seeing the actual code.
Even better, record it in a video showing first your code in Wappler and then the app. Using https://www.screencastify.com/ makes this really easy.
section 2
<div class="row align-items-lg-center justify-content-lg-center" id="numbHouseCar" dmx-show="calc.value==2">
<div class="col d-flex flex-lg-column justify-content-lg-center align-items-lg-center cal4a">
<h5>Tell us a little about your family</h5>
<div class="cal2 form-group md-3">
<label for="NumberIndividualsInHousehold" class="form-label">Number of Individuals of your household?</label>
<input type="text" class="form-control cal10" id="NumberIndividualsInHousehold" name="NumberIndividualsInHousehold" aria-describedby="input1_help" placeholder="enter the numeric value">
<label for="NumberIndividualsInHousehold" class="form-label">How many vehicles do you own, or lease?</label>
<input type="text" class="form-control cal10" id="NumberAutosForHousehold" name="NumberAutosForHousehold" aria-describedby="input1_help" placeholder="enter the numeric value">
</div>
<div class="d-flex cal2 cal10 justify-content-between">
<button id="btn2" class="btn btn-sm btn-primary" dmx-on:click="calc.setValue(calc.value+2)" dmx-bind:disabled="!NumberIndividualsInHousehold.value+!NumberAutosForHousehold.value">Next</button><button id="btn3" class="btn btn-success btn-sm" dmx-on:click="calc.setValue(calc.value-1)">Back</button>
</div>
</div>
</div>
Section 3 - section does not show on click, click on two skips to section 4
<div class="row" id="vehicleInfo" dmx-show="calc.value==3">
<div class="col text-center cal4a">
<legend class="col-form-label">Vehicle Information</legend>
<div is="dmx-form-repeat" id="Vehicles" dmx-bind:items="1">
<div class="row ca">
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="col-5 cal2">
<select id="VehManufacturer" class="form-select">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Jeep">Jeep</option>
<option value="Ram">Ram</option>
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Nissan">Nissan</option>
<option value="Mazda">Mazda</option>
<option value="Subaru">Subaru</option>
<option value="Kia">Kia</option>
<option value="Hyundia">Hyundia</option>
<option value="BMW">BMW</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Audi">Audi</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Porsche">Porsche</option>
<option value="Tesla">Tesla</option>
</select>
</div>
<div class="col-5 cal2">
<select id="VehType" class="form-select">
<option value="1">Sedan</option>
<option value="2">SUV</option>
<option value="3">Truck</option>
<option value="">Crossover</option>
<option value="">Van</option>
<option value="">Convertible</option>
<option value="">Sport</option>
<option value="">Electric</option>
<option value="">Hybrid</option>
</select>
</div>
<div class="col-5 cal2">
<input id="VehYear" name="text3" type="text" class="form-control" placeholder="What year was your vehicle Manufactured?">
</div>
<div class="col-5 cal2">
<input id="OverallVehMilesDrivenPerYear" name="VehYear" type="text" class="form-control" placeholder="Estimated # of Miles Driven Per Year">
</div>
<div class="col-5 cal2">
<input id="OverallVehMilesPerGallon" name="text2" type="text" class="form-control" placeholder="Estimated Miles Per Gallon">
</div>
<div class="d-flex justify-content-between flex-column w-auto">
<div class="col cal4">
<input id="VehPctCityDriving" name="text1" type="text" class="form-control" placeholder="Estimated City Miles Driven">
</div>
<div class="cal4 col">
<select id="NoRegularVehicleAutoMaintenance" class="form-select">
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
<div class="col-5 cal2 d-flex justify-content-between">
<button id="btn5" class="btn btn-primary btn-sm" dmx-on:click="Vehicles.add()">Add Vehicle</button>
<button id="btn4" class="btn btn-danger btn-sm" dmx-on:click="Vehicles.remove($index)">Remove</button>
</div>
<div class="d-flex cal10 justify-content-between">
<button id="btn7" class="btn btn-primary btn-sm" dmx-on:click="calc.setValue(calc.value+3)" dmx-bind:disabled="!VehManufacturer.value+!VehType.value+!VehYear.value+!OverallVehMilesDrivenPerYear.value+!OverallVehMilesPerGallon.value+!VehPctCityDriving.value+!NoRegularVehicleAutoMaintenance.value">Next</button>
<button id="btn6" class="btn btn-success btn-sm" dmx-on:click="calc.setValue(calc.value-2)">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
Screen Recording 2023-03-07 at 12.03.39 PM
in preview mode it only shows the first two slides
Screen Recording 2023-03-07 at 12.02.57 PM
when in browser mode I can see first, second, and fourth slides.
https://watch.screencastify.com/v/96G3KGY1CRSMhTbTrIEA
I think it is line 63. This should only add +1, not +2.
Every time you click forward you add (i.e. +1), every time you click back you subtract (i.e. -1).
You need to increment your value by 1, not by 2.
dmx-on:click="calc.setValue(calc.value+1)
Same for all other calculations where you do subtraction, it need to be -1
so each time it would be just plus +1 or -1
so each slide is slide 1 +1, slide 2 +1, slide 3 +1
not slide 1 +1, slide 2 +2, slide 3 +3
Correct. You are already taking the value in the variable and adding/subtracting from it. So you add/remove one to it each time.
Example:
Variable = 1
To go to next section take value in variable and add 1.
To go to previous section take value in variable and subtract 1.
its always something small. I feel stupid… Thanks again! 
Good news is, the UI works and is hitting the API.
Question for you, and I know you are going to request more info, Ill try to explain the best I can.
on the repeat form sections, I have a main element,
call it Vehicles, and the attributed sub information inputs are submitting their info under the main section vehicles.
The below segment is pulled directly from our Swagger docs
"Vehicles": [{"VehManufacturer": "Toyota", "VehYear": "2018", "VehMilesPerGallon": 32.5, "VehMilesDrivenPerYear": 18000.0 , "VehPctCityDriving": 80.0},
{"VehManufacturer": "Ford", "VehYear": "2020", "VehMilesPerGallon": 30.0, "VehMilesDrivenPerYear": 22000.0 , "VehPctCityDriving": 20.0}],
However when I hit submit, the information in these fields are not captured. I assume this is because I am submitting the data incorrectly. Here is how the API is set up.
<form id="carbonCalculator" is="dmx-api-form" method="post" action="https://staging.gecapi.com:3500/calc_carbon" post-data="json" dmx-header:key="key.value">
The form is an API form. any thoughts?
Just an additional point, the ID of each input coincides with the API call ID.
Here is an example;
<div is="dmx-form-repeat" id="Vehicles" dmx-bind:items="1">
<div class="row ca">
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="col-5 cal2">
<select id="VehManufacturer" class="form-select">
<option value="Ford">Ford</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Jeep">Jeep</option>
<option value="Ram">Ram</option>
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Nissan">Nissan</option>
<option value="Mazda">Mazda</option>
<option value="Subaru">Subaru</option>
<option value="Kia">Kia</option>
<option value="Hyundia">Hyundia</option>
<option value="BMW">BMW</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Audi">Audi</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Porsche">Porsche</option>
<option value="Tesla">Tesla</option>
</select>
</div>When you submit the data what is in the Network Payload tab for the post request?
Also, post the Request Headers under the Headers tab.
And what does the code look like in Wappler for the data that you’re sending?
Its a lot of information so I created a few snap shots. The info stored in the variables is massive.
Here is the shot payload request;
The three that are successful are the only three within the main form and not nested within a form repeat.
Here is the header request;
Here are two shots of the content;
second shot
I’m not sure. I think you are sending the values, but maybe the format is not what your API is expecting. We might need someone who is more experienced in JSON to chime in.
What’s strange is this image shows Vehicles[0][text1], Vehicles[0][text2], Vehicles[0][text3]. I would expect that to match the values in the screenshot above like [VehYear], [OverallVehMilesPerGallon], etc. The values seem to be slightly off as well, so maybe it’s just a UI issue due to the amount of data?
