Hello to all,
I am trying to make a multi-steps form. I am following the tutorial exactly as is. My problem is probably with the variable. When I finish my form all the steps keeps open. All the btn works. In the variable I am set the value to 1 and them in the dynamic event of each bottom I placed the variable value + 1, them in the dynamic attributes in each row I placed the variable value ==1, ==2, … Someone had the same problem that may give some light.
Thanks
Alex
1 Like
Without seeing more of how you have things set up, I can spot one potential issue.
Are you doing ==1 or == 1 (note the space) ?
in boths way, ==1 and == 1. Also in the btn I’m putting +1 and + 1
I mean, I tried in boths ways
Please post your code, wrapped in three bacticks: ```
<body is="dmx-app" id="entradaform">
<dmx-value id="steps" dmx-bind:value="1"></dmx-value>
<header>
<div class="container text-center">
<img src="assets/images/logopmsc.png" width="300" height="300" class="img-fluid img-thumbnail rounded">
</div>
</header>
<div class="container-xl">
<form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="dmxConnect/api/insertarmembresia.php" dmx-generator="bootstrap4" dmx-form-type="horizontal">
<div class="row row-cols-12" dmx-show="steps.value+' == 1'">
<div class="col-6">
<div class="form-group row">
<label for="inp_CARDID" class="col-sm-2 col-form-label">Card ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inp_CARDID" name="CARDID" aria-describedby="inp_CARDID_help" placeholder="ID de la tarjeta">
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="inp_IDSYS" class="col-sm-2 col-form-label col pl-3 pr-0">ID Sistema</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inp_IDSYS" name="IDSYS" aria-describedby="inp_IDSYS_help" placeholder="Enter ID Sistema">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="inp_SPONSOR" class="col-sm-2 col-form-label">Sponsor</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inp_SPONSOR" name="SPONSOR" aria-describedby="inp_SPONSOR_help" placeholder="Sponsor">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_RELATONSHP" class="col-sm-2 col-form-label">Relación</label>
<div class="offset-1 col-sm-4">
<input type="text" class="form-control" id="inp_RELATONSHP" name="RELATONSHP" aria-describedby="inp_RELATONSHP_help" value="01">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_NOMBRE" class="col-sm-2 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inp_NOMBRE" name="NOMBRE" aria-describedby="inp_NOMBRE_help" placeholder="Nombre del miembro">
</div>
</div>
</div>
<div class="col-2">
<div class="form-group row">
<label for="inp_INICIAL" class="col-sm-2 col-form-label">Inicial</label>
<div class="col-sm-5 offset-1">
<input type="text" class="form-control" id="inp_INICIAL" name="INICIAL" aria-describedby="inp_INICIAL_help">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_APELLIDOS" class="col-sm-2 col-form-label ml-n5 pl-1 pr-0">Apellidos</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="inp_APELLIDOS" name="APELLIDOS" aria-describedby="inp_APELLIDOS_help" placeholder="Apellidos">
</div>
</div>
</div>
<button id="btn1" class="btn btn-success btn-lg text-center font-weight-bolder font-italic" dmx-on:click="steps.setValue(steps.value+' + 1')" dmx-bind:disabled="'!'+inp_CARDID.value">SIGUIENTE</button>
</div>
<div class="row" dmx-show="steps.value+' == 2'">
<div class="col-6">
<div class="form-group row">
<label for="inp_DIRECCION" class="col-sm-2 col-form-label">Dirección</label>
<div class="col-sm-10">
<input type="text" class="form-control ml-auto mr-auto" id="inp_DIRECCION" name="DIRECCION" aria-describedby="inp_DIRECCION_help" placeholder="Entre la primera parte de la dirección">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="inp_DIRECCION2" class="col-sm-2 col-form-label ml-n1 mr-n4 pl-0">Dirección</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inp_DIRECCION2" name="DIRECCION2" aria-describedby="inp_DIRECCION2_help" placeholder="Entre el resto de la dirección">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_CIUDAD" class="col-sm-2 col-form-label">Ciudad</label>
<div class="col-sm-10">
<select id="inp_CIUDAD" class="form-control" name="CIUDAD">
<option value="ADJUNTAS">ADJUNTAS</option>
<option value="AGUADA">AGUADA</option>
<option value="AGUADILLA">AGUADILLA</option>
<option value="AGUAS BUENAS">AGUAS BUENAS</option>
<option value="AIBONITO">AIBONITO</option>
<option value="ARECIBO">ARECIBO</option>
<option value="ARROYO">ARROYO</option>
<option value="AÑASCO">AÑASCO</option>
<option value="BARCELONETA">BARCELONETA</option>
<option value="BARRANQUITAS">BARRANQUITAS</option>
<option value="BAYAMON">BAYAMON</option>
<option value="CABO ROJO">CABO ROJO</option>
<option value="CAGUAS">CAGUAS</option>
<option value="CAMUY">CAMUY</option>
<option value="CANOVANAS">CANOVANAS</option>
<option value="CAROLINA">CAROLINA</option>
<option value="CATAÑO">CATAÑO</option>
<option value="CAYEY">CAYEY</option>
<option value="CEIBA">CEIBA</option>
<option value="CIALES">CIALES</option>
<option value="CIDRA">CIDRA</option>
<option value="COAMO">COAMO</option>
<option value="COMERIO">COMERIO</option>
<option value="COROZAL">COROZAL</option>
<option value="CULEBRA">CULEBRA</option>
<option value="DORADO">DORADO</option>
<option value="FAJARDO">FAJARDO</option>
<option value="FLORIDA">FLORIDA</option>
<option value="GUAYAMA">GUAYAMA</option>
<option value="GUAYANILLA">GUAYANILLA</option>
<option value="GUAYNABO">GUAYNABO</option>
<option value="GURABO">GURABO</option>
<option value="GUANICA">GUANICA</option>
<option value="HATILLO">HATILLO</option>
<option value="HORMIGUEROS">HORMIGUEROS</option>
<option value="HUMACAO">HUMACAO</option>
<option value="ISABELA">ISABELA</option>
<option value="JAYUYA">JAYUYA</option>
<option value="JUANA DIAZ">JUANA DIAZ</option>
<option value="JUNCOS">JUNCOS</option>
<option value="LAJAS">LAJAS</option>
<option value="LARES">LARES</option>
<option value="LAS MARIAS">LAS MARIAS</option>
<option value="LAS PIEDRAS">LAS PIEDRAS</option>
<option value="LOIZA">LOIZA</option>
<option value="LUQUILLO">LUQUILLO</option>
<option value="MANATI">MANATI</option>
<option value="MARICAO">MARICAO</option>
<option value="MAUNABO">MAUNABO</option>
<option value="MAYAGUEZ">MAYAGUEZ</option>
<option value="MOCA">MOCA</option>
<option value="MOROVIS">MOROVIS</option>
<option value="NAGUABO">NAGUABO</option>
<option value="NARANJITO">NARANJITO</option>
<option value="OROCOVIS">OROCOVIS</option>
<option value="PATILLAS">PATILLAS</option>
<option value="PEÑUELA">PEÑUELA</option>
<option value="PONCE">PONCE</option>
<option value="QUEBRADILLAS">QUEBRADILLAS</option>
<option value="RINCON">RINCON</option>
<option value="RIO GRANDE">RIO GRANDE</option>
<option value="SABANA GRANDE">SABANA GRANDE</option>
<option value="SALINAS">SALINAS</option>
<option value="SAN GERMAN">SAN GERMAN</option>
<option value="SAN JUAN">SAN JUAN</option>
<option value="SAN LORENZO">SAN LORENZO</option>
<option value="SAN SEBASTIAN">SAN SEBASTIAN</option>
<option value="SANTA ISABEL">SANTA ISABEL</option>
<option value="TOA ALTA">TOA ALTA</option>
<option value="TOA BAJA">TOA BAJA</option>
<option value="TRUJILLO ALTO">TRUIJILLO ALTO</option>
<option value="UTUADO">UTUADO</option>
<option value="VEGA ALTA">VEGA ALTA</option>
<option value="VEGA BAJA">VEGA BAJA</option>
<option value="VIEQUES">VIEQUES</option>
<option value="VILLALBA">VILLALBA</option>
<option value="YABUCOA">YABUCOA</option>
<option value="YAUCO">YAUCO</option>
</select>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group row">
<label for="inp_ESTADO" class="col-sm-2 col-form-label">Estado</label>
<div class="col-sm-8 offset-2">
<input type="text" class="form-control" id="inp_ESTADO" name="ESTADO" aria-describedby="inp_ESTADO_help" value="PR">
</div>
</div>
</div>
<div class="col-5">
<div class="form-group row">
<label for="inp_ZIPCODE" class="col-sm-2 col-form-label">Zipcode</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="inp_ZIPCODE" name="ZIPCODE" aria-describedby="inp_ZIPCODE_help" placeholder="Recuerda colocar los 0">
</div>
</div>
</div>
<button id="btn3" class="btn btn-primary btn-lg text-center font-weight-bolder font-italic" dmx-on:click="steps.setValue(steps.value+' -1')">REGRESAR</button><button id="btn2"
class="btn btn-success btn-lg text-center font-weight-bolder font-italic ml-auto mr-0" dmx-on:click="steps.setValue(steps.value+' + 1')" dmx-bind:disabled="'!'+inp_DIRECCION.value">SIGUIENTE</button>
</div>
<div class="row" dmx-show="steps.value+' == 3'">
<div class="col-12">
<div class="form-group row">
<label for="inp_GENERO" class="col-sm-2 col-form-label">Genero</label>
<div class="col-sm-2">
<select id="inp_GENERO" class="form-control" name="GENERO">
<option value=""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_DOB" class="col-sm-2 col-form-label">DOB</label>
<div class="col-sm-3 text-center">
<input type="date" class="form-control" id="inp_DOB" name="DOB" aria-describedby="inp_DOB_help">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_STATUS" class="col-sm-2 col-form-label">Status</label>
<div class="col-sm-1">
<select id="inp_STATUS" class="form-control" name="STATUS">
<option value="A">A</option>
<option value="T">T</option>
<option value="C">C</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_TELEFONO" class="col-sm-2 col-form-label">Telefono</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inp_TELEFONO" name="TELEFONO" aria-describedby="inp_TELEFONO_help" placeholder="ENTRAR TELEFONO">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_TELEFONO2" class="col-sm-2 col-form-label">Telefono 2</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inp_TELEFONO2" name="TELEFONO2" aria-describedby="inp_TELEFONO2_help" placeholder="ENTRAR TELEFONO 2">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_EMAIL" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inp_EMAIL" name="EMAIL" aria-describedby="inp_EMAIL_help" placeholder="ENTRE EL CORREO ELECTRONICO">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_SS" class="col-sm-2 col-form-label">Seguro Soc.</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inp_SS" name="SS" aria-describedby="inp_SS_help" placeholder="ENTRE EL SS O LOS ULTIMOS 4">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_MOR" class="col-sm-2 col-form-label">M o R?</label>
<div class="col-sm-1">
<select id="inp_MOR" class="form-control" name="MOR">
<option value="M">M</option>
<option value="R">R</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_EFECTIVIDAD" class="col-sm-2 col-form-label">Efectividad</label>
<div class="col-sm-3">
<input type="date" class="form-control" id="inp_EFECTIVIDAD" name="EFECTIVIDAD" aria-describedby="inp_EFECTIVIDAD_help" placeholder="Enter Efectividad">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_HOSPITALIZACION" class="col-sm-2 col-form-label">Hospitalizacion</label>
<div class="col-sm-1">
<select id="inp_HOSPITALIZACION" class="form-control" name="HOSPITALIZACION">
<option value="N">N</option>
<option value="I">I</option>
<option value="P">P</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
<button id="btn4" class="btn btn-primary btn-lg text-center font-weight-bolder font-italic" dmx-on:click="steps.setValue(steps.value+' -1')">REGRESAR</button>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-success text-center font-weight-bolder font-italic btn-lg mt-4">Guardar</button>
</div>
</div>
</form>
</div>
<script src="bootstrap/4/js/popper.min.js"></script>
<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>
At first look (I’m on my phone) your expressions are wrong.
This
dmx-show="steps.value+' == 2'"
should be:
dmx-show="steps.value == 2'"
Excellent, I made the change directly in the code and works, now the row are hide but still a problem with the variable because the next bottom doesn’t work and and need to erase the ’ in the first row in order to show it. I will post the code
forget about the '. please look at the code. the first row is working but the next bottom doesn’t
<body is="dmx-app" id="entradaform">
<dmx-value id="steps" dmx-bind:value="1"></dmx-value>
<header>
<div class="container text-center">
<img src="assets/images/logopmsc.png" width="300" height="300" class="img-fluid img-thumbnail rounded">
</div>
</header>
<div class="container-xl">
<form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="dmxConnect/api/insertarmembresia.php" dmx-generator="bootstrap4" dmx-form-type="horizontal">
<div class="row row-cols-12" dmx-show="'steps.value == 1'">
<div class="col-6">
<div class="form-group row">
<label for="inp_CARDID" class="col-sm-2 col-form-label">Card ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inp_CARDID" name="CARDID" aria-describedby="inp_CARDID_help" placeholder="ID de la tarjeta">
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label for="inp_IDSYS" class="col-sm-2 col-form-label col pl-3 pr-0">ID Sistema</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inp_IDSYS" name="IDSYS" aria-describedby="inp_IDSYS_help" placeholder="Enter ID Sistema">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="inp_SPONSOR" class="col-sm-2 col-form-label">Sponsor</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inp_SPONSOR" name="SPONSOR" aria-describedby="inp_SPONSOR_help" placeholder="Sponsor">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_RELATONSHP" class="col-sm-2 col-form-label">Relación</label>
<div class="offset-1 col-sm-4">
<input type="text" class="form-control" id="inp_RELATONSHP" name="RELATONSHP" aria-describedby="inp_RELATONSHP_help" value="01">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_NOMBRE" class="col-sm-2 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inp_NOMBRE" name="NOMBRE" aria-describedby="inp_NOMBRE_help" placeholder="Nombre del miembro">
</div>
</div>
</div>
<div class="col-2">
<div class="form-group row">
<label for="inp_INICIAL" class="col-sm-2 col-form-label">Inicial</label>
<div class="col-sm-5 offset-1">
<input type="text" class="form-control" id="inp_INICIAL" name="INICIAL" aria-describedby="inp_INICIAL_help">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_APELLIDOS" class="col-sm-2 col-form-label ml-n5 pl-1 pr-0">Apellidos</label>
<div class="col-sm-11">
<input type="text" class="form-control" id="inp_APELLIDOS" name="APELLIDOS" aria-describedby="inp_APELLIDOS_help" placeholder="Apellidos">
</div>
</div>
</div>
<button id="btn1" class="btn btn-success btn-lg text-center font-weight-bolder font-italic" dmx-on:click="steps.setValue(steps.value+'+ 1')" dmx-bind:disabled="inp_CARDID.value">SIGUIENTE</button>
</div>
<div class="row" dmx-show="steps.value == 2'">
<div class="col-6">
<div class="form-group row">
<label for="inp_DIRECCION" class="col-sm-2 col-form-label">Dirección</label>
<div class="col-sm-10">
<input type="text" class="form-control ml-auto mr-auto" id="inp_DIRECCION" name="DIRECCION" aria-describedby="inp_DIRECCION_help" placeholder="Entre la primera parte de la dirección">
</div>
</div>
</div>
<div class="col-6">
<div class="form-group row">
<label for="inp_DIRECCION2" class="col-sm-2 col-form-label ml-n1 mr-n4 pl-0">Dirección</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inp_DIRECCION2" name="DIRECCION2" aria-describedby="inp_DIRECCION2_help" placeholder="Entre el resto de la dirección">
</div>
</div>
</div>
<div class="col-4">
<div class="form-group row">
<label for="inp_CIUDAD" class="col-sm-2 col-form-label">Ciudad</label>
<div class="col-sm-10">
<select id="inp_CIUDAD" class="form-control" name="CIUDAD">
<option value="ADJUNTAS">ADJUNTAS</option>
<option value="AGUADA">AGUADA</option>
<option value="AGUADILLA">AGUADILLA</option>
<option value="AGUAS BUENAS">AGUAS BUENAS</option>
<option value="AIBONITO">AIBONITO</option>
<option value="ARECIBO">ARECIBO</option>
<option value="ARROYO">ARROYO</option>
<option value="AÑASCO">AÑASCO</option>
<option value="BARCELONETA">BARCELONETA</option>
<option value="BARRANQUITAS">BARRANQUITAS</option>
<option value="BAYAMON">BAYAMON</option>
<option value="CABO ROJO">CABO ROJO</option>
<option value="CAGUAS">CAGUAS</option>
<option value="CAMUY">CAMUY</option>
<option value="CANOVANAS">CANOVANAS</option>
<option value="CAROLINA">CAROLINA</option>
<option value="CATAÑO">CATAÑO</option>
<option value="CAYEY">CAYEY</option>
<option value="CEIBA">CEIBA</option>
<option value="CIALES">CIALES</option>
<option value="CIDRA">CIDRA</option>
<option value="COAMO">COAMO</option>
<option value="COMERIO">COMERIO</option>
<option value="COROZAL">COROZAL</option>
<option value="CULEBRA">CULEBRA</option>
<option value="DORADO">DORADO</option>
<option value="FAJARDO">FAJARDO</option>
<option value="FLORIDA">FLORIDA</option>
<option value="GUAYAMA">GUAYAMA</option>
<option value="GUAYANILLA">GUAYANILLA</option>
<option value="GUAYNABO">GUAYNABO</option>
<option value="GURABO">GURABO</option>
<option value="GUANICA">GUANICA</option>
<option value="HATILLO">HATILLO</option>
<option value="HORMIGUEROS">HORMIGUEROS</option>
<option value="HUMACAO">HUMACAO</option>
<option value="ISABELA">ISABELA</option>
<option value="JAYUYA">JAYUYA</option>
<option value="JUANA DIAZ">JUANA DIAZ</option>
<option value="JUNCOS">JUNCOS</option>
<option value="LAJAS">LAJAS</option>
<option value="LARES">LARES</option>
<option value="LAS MARIAS">LAS MARIAS</option>
<option value="LAS PIEDRAS">LAS PIEDRAS</option>
<option value="LOIZA">LOIZA</option>
<option value="LUQUILLO">LUQUILLO</option>
<option value="MANATI">MANATI</option>
<option value="MARICAO">MARICAO</option>
<option value="MAUNABO">MAUNABO</option>
<option value="MAYAGUEZ">MAYAGUEZ</option>
<option value="MOCA">MOCA</option>
<option value="MOROVIS">MOROVIS</option>
<option value="NAGUABO">NAGUABO</option>
<option value="NARANJITO">NARANJITO</option>
<option value="OROCOVIS">OROCOVIS</option>
<option value="PATILLAS">PATILLAS</option>
<option value="PEÑUELA">PEÑUELA</option>
<option value="PONCE">PONCE</option>
<option value="QUEBRADILLAS">QUEBRADILLAS</option>
<option value="RINCON">RINCON</option>
<option value="RIO GRANDE">RIO GRANDE</option>
<option value="SABANA GRANDE">SABANA GRANDE</option>
<option value="SALINAS">SALINAS</option>
<option value="SAN GERMAN">SAN GERMAN</option>
<option value="SAN JUAN">SAN JUAN</option>
<option value="SAN LORENZO">SAN LORENZO</option>
<option value="SAN SEBASTIAN">SAN SEBASTIAN</option>
<option value="SANTA ISABEL">SANTA ISABEL</option>
<option value="TOA ALTA">TOA ALTA</option>
<option value="TOA BAJA">TOA BAJA</option>
<option value="TRUJILLO ALTO">TRUIJILLO ALTO</option>
<option value="UTUADO">UTUADO</option>
<option value="VEGA ALTA">VEGA ALTA</option>
<option value="VEGA BAJA">VEGA BAJA</option>
<option value="VIEQUES">VIEQUES</option>
<option value="VILLALBA">VILLALBA</option>
<option value="YABUCOA">YABUCOA</option>
<option value="YAUCO">YAUCO</option>
</select>
</div>
</div>
</div>
<div class="col-2">
<div class="form-group row">
<label for="inp_ESTADO" class="col-sm-2 col-form-label">Estado</label>
<div class="col-sm-8 offset-2">
<input type="text" class="form-control" id="inp_ESTADO" name="ESTADO" aria-describedby="inp_ESTADO_help" value="PR">
</div>
</div>
</div>
<div class="col-5">
<div class="form-group row">
<label for="inp_ZIPCODE" class="col-sm-2 col-form-label">Zipcode</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="inp_ZIPCODE" name="ZIPCODE" aria-describedby="inp_ZIPCODE_help" placeholder="Recuerda colocar los 0">
</div>
</div>
</div>
<button id="btn3" class="btn btn-primary btn-lg text-center font-weight-bolder font-italic" dmx-on:click="steps.setValue(steps.value+' -1')">REGRESAR</button><button id="btn2"
class="btn btn-success btn-lg text-center font-weight-bolder font-italic ml-auto mr-0" dmx-on:click="steps.setValue(steps.value+'+ 1')" dmx-bind:disabled="'!'+inp_DIRECCION.value">SIGUIENTE</button>
</div>
<div class="row" dmx-show="steps.value == 3'">
<div class="col-12">
<div class="form-group row">
<label for="inp_GENERO" class="col-sm-2 col-form-label">Genero</label>
<div class="col-sm-2">
<select id="inp_GENERO" class="form-control" name="GENERO">
<option value=""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_DOB" class="col-sm-2 col-form-label">DOB</label>
<div class="col-sm-3 text-center">
<input type="date" class="form-control" id="inp_DOB" name="DOB" aria-describedby="inp_DOB_help">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_STATUS" class="col-sm-2 col-form-label">Status</label>
<div class="col-sm-1">
<select id="inp_STATUS" class="form-control" name="STATUS">
<option value="A">A</option>
<option value="T">T</option>
<option value="C">C</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_TELEFONO" class="col-sm-2 col-form-label">Telefono</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inp_TELEFONO" name="TELEFONO" aria-describedby="inp_TELEFONO_help" placeholder="ENTRAR TELEFONO">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_TELEFONO2" class="col-sm-2 col-form-label">Telefono 2</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inp_TELEFONO2" name="TELEFONO2" aria-describedby="inp_TELEFONO2_help" placeholder="ENTRAR TELEFONO 2">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_EMAIL" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inp_EMAIL" name="EMAIL" aria-describedby="inp_EMAIL_help" placeholder="ENTRE EL CORREO ELECTRONICO">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_SS" class="col-sm-2 col-form-label">Seguro Soc.</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inp_SS" name="SS" aria-describedby="inp_SS_help" placeholder="ENTRE EL SS O LOS ULTIMOS 4">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_MOR" class="col-sm-2 col-form-label">M o R?</label>
<div class="col-sm-1">
<select id="inp_MOR" class="form-control" name="MOR">
<option value="M">M</option>
<option value="R">R</option>
</select>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_EFECTIVIDAD" class="col-sm-2 col-form-label">Efectividad</label>
<div class="col-sm-3">
<input type="date" class="form-control" id="inp_EFECTIVIDAD" name="EFECTIVIDAD" aria-describedby="inp_EFECTIVIDAD_help" placeholder="Enter Efectividad">
</div>
</div>
</div>
<div class="col-12">
<div class="form-group row">
<label for="inp_HOSPITALIZACION" class="col-sm-2 col-form-label">Hospitalizacion</label>
<div class="col-sm-1">
<select id="inp_HOSPITALIZACION" class="form-control" name="HOSPITALIZACION">
<option value="N">N</option>
<option value="I">I</option>
<option value="P">P</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
<button id="btn4" class="btn btn-primary btn-lg text-center font-weight-bolder font-italic" dmx-on:click="steps.setValue(steps.value+' -1')">REGRESAR</button>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-success text-center font-weight-bolder font-italic btn-lg mt-4">Guardar</button>
</div>
</div>
</form>
</div>
<script src="bootstrap/4/js/popper.min.js"></script>
<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>
</html>
In case you are following the old tutorials and docs where it might mention to set the value in the input field in properties window, the functionality has changed. Since one of the updates some time ago, "expression" styling is in use. So if you type anything directly in properties window for dynamic attributes, events etc. its all treated as string. Hence the single quote.
What you need to do is open the picker, and select the code view and write your expression there.
With that, the result would look something like:
dmx-show="steps.value == 1"
This expression is something that DMX will be able to evaluate.
I see more such incorrect expressions in the code you have posted above.
Either remove the single quotes here from code view, or use the new method to set these values from the UI.
1 Like
It works, excellent. Thanks a lot.