[Custom Fixed] Sitecore WFFM: CheckboxListField.cshtml renders same NAME and ID attribute value on its checkboxes

Posted on Updated on

While we’re doing a regression testing for one of my project, we’ve noticed that the CheckboxListField field renders its checkboxes with the same value for the NAME and ID attributes on its checkboxes for the input HTML tags. Thus, creating a complication on the customization we’ve implemented on the styling of the form.

This is because we just upgraded from Sitecore v.8.1-U2, and started to experience the issue. So,  I did test the issue in a clean copy of v.8.1-U2 and I was able to reproduce the issue.

Describing the concern:

In SC v.8.0 the checkboxes value are incremented correctly.
eg.

Favorite food checkboxlist

In Input tag <input>

  • [ ] Pasta checkbox (id=”wffm6dac667f32104007a914e4628ce2a46d_Sections_0__Fields_0__Value” name=”wffm6dac667f32104007a914e4628ce2a46d.Sections[0].Fields[0].Value”)
  • [ ] Pizza checkbox (id=”wffm6dac667f32104007a914e4628ce2a46d_Sections_0__Fields_1__Value” name=”wffm6dac667f32104007a914e4628ce2a46d.Sections[0].Fields[1].Value”)
  • [ ] Chicken checkbox (id=”wffm6dac667f32104007a914e4628ce2a46d_Sections_0__Fields_2__Value” name=”wffm6dac667f32104007a914e4628ce2a46d.Sections[0].Fields[2].Value”)
BUT in v.8.1-U2

Favorite food checkboxlist

In Input tag <input>

  • [ ] Pasta checkbox (id=”wffm6dac667f32104007a914e4628ce2a46d_Sections_0__Fields_0__Value” name=”wffm6dac667f32104007a914e4628ce2a46d.Sections[0].Fields[0].Value”)
  • [ ] Pizza checkbox (id=”wffm6dac667f32104007a914e4628ce2a46d_Sections_0__Fields_0__Value” name=”wffm6dac667f32104007a914e4628ce2a46d.Sections[0].Fields[0].Value”)
  • [ ] Chicken checkbox (id=”wffm6dac667f32104007a914e4628ce2a46d_Sections_0__Fields_0__Value” name=”wffm6dac667f32104007a914e4628ce2a46d.Sections[0].Fields[0].Value”)

Note: I already raised this concern to Sitecore.

But since we love to play around with the implementation of Sitecore. I managed to find and amend the CheckboxListField.cshtml – \Website\Views\Form\EditorTemplates. 

This is just a workaround while Sitecore haven’t confirmed anything about the issue yet.

In CheckboxListField.cshtml

@using Sitecore.Forms.Mvc.ViewModels.Fields
@using Sitecore.WFFM.Abstractions.Data.Enums
@using Sitecore.Forms.Mvc.Html
@model CheckboxListField

@{
int z = 0;
}

@using (Html.BeginField())
{
var notInline = Model.FormType != FormType.Inline;
<div class="checkbox-wrap">
@foreach (var item in Model.Items)
{
using (Html.BeginTag("div", () => notInline, new { @class = "checkbox" }))
{
var htmlIdForVal = Html.IdFor(x => Model.Value);
var cId = htmlIdForVal.ToString().Replace("Fields_0__Value", "Fields_" + z + "__Value");

var htmlNameForVal = Html.NameFor(x => Model.Value);

using (Html.BeginTag("label", new { @class = notInline ? string.Empty : "checkbox-inline" }))
{

<input type="checkbox" value="@item.Value" id= "@cId" name ="@htmlNameForVal" @(item.Selected ? "checked" : string.Empty) />
@Html.DisplayFor(m => item.Text)
}
}
z++;
}
</div>
}

[Edited 08.04.2016] Important note: Do not update the name attribute, as it would create a complication on the email message when you included the checkbox list field. The problem is that only the first checkbox item (pasta) would show on the email even the 2nd (pizza), 3rd (chicken) checkboxes were checked.

Original value:


@using Sitecore.Forms.Mvc.ViewModels.Fields
@using Sitecore.WFFM.Abstractions.Data.Enums
@using Sitecore.Forms.Mvc.Html
@model CheckboxListField

@using (Html.BeginField())
{
var notInline = Model.FormType != FormType.Inline;
foreach (var item in Model.Items)
{
using (Html.BeginTag("div", () => notInline, new { @class = "checkbox" }))
{
using (Html.BeginTag("label", new { @class = notInline ? string.Empty : "checkbox-inline" }))
{
<input type="checkbox" value="@item.Value" id="@Html.IdFor(x => Model.Value)" name="@Html.NameFor(x => Model.Value)" @(item.Selected? "checked" : string.Empty)/>
@Html.DisplayFor(m => item.Text)
}
}
}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s