How do I.. Manually order and and control the layout of check-boxes with channel forms template code.
How Do I?
Current Template Code:
{label:field_name} {options:field_name} <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”{option_value}” {checked}><{option_name}</label> {/options:field_name}
I want to style each option_value and re-arrange the order mnaully in the template.
I tried this:
<label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”Network Access” {checked}><i></i>Network Access</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”Email Account” {checked}><i></i>Email Account</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”Opera” {checked}><i></i>Opera</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”Saflok” {checked}><i></i>Saflok</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”KnowCross” {checked}><i></i>KnowCross</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”InfoGenesis” {checked}><i></i>InfoGenesis</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”Universal Desktop” {checked}><i></i>Universal Desktop</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”ResortSuite”{checked} ><i></i>ResortSuite</label> <label class=”toggle”><input type=”checkbox” name=”field_name[]” value=”ResDiary”{checked} ><i></i>ResDiary</label>
Which renders on the front end just fine but does not load previously save changes or new changes to the checkbox status
Many Thanks.
Does your code literally use field_name[]? If not it would be best if you could share your actual code in your template. Click the “Use Markdown” link below to see how to put your code into formatted code blocks so it retains your code formatting and provides syntax highlighting.
<div class="medium-6 medium columns">
<section class="col col-10">
{label:ear_application_access}
<label class="toggle"><input type="checkbox" name="ear_application_access" id="Network Access" value="Network Access" {checked}><i></i>Network Access</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" id="Email Account" value="Email Account" {checked}><i></i>Email Account</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="Opera" {checked}><i></i>Opera</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="Saflok" {checked}><i></i>Saflok</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="KnowCross" {checked}><i></i>KnowCross</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="InfoGenesis" {checked}><i></i>InfoGenesis</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="Universal Desktop" {checked}><i></i>Universal Desktop</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="ResortSuite"{checked} ><i></i>ResortSuite</label>
<label class="toggle"><input type="checkbox" name="ear_application_access" value="ResDiary"{checked} ><i></i>ResDiary</label>
</section>
</div>Hope this is clearer thanks.
If ear_application_access is the name of your checkbox field, your markup and tags look correct. Is this wrapped inside of another tag pair that might be processing the {checked} variable? I’d try just the code you have above in your Channel Form, with no other fields or markup to isolate the issue.
I tried it with no other tag pair and it does write check box changes to the database but does not read them when the entry ID is reloaded.
What version of ExpressionEngine are you running?
I’m running 4.0.6 and am having the same issue in the channel:form
This code renders and works fine:
{field:test_field}This code renders but does not record changes or reflect updates:
{custom_fields}
{if field_name == "test_field"}
{options:test_field}
<label class="checkbox">{option_value}
<input type="checkbox" id="{test_field}" name="{test_field}[]" value="{option_value}"{checked}>
</label>
{/options:test_field}
{/if}
{/custom_fields}