Formit Select Fields not retaining data if it doesn't pass validation. All other fields retained on form

scanlam · August 30, 2023, 4:54pm

Hi everyone!
Everything in my form is working EXCEPT when I choose a select (drop down), if the form data doesn’t pass validation, it keeps all my other data, EXCEPT the select (drop down) options.

[[!FormIt?
&hooks=`spam,email,redirect`
&emailTpl=`RegionalTechnologyRequestEmail` 
&emailTo=`eservices@halifax.ca,stonet@halifax.ca` 
&emailCC=`[[+mail]]` 
&emailSubject=`Regional Technology Booking Request` 
&redirectTo=`3428` 
&validate=`staff:required,
staffbarcode:required,
mail:required,
branch:required,
dte:required,
instructions:required`
&validationErrorMessage=`A required field is missing. Your form has not been submitted. Please make sure you have completed all the required fields.`
&submitVar=`form-submit`]] 

[[!+fi.validation_error_message:notempty=`<p style="color: #fff;
    background-color: red;
    font-size: 18px;
    margin-top: 8px;
    border-radius: 4px;
    display: inline-block;
    width: auto;
    padding: 18px"><strong>Attention: [[!+fi.validation_error_message]]</strong></p>`]] 

<form action="[[~[[*id]]]]" method="post" class="form"> 

<input type="hidden" name="nospam" value=""/> 
<hr> 
<h2 style="background-color: #F7CB50;
    color: #000;
    font-weight: 800;
    padding: 2px 10px 2px 10px;
    text-transform: none;
    line-height: 42px;
    display: inline">Your Request</h2>

        <p style="align-items: center;
    justify-content: center; display: flex;
    color: #fff;
    background-color: #1A405F;
    margin-top: 8px;
    border-radius: 4px;
    background-size: 0.875em;
    background-position: 0.375em;
    background-repeat: no-repeat;
    display: inline-block;
    width: auto;
	padding-left: 10px;
    padding-top: 10px;
	padding-bottom: 10px"><strong>iPad Kits will not be automatically booked for tech requiring a device to operate. We prefer you to use the Kiosk iPads in your branch, but you can also borrow iPads using the form below.</strong> </p>


<p>Choose the number of kits from the drop down menu for the items you would like to request only:</p>
<select name="twist" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px">
 <option value=""> </option> 
 <option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
 </select> 
 <label> Code-a-Pillar Twist </label> 
 <br /><br /> 

<select name="codey" value="[[!+fi.numbers]]"style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px">
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> </select> 
<label> Codey Rocky</label><br /> 
<div style="padding-left:50px"><i style="color:#0067b3">iPads required. Use branch tech kiosk iPads (preferred) or book an iPad kit.</i></div> 
<br />

<select name="cricut" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> <option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label> Cricut Explore Air 2</label><br /> 
<div style="padding-left:50px"><i style="color:#0067b3">Computer(s) or iPad(s) required. Computer(s) not provided. Use branch tech kiosk iPads (preferred) or book an iPad kit.</i> </div> 
<br />

<select name="cue" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
</select> 
<label> Cue Robots</label><br /> 
<div style="padding-left:50px"><i style="color:#0067b3">iPads required. Use branch tech kiosk iPads (preferred) or book an iPad kit.</i></div> 
<br />

<select name="dash" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label> Dash Robots</label><br /> 
<div style="padding-left:50px"><i style="color:#0067b3">iPads required. Use branch tech kiosk iPads (preferred) or book an iPad kit.</i></div> 
<br />

<select name="green" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> <option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> </select> 
<label> Green Screen </label> <br /> <br /> 

<select name="ipad" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> 
<option value="3" [[!+fi.numbers:FormItIsSelected=`3`]]>3</option> 
<option value="4" [[!+fi.numbers:FormItIsSelected=`4`]]>4</option> 
<option value="5" [[!+fi.numbers:FormItIsSelected=`5`]]>5</option> </select>
<label> iPad </label> <br /> <br /> 

<select name="eread" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> </select> 
<label> Kobo E-reader </label> <br /> <br /> 

<select name="spike" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> 
<option value="3" [[!+fi.numbers:FormItIsSelected=`3`]]>3</option> </select> 
<label> Lego Spike Prime</label><br/>
<div style="padding-left:50px"><i style="color:#0067b3">Computer(s) or iPad(s) required. Computer(s) not provided. Use branch tech kiosk iPads (preferred) or book an iPad kit.</i></div> 
<br />

<select name="mac" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> </select> 
<label> MacBook Pro </label> <br /> <br /> 

<select name="mifi" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label> Mobile Hotspot </label> 
<br /> <br /> 

<select name="switch" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label> Nintendo Switch </label> 
<br /> <br /> 

<select name="quest" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> 
<option value="3" [[!+fi.numbers:FormItIsSelected=`3`]]>3</option> 
<option value="4" [[!+fi.numbers:FormItIsSelected=`4`]]>4</option> </select> 
<label> Oculus Quest 2 </label> 
<br /> <br /> 

