Documentation You are here: start » v » 2.0 » snippets » other_drop_down

This is an old revision of the document!


Display a dropdown list with "Other" text box

The following snippet will display a dropdown list in the checkout, and will display an extra text box for “Other” input if “Other” is selected.

Add javascript

On the Templates configuration page of your store's FoxyCart administration, under “Cart” look for “Add custom header or footer code to your website”, check the box if not checked, and add this code into the “Footer” text area.

{% if context == "checkout" %}
<script>
$("body").on("change", "#referral_source", function() {
    setTimeout(FC.checkout.renderAdditionalFields, 500);
});
</script>
{% endif %}

Add HTML

Next, and still on the configuration page, under “Checkout” look for “Add custom form fields to your checkout”, enable it, and paste the following into the text box within:

<div class="fc-form-group ">
    <div class="col-md-8 col-md-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
        <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
            <label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
                How did you find Us?… (required)
            </label>
            <div class="fc-form-group">
                <p>Referred by?</p>
                    <select name="referral_source" id="referral_source" class="fc-form-control" aria-required="true" data-fc-required >
                    <option value="Google" {% if referral_source == "Google" %}selected{% endif %}>Google</option>
                    <option value="Yahoo" {% if referral_source == "Yahoo" %}selected{% endif %}>Yahoo</option>
                    <option value="Bing" {% if referral_source == "Bing" %}selected{% endif %}>Bing</option>
                    <option value="Facebook" {% if referral_source == "Facebook" %}selected{% endif %}>Facebook</option>
                    <option value="Instagram" {% if referral_source == " Instagram " %}selected{% endif %}> Instagram </option>
                    <option value="Twitter" {% if referral_source == " Twitter" %}selected{% endif %}> Twitter</option>
                    <option value="Friend" {% if referral_source == "Friend" %}selected{% endif %}>Friend</option>
                    <option value="Amazon" {% if referral_source == "Amazon" %}selected{% endif %}>Amazon</option>
                    <option value="Email" {% if referral_source == "Email" %}selected{% endif %}>Email</option>
                    <option value="Returning Customer" {% if referral_source == "Returning Customer" %}selected{% endif %}>Returning Customer</option>
                    <option value="Other" {% if referral_source == "Other" %}selected{% endif %}>Other</option>
                    </select>
            </div>
            {% if referral_source == "Other" %}
                <div class="fc-form-group">
                    <input type="text"
                    id="other_text"
                    name="other_text"
                    placeholder="Please enter 'Other'"
                    class="fc-form-control fc-form-control--new-customer-password"
                    data-fc-required
                    value="{{ other_text }}"
                    />
                </div>
            {% endif %}
        </div>
    </div>
</div>

Site Tools