Hi all,
It seems that wappler is not able to process forms with tab’s inside.
Main question is : is it possible to have Tabs and Tab pane in a form ??
What’s the issue exactly? Are any input missing actually or is the only issue the icon which is only broken in the UI?
Most of the inputs are missing. It sems that only those inputs are taken in account:
an hidden input outside the panes
inputs in the first pane
Inputs in the second and third pane do not appear
Please post everything you have inside <form> ... </form> here so we can check it.
Make sure to wrap the code in three backticks ``` so that the code is properly formatted.
Thx Teodor, here it is. Pane 3 is empty, normal.
<form method="post" action="dmxConnect/api/Counters/updateCounterSettings.php" is="dmx-serverconnect-form" id="form_editCounterSettings">
<input id="editCompid" name="editCompid" type="text" class="form-control" dmx-bind:value="session1.data.compid">
<div class="container">
<ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="navTabs1_1_tab" data-toggle="tab" href="#" data-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true">Paramètres</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navTabs1_2_tab" data-toggle="tab" href="#" data-target="#navTabs1_2" role="tab" aria-controls="navTabs1_1" aria-selected="true">Visibilité</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navTabs1_3_tab" data-toggle="tab" href="#" data-target="#navTabs1_3" role="tab" aria-controls="navTabs1_2" aria-selected="false">Règles</a>
</li>
</ul>
<div class="tab-content" id="navTabs1_content">
<div class="tab-pane fade show active mt-2" id="navTabs1_1" role="tabpanel">
<form id="form_editCounter1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/Groups/updateGroup.php" dmx-on:unauthorized="notifies1.warning('Impossible de sauvegarder')"
dmx-on:error="notifies1.warning('Erreur de sauvegarde !')" dmx-on:success="listAllGroups.load({});id_empEdit.hide();notifies1.success('Modification sauvegardée !')"><input id="editType" name="editType"
class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].ctype" type="hidden">
<div class="form-group row" id="countercode"><label for="editcode" class="col-sm-2 col-form-label">N°</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="editcode" name="editCode" aria-describedby="input1_help" placeholder="Code compteur" required="" dmx-bind:disabled="editType.value+'==0'"
dmx-bind:value="getCounterToEdit.data.getCounterList[0].code">
</div>
</div>
<div class="form-group row" id="counterlabel"><label for="id_filterprenom" class="col-sm-2 col-form-label">Label</label>
<div class="col-sm-10">
<input id="editlabel" name="editLabel" type="text" class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].name">
</div>
</div>
<div class="form-group row" id="countershortlabel">
<label for="editshortlabel" class="col-sm-2 col-form-label">Abrégé</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="editshortlabel" name="editShrotLabel" aria-describedby="input1_help" placeholder="Enter some text"
dmx-bind:value="getCounterToEdit.data.getCounterList[0].sname">
</div>
</div>
<div class="form-group row" id="counterunit">
<label for="editunit" class="col-sm-2 col-form-label">Unité</label>
<div class="col-sm-10">
<select id="editunit" class="form-control" name="editUnit" dmx-bind:value="getCounterToEdit.data.getCounterList[0].unit">
<option value="0">0</option>
<option value="1">0.0</option>
<option value="2">0.00</option>
<option value="3">0.000</option>
<option value="4">HH:MM</option>
<option value="5">HHhMM</option>
<option value="6">CtsH</option>
<option value="7">Minutes</option>
</select>
<small id="select1Help" class="form-text text-muted">Unité d'affichage du compteur</small>
</div>
</div>
</form>
</div>
<div class="tab-pane fade mt-2" id="navTabs1_2" role="tabpanel">
<form id="form_editCounter2" method="post">
<div class="form-group row" id="countervisibilityday">
<label for="editVisibilityDay" class="col-sm-2 col-form-label">Jour</label>
<div class="col-sm-10">
<select id="editVisibilityDay" class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].display_1.substr(0, 1)">
<option value="0">Aucune</option>
<option value="1">Toujours</option>
<option value="2">Si diff. 0.</option>
</select>
</div>
</div>
<div class="form-group row" id="countervisibilityweek"><label for="editVisibilityWeek" class="col-sm-2 col-form-label">Semaine</label>
<div class="col-sm-10">
<select id="editVisibilityWeek" class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].display_1.substr(1, 1)">
<option value="0">Aucune</option>
<option value="1">Toujours</option>
<option value="2">Si diff. 0.</option>
</select>
</div>
</div>
<div class="form-group row" id="countervisibilityMonth"><label for="editVisibilityMonth" class="col-sm-2 col-form-label">Mois</label>
<div class="col-sm-10">
<select id="editVisibilityMonth" class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].display_1.substr(2, 1)">
<option value="0">Aucune</option>
<option value="1">Toujours</option>
<option value="2">Si diff. 0.</option>
</select>
</div>
</div>
<div class="form-group row" id="countervisibilityYear"><label for="editVisibilityYear" class="col-sm-2 col-form-label">Année</label>
<div class="col-sm-10">
<select id="editVisibilityYear" class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].display_1.substr(3, 1)">
<option value="0">Aucune</option>
<option value="1">Toujours</option>
<option value="2">Si diff. 0.</option>
</select>
</div>
</div>
<div class="form-group row" id="countervisibilityDetail"><label for="editVisibilityDetail" class="col-sm-2 col-form-label">Détail</label>
<div class="col-sm-10">
<select id="editVisibilityDetail" class="form-control" dmx-bind:value="getCounterToEdit.data.getCounterList[0].display_1.substr(4, 1)">
<option value="0">Aucune</option>
<option value="1">Toujours</option>
<option value="2">Si diff. 0.</option>
</select>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="navTabs1_3" role="tabpanel">
</div>
</div>
</div>
</form>Your code is wrong.
In HTML it is not allowed to nest forms inside forms. You need to use only ONE form tag - not nest them like that…
Not sure what are you trying to achieve there.
my god, you’re rigth.
I must confess that i made several modifications of my form during design phase and i forgot to delete this old one which was nicely hidden in design view.
many thank’s !
And i found another pb, i have just forgottten to give a name to my input fields…it’s time to take a rest…