I am having an issue with a long safecracker form.
The form requires several fields that collect the same information for multiple people.
For example, there are fields like first name, last name, age, etc and those are duplicated for up to 4 people.
I have created separate channel fields for each and appended an underscore and a number to the field's short name (i.e. first_name, first_name_2, first_name_3, etc).
The problem I am running into is that the fields seem to be conflicting with each other even though they are named something totally different.
It causes all of the fields that appear first in the form (i.e. first_name) to not render and the page just displays the EE field tags.
It seems to only effect select drop down, radio button and checkbox fields.
I am not using the custom_fields loop, but am using options:my_field_name for each field.
Any thoughts on why this might be happening?
Thanks for any help.
Here is the code. I have cut it down quite a but, but sorry for the length. The section that starts with the header Driver 2 shows the duplicate fields. I have stripped out the Driver 3 & Driver 4 sections to shorten the code length, but when those are added in, it compounds the issue.
Everything in the Primary Driver Info section works fine, until the Additional Driver sections are added in.
{exp:safecracker channel="auto_requests" author_only="yes" url_title="{segment_3}" include_jquery="no" safecracker_head="no" preserve_checkboxes="yes" return="customer/request-thanks" class="request-form" id="request-form" }
<section class="step-1">
<div class="row">
<div class="col-1-1">
<div class="cell shadow-box bg-orange-light">
<h4>Primary Driver Info</h4>
<div class="row">
<div class="col-1-2">
<p>
<label for="auto_first_name">First Name</label>
<input type="text" id="auto_first_name" name="auto_first_name" value="{auto_first_name}">
</p>
<p>
<label for="auto_last_name">Last Name</label>
<input type="text" id="auto_last_name" name="auto_last_name" value="{auto_last_name}">
</p>
<p>
<div class="row margin-none pad-none">
<div class="col-1-2 collapse-none pad-none pad-right">
<label for="auto_middle_initial">Middle Initial</label>
<input type="text" id="auto_middle_initial" name="auto_middle_initial" value="{auto_middle_initial}">
</div>
<div class="col-1-2 collapse-none pad-none pad-left">
<label for="auto_age">Age</label>
<select id="auto_age" name="auto_age">
<option value="">Select One</option>
{options:auto_age}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_age}
</select>
</div>
</div>
</p>
<p>
<div class="row margin-none pad-none">
<div class="col-1-2 collapse-none pad-none pad-right">
<label for="auto_gender">Gender</label>
{options:auto_gender}
<span class="inline-block pad-right">
<input type="radio" id="auto_gender_{option_name}" name="auto_gender" value="{option_value}"{checked}>
<label for="auto_gender_{option_name}">{option_name}</label>
</span>
{/options:auto_gender}
</div>
<div class="col-1-2 collapse-none pad-none pad-left">
<label for="auto_marital_status">Marital Status</label>
<select id="auto_marital_status" name="auto_marital_status">
<option value="">Select One</option>
{options:auto_marital_status}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_marital_status}
</select>
</div>
</div>
</p>
<p>
<div class="row margin-none pad-none">
<div class="col-1-2 collapse-none pad-none pad-right">
<label for="auto_dl">Driver's License Number</label>
{field:auto_dl}
</div>
<div class="col-1-2 collapse-none pad-none pad-left">
<label for="auto_dl_state">Driver's License State</label>
<select id="auto_dl_state" name="auto_dl_state">
<option value="">Select One</option>
{options:auto_dl_state}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_dl_state}
</select>
</div>
</div>
</p>
<p>
<label for="auto_valid_license">Is your license currently valid?</label>
{options:auto_valid_license}
<span class="inline-block pad-right">
<input type="radio" id="auto_valid_license_{option_name}" name="auto_valid_license" value="{option_value}"{checked}>
<label for="auto_valid_license_{option_name}">{option_name}</label>
</span>
{/options:auto_valid_license}
</p>
<p>
<label for="auto_ss">Social Security Number</label>
{field:auto_ss}
</p>
<p>
<label for="auto_address">Street Address</label>
<input type="text" id="auto_address" name="auto_address" value="{auto_address}">
</p>
<p>
<label for="auto_city">City</label>
<input type="text" id="auto_city" name="auto_city" value="{auto_city}">
</p>
<p>
<div class="row margin-none pad-none">
<div class="col-1-2 collapse-none pad-none pad-right">
<label for="auto_state">State</label>
<select id="auto_state" name="auto_state">
<option value="">Select One</option>
{options:auto_state}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_state}
</select>
</div>
<div class="col-1-2 collapse-none pad-none pad-left">
<label for="auto_zip">Zip</label>
<input type="text" id="auto_zip" name="auto_zip" value="{auto_zip}">
</div>
</div>
</p>
<p>
<label for="auto_phone">Phone</label>
<input type="text" id="auto_phone" name="auto_phone" value="{auto_phone}">
</p>
<p>
<label for="auto_dependents">Do you have any dependents (children, dependent spouse, etc.)?</label>
<select id="auto_dependents" name="auto_dependents">
<option value="">Select One</option>
{options:auto_dependents}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_dependents}
</select>
</p>
<p>
<label for="auto_residence">Do you lease or own your residence?</label>
<select id="auto_residence" name="auto_residence">
<option value="">Select One</option>
{options:auto_residence}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_residence}
</select>
</p>
<p>
<label for="auto_education">What’s the highest level of education you’ve reached?</label>
<select id="auto_education" name="auto_education">
<option value="">Select One</option>
{options:auto_education}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_education}
</select>
</p>
</div>
<div class="col-1-2">
<p>
<label for="auto_career_status">What is your career status?</label>
<select id="auto_career_status" name="auto_career_status">
<option value="">Select One</option>
{options:auto_career_status}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_career_status}
</select>
</p>
<p>
<label for="auto_income">What is your approximate total household Income?</label>
<select id="auto_income" name="auto_income">
<option value="">Select One</option>
{options:auto_income}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_income}
</select>
</p>
<p>
<label for="auto_outstanding">Do you have any outstanding judgements, past due amounts, or have you ever filed for Bankruptcy?</label>
{options:auto_outstanding}
<span class="inline-block pad-right">
<input type="radio" id="auto_outstanding_{option_name}" name="auto_outstanding" value="{option_value}"{checked}>
<label for="auto_outstanding_{option_name}">{option_name}</label>
</span>
{/options:auto_outstanding}
</p>
<p>
<label for="auto_license_age">How old were you when you received your drivers license?</label>
<select id="auto_license_age" name="auto_license_age">
<option value="">Select One</option>
{options:auto_license_age}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_license_age}
</select>
</p>
<p>
<label for="auto_minor_violations">Do you have any minor violations in the past 3 years? (i.e. speeding tickets, etc.?</label>
{options:auto_minor_violations}
<span class="inline-block pad-right">
<input type="radio" id="auto_minor_violations_{option_name}" name="auto_minor_violations" value="{option_value}"{checked}>
<label for="auto_minor_violations_{option_name}">{option_name}</label>
</span>
{/options:auto_minor_violations}
</p>
<p>
<label for="auto_accidents">Do you have any at fault accidents in the last 5 years?</label>
{options:auto_accidents}
<span class="inline-block pad-right">
<input type="radio" id="auto_accidents_{option_name}" name="auto_accidents" value="{option_value}"{checked}>
<label for="auto_accidents_{option_name}">{option_name}</label>
</span>
{/options:auto_accidents}
</p>
<p>
<label for="auto_major_violations">Do you have any major violations in the last 3 years (for example, DWI, etc.)?</label>
{options:auto_major_violations}
<span class="inline-block pad-right">
<input type="radio" id="auto_major_violations_{option_name}" name="auto_major_violations" value="{option_value}"{checked}>
<label for="auto_major_violations_{option_name}">{option_name}</label>
</span>
{/options:auto_major_violations}
</p>
<p>
<label for="auto_deductible">What deductible would you like?</label>
<select id="auto_deductible" name="auto_deductible">
<option value="">Select One</option>
{options:auto_deductible}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_deductible}
</select>
</p>
<p>
<label for="auto_other_details">Please enter any other coverage details you would like included in your quote. For example, if you know your liability limits or other coverage details, enter them here.</label>
<textarea id="auto_other_details" name="auto_other_details" rows="5">{auto_other_details}</textarea>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="step-2 hidden">
<div class="row">
<div class="col-1-1">
<div class="cell shadow-box bg-orange-light">
<h4>Additional Driver Info</h4>
<h4>Driver 2</h4>
<div class="row">
<div class="col-1-2">
<p>
<label for="auto_first_name_2">First Name</label>
<input type="text" id="auto_first_name_2" name="auto_first_name_2" value="{auto_first_name_2}">
</p>
<p>
<label for="auto_last_name_2">Last Name</label>
<input type="text" id="auto_last_name_2" name="auto_last_name_2" value="{auto_last_name_2}">
</p>
<p>
<div class="row margin-none pad-none">
<div class="col-1-2 collapse-none pad-none pad-right">
<label for="auto_middle_initial_2">Middle Initial</label>
<input type="text" id="auto_middle_initial_2" name="auto_middle_initial_2" value="{auto_middle_initial_2}">
</div>
<div class="col-1-2 collapse-none pad-none pad-left">
<label for="auto_age_2">Age</label>
<select id="auto_age_2" name="auto_age_2">
<option value="">Select One</option>
{options:auto_age_2}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_age_2}
</select>
</div>
</div>
</p>
<p>
<div class="row margin-none pad-none">
<div class="col-1-2 collapse-none pad-none pad-right">
<label for="auto_gender_2">Gender</label>
{options:auto_gender_2}
<span class="inline-block pad-right">
<input type="radio" id="auto_gender_2_{option_name}" name="auto_gender_2" value="{option_value}"{checked}>
<label for="auto_gender_2_{option_name}">{option_name}</label>
</span>
{/options:auto_gender_2}
</div>
<div class="col-1-2 collapse-none pad-none pad-left">
<label for="auto_marital_status_2">Marital Status</label>
<select id="auto_marital_status_2" name="auto_marital_status_2">
<option value="">Select One</option>
{options:auto_marital_status_2}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_marital_status_2}
</select>
</div>
</div>
</p>
<p>
<label for="auto_relationship_to_primary_2">Relationship to Primary Applicant</label>
<select id="auto_relationship_to_primary_2" name="auto_relationship_to_primary_2">
<option value="">Select One</option>
{options:auto_relationship_to_primary_2}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_relationship_to_primary_2}
</select>
</p>
<p>
<label for="auto_valid_license_2">Is this driver's license currently valid?</label>
{options:auto_valid_license_2}
<span class="inline-block pad-right">
<input type="radio" id="auto_valid_license_2_{option_name}" name="auto_valid_license_2" value="{option_value}"{checked}>
<label for="auto_valid_license_2_{option_name}">{option_name}</label>
</span>
{/options:auto_valid_license_2}
</p>
<p>
<label for="auto_education_2">What’s the highest level of education reached for this driver?</label>
<select id="auto_education_2" name="auto_education_2">
<option value="">Select One</option>
{options:auto_education_2}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_education_2}
</select>
</p>
<p>
<label for="auto_career_status_2">What is the career status of this driver?</label>
<select id="auto_career_status_2" name="auto_career_status_2">
<option value="">Select One</option>
{options:auto_career_status_2}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_career_status_2}
</select>
</p>
</div>
<div class="col-1-2">
<p>
<label for="auto_license_age_2">How old was this driver when they received their drivers license?</label>
<select id="auto_license_age_2" name="auto_license_age_2">
<option value="">Select One</option>
{options:auto_license_age_2}
<option value="{option_value}"{selected}>{option_name}</option>
{/options:auto_license_age_2}
</select>
</p>
<p>
<label for="auto_minor_violations_2">Has this driver had any minor violations in the past 3 years? (i.e. speeding tickets, etc.?</label>
{options:auto_minor_violations_2}
<span class="inline-block pad-right">
<input type="radio" id="auto_minor_violations_2_{option_name}" name="auto_minor_violations_2" value="{option_value}"{checked}>
<label for="auto_minor_violations_2_{option_name}">{option_name}</label>
</span>
{/options:auto_minor_violations_2}
</p>
<p>
<label for="auto_accidents_2">Has this driver had any at fault accidents in the last 5 years?</label>
{options:auto_accidents_2}
<span class="inline-block pad-right">
<input type="radio" id="auto_accidents_2_{option_name}" name="auto_accidents_2" value="{option_value}"{checked}>
<label for="auto_accidents_2_{option_name}">{option_name}</label>
</span>
{/options:auto_accidents_2}
</p>
<p>
<label for="auto_major_violations_2">Has this driver had any major violations in the last 3 years (for example, DWI, etc.)?</label>
{options:auto_major_violations_2}
<span class="inline-block pad-right">
<input type="radio" id="auto_major_violations_2_{option_name}" name="auto_major_violations_2" value="{option_value}"{checked}>
<label for="auto_major_violations_2_{option_name}">{option_name}</label>
</span>
{/options:auto_major_violations_2}
</p>
<p>
<label for="auto_same_address_2">Does this driver live at the same address as the primary applicant?</label>
{options:auto_same_address_2}
<span class="inline-block pad-right">
<input type="radio" id="auto_same_address_2_{option_name}" name="auto_same_address_2" value="{option_value}"{checked}>
<label for="auto_same_address_2_{option_name}">{option_name}</label>
</span>
{/options:auto_same_address_2}
</p>
<p>
<label for="auto_other_details_2">Please enter any other coverage details you would like included in your quote. For example, if you know your liability limits or other coverage details, enter them here.</label>
<textarea id="auto_other_details_2" name="auto_other_details_2" rows="5">{auto_other_details_2}</textarea>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/exp:safecracker}
<label>elements intact? Are you showing with javascript - and if so, what happens if you remove the JS and just show all 4 drivers by default?