The question:
... for the "RADIO BUTTONS" neither form work for radio button examples - they will not remember the selected radio button value if there is an error in the form, for example, when the form user forgets to fill in a required field or forgets the recaptcha. your form DOES remember the values of textboxes but not radio buttons. do you know how to fix that?
The Answer
The following FormLister form template is extremely simple, there is no styling whatsoever, it's for tutorial use only.
The form has been built up using elements from other FormLister tutorials found here in this forum.
Validation rules etc. will not be added, this tutorial is only for one FormLister parameter.
Form example
[+form.messages+]
<form method="post" action="[~[*id*]~]">
<input type="hidden" name="formid" value="BasicContactForm">
<!-- Form of Address -->
<div>
<label>Title
<select name="formofaddress" id="formofaddress">
<option [+s.formofaddress.Please Choose+] value="Please Choose" selected disabled>Please Choose:</option>
<option [+s.formofaddress.Mr+] value="Mr">Mr</option>
<option [+s.formofaddress.Mrs+] value="Mrs">Mrs</option>
<option [+s.formofaddress.Miss+] value="Miss">Miss</option>
<option [+s.formofaddress.Ms+] value="Ms">Ms</option>
<option [+s.formofaddress.Dr+] value="Dr">Dr</option>
<option [+s.formofaddress.Professor+] value="Professor">Professor</option>
<option [+s.formofaddress.Other+] value="Other">Other</option>
</select>
</label>
</div>
<!-- Name -->
<div>
<label for="name">Name
<input type="text" name="name" id="name" placeholder="Your Name" value="[+name.value+]">
</label>
</div>
<!-- Email -->
<div>
<label for="email">Email
<input type="email" name="email" id="email" placeholder="Email Address" value="[+email.value+]">
</label>
</div>
<!-- Phone -->
<div>
<label for="phone">Phone
<input type="tel" name="phone" id="phone" placeholder="Only Enter Numbers" value="[+phone.value+]">
</label>
</div>
<!-- Subject -->
<div>
<label for="subject">Subject
<input type="text" name="subject" id="subject" placeholder="Subject" value="[+subject.value+]">
</label>
</div>
<!-- Points of Interest -->
<div>
<label for="poi">Points of Interest
<select name="poi[]" id="poi" multiple="multiple">
<option [+s.poi.interest-1+] value="interest-1">Interest 1</option>
<option [+s.poi.interest-2+] value="interest-2">Interest 2</option>
<option [+s.poi.interest-3+] value="interest-3">Interest 3</option>
<option [+s.poi.interest-4+] value="interest-4">Interest 4</option>
<option [+s.poi.interest-5+] value="interest-5">Interest 5</option>
</select>
</label>
</div>
<!-- Message -->
<div>
<label for="message">Message
<textarea name="message" id="message" placeholder="Type Your Message Here">[+message.value+]</textarea>
</label>
</div>
<!-- Callback -->
<div>
<label for="male">Request a Callback
<input type="radio" name="callback" id="callback" value="Please Call Me Back" [+c.callback.Please Call Me Back+]>
</label>
</div>
<!-- Terms -->
<div>
<label for="accept">Accept Terms
<input type="checkbox" name="acceptterms" id="acceptterms" value="I Accept" [+c.accept.I Accept+]>
</label>
</div>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
The form above is probably not much different to the one you already have, so adding the FormLister parameter will be easy.
The FormLister Parameter
&formControls=``
All you need to do is add the formcontrols parameter, as seen above, to your own FormLister call e.g:
[!FormLister?
&formControls=``
...
!]
Now you have to add the fields that you want to be remembered, when and if the user makes a mistake in the form and has to re-submit it.
From the form above, we will add all of the "select" tags, and both the "check" & "radio" input tags.
[!FormLister?
&formControls=`formofaddress,poi,callback,acceptterms`
...
!]
Normal input tags like textarea, text etc. are remembered per default and don't need adding to the formcontrols parameter.
Important Notes
If you pre-populate multiple select options directly with Doclister, the options won't be remembered, even if you add the field to the formcontrols parameter.
For more information, please take a look at the "Create Multiple Select Options Using Doclister" tutorial.
