Selecting Multiple Checkboxes Simoultaneously - FormIt

18 Posts

tavcorp Reply #1, 15 years, 5 months ago

I have a simple question on my formit that goes something like : "Which day of the week do you prefer?"

I have set up 5 checkboxes, each with a separate day of the week attached to it. If I select more than one, the email that I get back will only include one value - instead of all the values I’ve selected for the question. I’m wondering how I can get my emails to show all values that are selected. Here’s my code:

[[!FormIt?
   &hooks=`email,redirect,FormItAutoResponder`
   &emailTpl=`sentEmailTpl_appt`
   &emailSubject=`Contact Form`
   &emailTo=`........`
   &redirectTo=`12`
   &validate=`firstname:required:minLength=^2^,
      lastname:required,
      contact_email:email:required,
      patient:required,
      appt_day:required,
      appt_time:required,
      phone:required:maxLenth=^12^`
   &fiarTpl=`autoResponseTpl_appt`
   &fiarSubject=`Online Appointment Request`
   &fiarToField=`contact_email`
   &fiarFrom=`......`
   &fiarFromName=`.......`
]]

<input type="hidden" name="appt_day:required" value="" />

<label>Preferred day of the week?[[!+fi.error.appt_day]]</label>
<input type="checkbox" name="appt_day:required" value="monday" [[!+fi.appt_day:FormItIsChecked=`monday`]] > Monday 
<input type="checkbox" name="appt_day:required" value="tuesday" [[!+fi.appt_day:FormItIsChecked=`tuesday`]] > Tuesday 
<input type="checkbox" name="appt_day:required" value="wednesday" id="wednesday" [[!+fi.appt_day:FormItIsChecked=`wednesday`]] > Wednesday <br />
<input type="checkbox" name="appt_day:required" value="thursday"  id="thursday" [[!+fi.appt_day:FormItIsChecked=`thursday`]] > Thursday 
<input type="checkbox" name="appt_day:required" value="friday" id="friday" [[!+fi.appt_day:FormItIsChecked=`friday`]] > Friday 
<input type="checkbox" name="appt_day:required" value="no preference" id="none" [[!+fi.appt_day:FormItIsChecked=`no preference`]] > No Preference

I’d appreciate any sort of help. Thanks in advance.

☆ A M B ☆
571 Posts

romain Reply #2, 15 years, 5 months ago

Hi,

Maybe the manual will lead you to the right path

<input name="appt_day[]"…

Hope this helps

@modx_fr | Github | modx.fr
@rtripault | Github | melting-media.com

18 Posts

tavcorp Reply #3, 15 years, 5 months ago

Hey thanks so much for your reply. I’m not sure what you’re getting at with your response though. In the example listed previous, I’m currently using <input name="appt_day[]". Could you maybe elaborate a little more. The manual isn’t really clear to me. Thanks again!

152 Posts

Henrik Nielsen Reply #4, 15 years, 5 months ago

You can try this in your form:

<input name="appt_day[]" type="hidden" />
<input name="appt_day[]" type="checkbox" [[!+fi.appt_day:FormItIsChecked=`Monday`]] value="Monday" />Monday<br />
<input name="appt_day[]" type="checkbox" [[!+fi.appt_day:FormItIsChecked=`Tuesday`]] value="Tuesday" />Tuesday<br />
<input name="appt_day[]" type="checkbox" [[!+fi.appt_day:FormItIsChecked=`Wednesday`]] value="Wednesday" />Wednesday<br />
<input name="appt_day[]" type="checkbox" [[!+fi.appt_day:FormItIsChecked=`Thursday`]] value="Thursday" />Thursday<br />
<input name="appt_day[]" type="checkbox" [[!+fi.appt_day:FormItIsChecked=`Friday`]] value="Friday" />Friday<br />

The submitted values are in a array - and you can output the content of that array with this in your e-mail template chunk:

Day:
[[+appt_day.0:notempty=`[[+appt_day.0]]`]]
[[+appt_day.1:notempty=`[[+appt_day.1]]`]]
[[+appt_day.2:notempty=`[[+appt_day.2]]`]]
[[+appt_day.3:notempty=`[[+appt_day.3]]`]]
[[+appt_day.4:notempty=`[[+appt_day.4]]`]]

- just remember that the array starts at 0 (zero)

- A small step for mankind, so why not take two...

Working with web production, graphic design/workflow, photo and education - but are trying to get a life in between!

18 Posts

tavcorp Reply #5, 15 years, 5 months ago

Henrik,

Appreciate the suggestions. I didn’t know that when the manual said to use <input name="appt_day[ ]" /> that it meant to do just that. I assumed I had to place some sort of value within the brackets. undecided