<select name="ozobot" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label>Ozobot Evo<br /></label> 
<div style="padding-left:50px"><i style="color:#0067b3">iPads optional. Use branch tech kiosk iPads (preferred) or book an iPad kit.</i> </div> 
<br />

<select name="playstation" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label> Playstation 5 </label> 
<br /> <br /> 

<select name="rode" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> 
<option value="2" [[!+fi.numbers:FormItIsSelected=`2`]]>2</option> </select> 
<label> Podcast </label> 
<br /> <br /> 

<select name="snap" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> </select>
<label> Snap Circuits Junior </label> <br /> <br /> 

<select name="sphero" value="[[!+fi.numbers]]" style="padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value=""> </option> 
<option value="1" [[!+fi.numbers:FormItIsSelected=`1`]]>1</option> </select> 
<label> Sphero SPRK Robots </label><br />
<div style="padding-left:50px"><i style="color:#0067b3">Computer(s) or iPad(s) required. Use branch tech kiosk iPads (preferred) or book an iPad kit. Computer(s) not provided.</i></div> 
<br />

<hr>
<h2 style="background-color: #F7CB50;
    color: #000;
    font-weight: 800;
    padding: 2px 10px 2px 10px;
    text-transform: none;
    line-height: 42px;
    display: inline">Your Information</h2>

<p><small><strong><em style="color: #f32b0b">* indicates a required field</em></strong></small></p> 

<label for="staff"> <b><span style="color: red">* </span>First &amp; Last Name</b> 
<span class="error" style="color:red"><br/><strong>[[!+fi.error.staff]]</strong></span>
 </label> <input type="text" name="staff" id="staff" value="[[!+fi.staff]]" style="width: 100%;
 padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px;"/> 

<br /> <br /> 

<label for="staffbarcode"> <b><span style="color: red">* </span>Programming Card Barcode</b> 
<span class="error" style="color:red"><br/><strong>[[!+fi.error.staffbarcode]]</strong></span>
 </label> <input type="text" name="staffbarcode" id="staffbarcode" value="[[!+fi.staffbarcode]]" style="width: 100%;
 padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px;"/> 

<br /> <br /> 

<label for="mail"> 
<b><span style="color: red">* </span>Email Address</b> 
<span class="error" style="color:red"><br/><strong>[[!+fi.error.mail]]</strong></span>
</label> <input type="text" name="mail" id="mail" value="[[!+fi.mail]]" style="width: 100%;
 padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px;"/> <br /> <br /> 

<hr> 

<h2 style="background-color: #F7CB50;
    color: #000;
    font-weight: 800;
    padding: 2px 10px 2px 10px;
    text-transform: none;
    line-height: 42px;
    display: inline">Delivery Information</h2>
	<br/>
<br/>
<label for="branch"> 
<b><span style="color: red">* </span>
Branch to deliver to</b>
<span class="error" style="color:red"><br/><strong>[[!+fi.error.branch]]</strong></span>
</label>

<select name="branch" value="[[!+fi.branch]]" style="font-family: Arial, Helvetica, sans-serif;
 font-size: 1em;
 width: 100%;
 padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"> 
<option value="" [[!+fi.branch:FormItIsSelected=``]] ></option> 
<option value="Alderney Gate" [[!+fi.branch:FormItIsSelected=`AlderneyGate`]] >Alderney Gate</option> 
<option value="Bedford" [[!+fi.branch:FormItIsSelected=`Bedford`]]>Bedford</option> 
<option value="Captain William Spry" [[!+fi.branch:FormItIsSelected=`CaptainWilliamSpry`]]>Captain William Spry</option> 
<option value="Central" [[!+fi.branch:FormItIsSelected=`Central`]]>Central</option> 
<option value="Cole Harbour" [[!+fi.branch:FormItIsSelected=`ColeHarbour`]]>Cole Harbour</option> 
<option value="Dartmouth North" [[!+fi.branch:FormItIsSelected=`DartmouthNorth`]]>Dartmouth North</option> 
<option value="Halifax North" [[!+fi.branch:FormItIsSelected=`HalifaxNorth`]]>Halifax North</option> 
<option value="J. D. Shatford" [[!+fi.branch:FormItIsSelected=`JDShatford`]]>J. D. Shatford</option> 
<option value="Keshen Goodman" [[!+fi.branch:FormItIsSelected=`KeshenGoodman`]]>Keshen Goodman</option> 
<option value="Musquodoboit Harbour" [[!+fi.branch:FormItIsSelected=`MusquodoboitHarbour`]]>Musquodoboit Harbour</option> 
<option value="Preston Township Library Office" [[!+fi.branch:FormItIsSelected=`PrestonTownship`]]>Musquodoboit Valley Library Office</option> 
<option value="Preston Township Library Office" [[!+fi.branch:FormItIsSelected=`PrestonTownship`]]>Preston Township Library Office</option> 
<option value="Sackville" [[!+fi.branch:FormItIsSelected=`Sackville`]]>Sackville</option> 
<option value="Sheet Harbour" [[!+fi.branch:FormItIsSelected=`SheetHarbour`]]>Sheet Harbour</option> 
<option value="Tantallon" [[!+fi.branch:FormItIsSelected=`Tantallon`]]>Tantallon</option> 
<option value="Woodlawn" [[!+fi.branch:FormItIsSelected=`Woodlawn`]]>Woodlawn</option> </select> 

