0

I have created a custom field in Sitecore 9.0.1 as conditional rendering having One radio button and based on radio button selection i am showing and hiding the fields which are label and text box.

So my requirement is that when someone select yes then show TextBox that is mandatory and finally on Submission of the form I need that TextBox field value?

  • Sitecore 9.1 conditional rendering is out of box,better upgrade to latest Sitecore version. already one question is raised please check sitecore.stackexchange.com/questions/17998/…. – Abhishek Malaviya Jun 11 '19 at 4:44
  • Could you please let me know how you are hiding/showing textbox? – Swati Gupta Jun 11 '19 at 4:46
  • Hi @SwatiGupta Please find the script below, which I am using for show and hide functionality – kohila vani Jun 11 '19 at 7:22
  • @kohilavani Sorry I did not find any script. Can you please script in your question? – Swati Gupta Jun 11 '19 at 7:24
  • Hi @SwatiGupta Please find the script below $(document).on("click", ".sample", function () { var id = $(this).attr('id'); var clickedID = '#' + id; var conditions = $(clickedID).parent().parent().children('#Condition').val(); var classname = $(this).attr('class'); if (conditions == 'Yes' ) {if (conditions == 'Yes' && Action == "Enable" && Select ==TextBox") { $(clickedID).parent().parent().find('#divText').css('display', 'block');} and likewise i am checking other cases too. – kohila vani Jun 11 '19 at 7:33
0

You can check logic in this link How to add Conditional field in sitecore 9 Form? where I am hiding Sections, you can hide text box.

To apply mandatory logic you can play with aria-required ,required,data-val attribute

| improve this answer | |
0

I used a similar approach, where selecting "other" list item from the drop down will show a text box and I get the value on the submit action. Maybe this will help you to update your code.

  1. The model for that custom field will look like this.

     using System;
     using Sitecore.Data.Items;
     using Sitecore.Diagnostics;
     using Sitecore.ExperienceForms.Mvc.Models.Fields;
    
     namespace Universal.Feature.Forms.CustomModels
     {
     [Serializable]
     public class OtherOptionDropDownListViewModel : DropDownListViewModel
     {
         public string OtherOptionLabel { get; set; }
         public string OtherOptionUserValue { get; set; }
         public string OtherOptionValue { get; set; }
         public string otherOptionDropListFieldName { get; set; }
    
         protected override void InitItemProperties(Item item)
         {
             Assert.ArgumentNotNull(item, "item");
             base.InitItemProperties(item);
    
             OtherOptionValue = item?.Fields[FormsConstants.ItemConstants.OtherOptionValue]?.Value;
             OtherOptionLabel = item?.Fields[FormsConstants.ItemConstants.OtherOptionLabel]?.Value;
             otherOptionDropListFieldName = item?.Fields[FormsConstants.ItemConstants.OtherOptionFieldName]?.Value;
         }
    
         protected override void UpdateItemFields(Item item)
         {
             Assert.ArgumentNotNull(item, "item");
             base.UpdateItemFields(item);
    
             var value = item.Fields[FormsConstants.ItemConstants.OtherOptionValue];
             if (value != null)
             {
                 value.SetValue(OtherOptionValue, true);
             }
    
             var label = item.Fields[FormsConstants.ItemConstants.OtherOptionLabel];
             if (label != null)
             {
                 label.SetValue(OtherOptionLabel, true);
             }
    
             var fieldName =     item.Fields[FormsConstants.ItemConstants.OtherOptionFieldName];
             if (fieldName != null)
             {
                 fieldName.SetValue(otherOptionDropListFieldName, true);
             }
         }
     }
     }
    

The cshtml will look like this.

@using Sitecore.ExperienceForms.Mvc.Html
@model Universal.Feature.Forms.CustomModels.OtherOptionDropDownListViewModel

<div class="universalotheroptionselectlist">
    <label for="@Html.IdFor(m => Model.Value)"     class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label>
    <select id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" data-sc-otheroption="@Model.OtherOptionValue" class="@Model.CssClass universalotheroptionselectlist-ddn" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)>
        @if (Model.ShowEmptyItem)
        {
            <option label=" "></option>
        }
    @foreach (var item in Model.Items)
         {
             <option value="@item.Value" selected="@item.Selected">@item.Text</option>
         }
    </select>
    @Html.ValidationMessageFor(m => Model.Value)


    <div class="universalotheroptioninputfield">
    <label for="@Html.IdFor(m => Model.OtherOptionUserValue)" class="@Model.LabelCssClass universalotheroptionselectlist-label">@Html.DisplayTextFor(t => Model.OtherOptionLabel)</label>
    <textarea  id="@Html.IdFor(m => Model.OtherOptionUserValue)" name="@Html.NameFor(m => Model.OtherOptionUserValue)" class="@Model.CssClass universalotheroptionselectlist-input" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" ></textarea>
</div>

And finally, the JS to set the value.

let UniversalOtherOptionSelectList = function (selectListComponent) {
this.selectListComponent = selectListComponent;
this.dropdown = this.selectListComponent.querySelector('.universalotheroptionselectlist-ddn');
this.textBox = this.selectListComponent.querySelector('.universalotheroptionselectlist-input');
this.otherOptionDiv =     this.selectListComponent.querySelector('.universalotheroptioninputfield');
this.otherOptionValue = this.dropdown.getAttribute("data-sc-otheroption");
};
UniversalOtherOptionSelectList.prototype.Init = function () {
var _this = this;

_this.RenderOtherOptionControl();

this.dropdown.addEventListener('change', function () {
    _this.RenderOtherOptionControl();
});
};

UniversalOtherOptionSelectList.prototype.RenderOtherOptionControl = function () {

var _this = this;
var selectedValue = this.dropdown.value;

if (_this.otherOptionValue === selectedValue) {
    _this.otherOptionDiv.style.display = "inline-block";
    _this.textBox.value = "";
} else {
    _this.otherOptionDiv.style.display = "none";
}
};


window.addEventListener('load', function () {
let selectLists = document.querySelectorAll('.universalotheroptionselectlist');

if (selectLists) {
    selectLists.forEach(function (selectListComponent) {
        // Construct new OtherOptionSelectList
        var selectList = new UniversalOtherOptionSelectList(selectListComponent);

        // Init functionality on load
        selectList.Init();
    });
    }
});

And on the custom save action, I get the value in FormSubmitContext formSubmitContext. Make sure that you have the custom field properly set in core database. And match the csthml with your cshtml.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.