So I plugged the code into the form, but when I fill out the form for testing and select multiple days on the form to hit submit, the form does not submit because it says the "Preferred Day of the Week" is required. Which is good and what it should be, but the form doesn’t recognize that I’ve made selections. Any ideas on what to do from here? Thanks again for your help, I’m truly grateful.

152 Posts

Henrik Nielsen Reply #6, 15 years, 5 months ago

When your are submitting your form, then the content of the values are placed into the appt_day[] array - so you are already doing that !!!

Is it the latest version of FormIt you are using? And do you have the snippet FormItIsChecked and FormItIsSelected (which are coming with the lastest version)?

I don’t use :

<input type="checkbox" name="appt_day:required" value="monday" [[!+fi.appt_day:FormItIsChecked=`monday`]] > Monday

But this:

<input type="checkbox" name="appt_day[]" value="Monday" [[!+fi.appt_day:FormItIsChecked=`Monday`]] />Monday

The difference are that I only have det ":required" in my snippet call like your already are doing:

[[!FormIt?
   !!! Remember to inset the other parameters as well here !!!
   &validate=`appt_day:required`
]]

I hope it helps your on the way!

- A small step for mankind, so why not take two...

Working with web production, graphic design/workflow, photo and education - but are trying to get a life in between!

18 Posts

tavcorp Reply #7, 15 years, 5 months ago

Hey,

Again, so grateful for the help!!! laugh

I’ve made all the appropriate changes, unfortunately the ’Day of the week’ is still preventing the form from submitting.

I am using FormIt 1.5.4 and I do have the two snippets, FormItisChecked and FormItIsSelected, included in my package. Although, I haven’t touched any of the code within them at all. Am I supposed to due to the [[!+fi.appt_day:FormItIsChecked=`Monday`]] piece of code? huh

As of now, FormItisChecked reads:

<?php
/**
 * Custom output filter that returns checked="checked" if the value is set
 *
 * @package formit
 */
$output = ' ';
if ($input == $options) {
    $output = ' checked="checked"';
}
if (strpos($input,',') !== false) {
    $input = explode(',',$input);
    if (in_array($options,$input)) {
        $output = ' checked="checked"';
    }
}
return $output;

And FormItIsSelected:

<?php
/**
 * Custom output filter that returns checked="checked" if the value is set
 *
 * @package formit
 */
$output = ' ';
if ($input == $options) {
    $output = ' selected="selected"';
}
if (strpos($input,',') !== false) {
    $input = explode(',',$input);
    if (in_array($options,$input)) {
        $output = ' selected="selected"';
    }
}
return $output;

My snippet reads as:

[[!FormIt?
   &hooks=`email,redirect,FormItAutoResponder`
   &emailTpl=`sentEmailTpl_appt`
   &emailSubject=`Contact Form`
   &emailTo=`.......`
   &redirectTo=`12`
   &validate=`firstname:required:minLength=^2^,
      lastname:required,
      contact_email:email:required,
      patient:required,
      appt_day:required,
      appt_time:required,
      phone:required:maxLenth=^12^`
   &fiarTpl=`autoResponseTpl_appt`
   &fiarSubject=`Online Appointment Request`
   &fiarToField=`contact_email`
   &fiarFrom=`.......`
   &fiarFromName=`.......`
]]

with the `sentEmailTpl_appt`as:

<strong>
First, Last Name: [[+firstname]] [[+lastname]] <br />
Phone Number: [[+phone]] <br />
Email: [[+contact_email]] <br />
Existing Patient: [[+patient]]<br />
Preferred time of day: [[+appt_time]] <br />
Preferred day of week: 
[[+appt_day.0:notempty=`[[+appt_day.0]]`]]
[[+appt_day.1:notempty=`[[+appt_day.1]]`]]
[[+appt_day.2:notempty=`[[+appt_day.2]]`]]
[[+appt_day.3:notempty=`[[+appt_day.3]]`]]
[[+appt_day.4:notempty=`[[+appt_day.4]]`]]
 <br />
Preferred Office: [[+office]] <br />
Additional Comments: [[+comments]]

</strong>

Is all of this correct so far?

152 Posts

Henrik Nielsen Reply #8, 15 years, 5 months ago

If you also post the code for the form, then I check it in the weekend...

What version of Revolution are you using?

- A small step for mankind, so why not take two...

Working with web production, graphic design/workflow, photo and education - but are trying to get a life in between!

18 Posts

tavcorp Reply #9, 15 years, 5 months ago

You are too kind sir grin