<br /><br /> 

<label for="dte"> 
<b><span style="color: red">* </span>
Specific Date of Program</b> 
<br/>Please enter your program date, <u>not</u> the date you would like to have the equipment by. Our team will factor in delivery time to ensure your equipment arrives a few days before your program.
<span class="error" style="color:red"><br/><strong>[[!+fi.error.dte]]</strong></span> 
</label> 
<input type="date" name="dte" id="dte" value="[[!+fi.dte]]" style="width: 100%;
 padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px"/> 
<br /> <br />

<hr> 

<h2 style="background-color: #F7CB50;
    color: #000;
    font-weight: 800;
    padding: 2px 10px 2px 10px;
    text-transform: none;
    line-height: 42px;
    display: inline">Terms of Use</h2>
	<br/>
<ul> 
<li>I will use Horizon to check equipment out on my programming card when it arrives at my branch.</li> 
<li>I will use Horizon to check equipment in after my program and make sure it is sent to the appropriate location.</li> 
</ul> 

<label for="instructions"><span style="color: red">* </span><strong>Enter your initials to indicate that you have read and understood the Terms of Use:</strong><span class="error" style="color:red"><br/><strong>[[!+fi.error.instructions]]</strong></span>  </label> <input type="text" name="instructions" id="instructions" value="[[!+fi.instructions]]" style="width: 100%;
 padding: 5px 5px;
 margin: 3px 0;
 box-sizing: border-box;
 border: 1px solid grey;
 border-radius: 4px;
"/> 

<br /><br /> 

<hr> 

<br /> 
<div> 
<button type="submit" class="btn btn-default" value="Submit" name="form-submit" style="font-size:18px;
 padding:10px">Submit Request</button> 
 </div> 
 </form>

jako · August 30, 2023, 7:06pm

The name attribute of the select is different than the FormIt placeholders. You have to use i.e. fi.cue instead of fi.numbers. And the select tag itself doesn’t have a value attribute. Only the option tags inside.

scanlam · August 30, 2023, 11:13pm

Thanks so much for your response!
I’m almost there. This is the bit that still isn’t being retained when there’s a validation error: (I took out most of the branches and inline CSS to make it easier to read.

<label for="branch"> 
<strong><span style="color: red">* </span>
Branch to deliver to</strong>
<span class="error" style="color:red"><br/><strong>[[!+fi.error.branch]]</strong></span>
</label>
<select name="branch" value="[[!+fi.branch]]"> 
<option value="" [[!+fi.branch:FormItIsSelected=``]] ></option> 
<option value="Alderney Gate" [[!+fi.branch:FormItIsSelected=`AlderneyGate`]] >Alderney Gate</option> 
<option value="Woodlawn" [[!+fi.branch:FormItIsSelected=`Woodlawn`]]>Woodlawn</option> </select>

halftrainedharry · August 31, 2023, 7:30am

There is a space in the value attribute of the option (Alderney Gate) and no space in the options property of the “FormItIsSelected” output modifier (AlderneyGate).
These two values have to be identical.

scanlam · September 1, 2023, 12:56am

I fixed the values being retained on the form. Thank you all so much!

I have one last little thing related to it. I want my email to say Alderney Gate (with a space), not AlderneyGate (without a space). I’m currently using [[branch]] in the email. Can’t figure out what I’m doing wrong!

<label for="branch"> 
<strong><span style="color: red">* </span>
Branch to deliver to</strong>
<span class="error" style="color:red"><br/><strong>[[!+fi.error.branch]]</strong></span>
</label>
<select name="branch" value="[[!+fi.branch]]"> 
<option value="" [[!+fi.branch:FormItIsSelected=``]] ></option> 
<option value="AlderneyGate" [[!+fi.branch:FormItIsSelected=`AlderneyGate`]] >Alderney Gate</option>

halftrainedharry · September 1, 2023, 8:51pm

Change <option value="AlderneyGate" [[!+fi.branch:FormItIsSelected=`AlderneyGate`]]> to <option value="Alderney Gate" [[!+fi.branch:FormItIsSelected=`Alderney Gate`]]>

Use a placeholder (with a +) → [[+branch]]

You don’t need a value attribute in the <select> tag.

system · September 3, 2023, 8:51pm

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.