. I’m running Revolution 2.0.8-pl (traditional)

<form action="[[~[[*id]]]]" method="post" class="form">
    <input type="hidden" name="nospam:blank" value="" />
 
    <label for "firstname">First name of patient 
        <span class="error">[[!+fi.error.firstname]]</span>
    </label>
    <input type="text" name="firstname" id="firstname"
       minlength="2" value="[[!+fi.firstname]]" />
 
    <label for="lastname">Last name of patient
        <span class="error">[[!+fi.error.lastname]]</span>
    </label>
    <input type="text" name="lastname" id="lastname" value="[[!+fi.lastname]]" />
 
    <label for="contact_email">
        Email:
        <span class="error">[[!+fi.error.contact_email]]</span>
    </label>
    <input type="text" name="contact_email" id="contact_email" value="[[!+fi.contact_email]]" />
 
    <label for="phone">
        Phone Number <small>Example: 555-555-5555</small>
        <span class="error">[[!+fi.error.phone]]</span>
    </label>
    <input type="text" name="phone" maxlength="12" id="phone" value="[[!+fi.phone]]" />

<input type="hidden" name="patient:required" value="" />

<label for "firstname">Are you an existing patient? 
   <span class="error">[[!+fi.error.patient]]</span>
</label> 
<input type="radio" name="patient:required" id="patient" value="yes"[[!+fi.patient:yes]] />Yes
<input type="radio" name="patient:required" id="patient" value="no"
[[!+fi.patient:no]] />No

<br />
<input type="hidden" name="appt_time:required" value="" />

<label for "appt_time">Preferred time of day? 
   <span class="error">[[!+fi.error.appt_time]]</span></label> 
<input type="radio" name="appt_time:required" id="appt_time" value="morning"[[!+fi.appt_time:morning]] />Morning
<input type="radio" name="appt_time:required" id="appt_time" value="evening"[[!+fi.appt_time:evening]] />Evening
<input type="radio" name="appt_time:required" id="appt_time" value="no preference"[[!+fi.appt_time:no preference]] />No preference

<br />
<input type="hidden" name="appt_day:required" value="" />


<label>Preferred day of the week?[[!+fi.error.appt_day]]</label>
<input name="appt_day[]" type="hidden" />
<input type="checkbox" name="appt_day[]" value="Monday" 
[[!+fi.appt_day:FormItIsChecked=`Monday`]] > Monday 
<input type="checkbox" name="appt_day[]" value="Tuesday" [[!+fi.appt_day:FormItIsChecked=`Tuesday`]] > Tuesday 
<input type="checkbox" name="appt_day[]" value="Wednesday" id="wednesday" [[!+fi.appt_day:FormItIsChecked=`Wednesday`]] > Wednesday <br />
<input type="checkbox" name="appt_day[]" value="Thursday"  id="thursday" [[!+fi.appt_day:FormItIsChecked=`Thursday`]] > Thursday 
<input type="checkbox" name="appt_day[]" value="Friday" id="friday" [[!+fi.appt_day:FormItIsChecked=`Friday`]] > Friday 
<input type="checkbox" name="appt_day[]" value="No preference" id="none" [[!+fi.appt_day:FormItIsChecked=`No preference`]] > No Preference 

<br />
<input type="hidden" name="office:required" value="" />

<label for "office">Preferred office location? 
   <span class="error">[[!+fi.error.office]]</span></label> 
<input type="radio" name="office:required" id="office" value="folsom"[[!+fi.office:folsom]] />Folsom
<input type="radio" name="office:required" id="office" value="rocklin"[[!+fi.office:rocklin]] />Rocklin

        
    <label for="text">
        Additional Comments
        <span class="error">[[!+fi.error.comments]]</span>
    </label>
    <textarea name="comments" id="comments" cols="40" rows="6" value="[[!+fi.comments]]">[[!+fi.comments]]</textarea>
 
   <input type="submit" name="submit" value="submit" class="submit_btn" />
   <input type="reset" name="reset" value="reset" class="reset_btn" />

</form>

152 Posts

Henrik Nielsen Reply #10, 15 years, 5 months ago

I had just tested your code - but your had some typos - and some where missing.

This form code worked on my installation:

<form action="[[~[[*id]]]]" method="post" class="form">
   <input type="hidden" name="nospam:blank" value="" />
   
   <label for="firstname">First name of patient <span class="error">[[!+fi.error.firstname]]</span> </label><br />
   <input type="text" name="firstname" id="firstname" value="[[!+fi.firstname]]" /><br />
   
   <label for="lastname">Last name of patient <span class="error">[[!+fi.error.lastname]]</span> </label><br />
   <input type="text" name="lastname" id="lastname" value="[[!+fi.lastname]]" /><br />
   
   <label for="contact_email">Email: <span class="error">[[!+fi.error.contact_email]]</span> </label><br />
   <input type="text" name="contact_email" id="contact_email" value="[[!+fi.contact_email]]" /><br />
   
   <label for="phone">Phone Number <small>Example: 555-555-5555</small> <span class="error">[[!+fi.error.phone]]</span> </label><br />
   <input type="text" name="phone" maxlength="12" id="phone" value="[[!+fi.phone]]" /><br />
   
   <p><strong>Are you an existing patient? <span class="error">[[!+fi.error.patient]]</span></strong></p>
   <input type="hidden" name="patient[]" value="" />
   <input type="radio" name="patient[]" value="Yes" id="patient-Yes" [[!+fi.patient:FormItIsChecked=`Yes`]] /> <label for="patient-Yes">Yes</label> <br />
   <input type="radio" name="patient[]" value="No" id="patient-No" [[!+fi.patient:FormItIsChecked=`No`]] /> <label for="patient-No">No</label> <br />
   
   <p><strong>Preferred time of day? <span class="error">[[!+fi.error.appt_time]]</span></strong></p>
   <input type="hidden" name="appt_time[]" value="" />
   <input type="radio" name="appt_time[]" value="Morning" id="Morning" [[!+fi.appt_time:FormItIsChecked=`Morning`]] /> <label for="Morning">Morning</label> <br />
   <input type="radio" name="appt_time[]" value="Evening" id="Evening" [[!+fi.appt_time:FormItIsChecked=`Evening`]] /> <label for="Evening">Evening</label> <br />
   <input type="radio" name="appt_time[]" value="No preference" id="appt-time-No-preference" [[!+fi.appt_time:FormItIsChecked=`No preference`]] /> <label for="appt-time-No-preference">No preference</label> <br />
   
   <p><strong>Preferred day of the week? <span class="error">[[!+fi.error.appt_day]]</span></strong></p>
   <input type="hidden" name="appt_day[]" value="" />
   <input type="checkbox" name="appt_day[]" value="Monday" id="Monday" [[!+fi.appt_day:FormItIsChecked=`Monday`]] /> <label for="Monday">Monday</label> <br />
   <input type="checkbox" name="appt_day[]" value="Tuesday" id="Tuesday" [[!+fi.appt_day:FormItIsChecked=`Tuesday`]] /> <label for="Tuesday">Tuesday</label> <br />
   <input type="checkbox" name="appt_day[]" value="Wednesday" id="Wednesday" [[!+fi.appt_day:FormItIsChecked=`Wednesday`]] /> <label for="Wednesday">Wednesday</label> <br />
   <input type="checkbox" name="appt_day[]" value="Thursday" id="Thursday" [[!+fi.appt_day:FormItIsChecked=`Thursday`]] /> <label for="Thursday">Thursday</label> <br />
   <input type="checkbox" name="appt_day[]" value="Friday" id="Friday" [[!+fi.appt_day:FormItIsChecked=`Friday`]] /> <label for="Friday">Friday</label> <br />
   <input type="checkbox" name="appt_day[]" value="No preference" id="appt-day-No-preference" [[!+fi.appt_day:FormItIsChecked=`No preference`]] /> <label for="appt-day-No-preference">No preference</label> <br />
   
   <p><strong>Preferred office location? <span class="error">[[!+fi.error.office]]</span></strong></p>
   <input type="hidden" name="office[]" value="" />
   <input type="radio" name="office[]" value="Folsom" id="Folsom" [[!+fi.office:FormItIsChecked=`Folsom`]] /> <label for="Folsom">Folsom</label> <br />
   <input type="radio" name="office[]" value="Rocklin" id="Rocklin" [[!+fi.office:FormItIsChecked=`Rocklin`]] /> <label for="Rocklin">Rocklin</label> <br />
   
   <label for="comments">Additional Comments <span class="error">[[!+fi.error.comments]]</span> </label><br />
   <textarea name="comments" cols="40" rows="6" id="comments">[[!+fi.comments]]</textarea><br />
   
   <input type="submit" name="submit" value="submit" class="submit_btn" />
   <input type="reset" name="reset" value="reset" class="reset_btn" />
   
 </form>

I hope its enough to get you going!

New version: I’ve edited it, so it can validate, and the labels will work with the radio and check inputs! (But your CSS will probably been messed up, sorry...)

- A small step for mankind, so why not take two...

Working with web production, graphic design/workflow, photo and education - but are trying to get a life in between!