Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Hiding Submit Button Until Form is Filled In

Vote:
 

Is there a way to disable/hide the submit button until all fields are filled in? With the latest forms update, the Dependencies tab shows up on all the form fields but the submit button. Is this something that was omitted intentionally, or should I be seeing this tab on the submit configuration as well?

#203945
May 13, 2019 19:45
Vote:
 

I'm wondering why you don't use RequireValidator for those fileds ?

#203949
May 14, 2019 4:37
Vote:
 

Hi Eric,

I'm inclined to agree with Quan in that the scenario should really be covered by validation however, if you want add the dependencies tab to the submit button it is possible though with a big caveat that you'd need to implement an interface which is in an internal namespace (EPiServer.Forms.Core.Internal.Dependency). This means that this sits outside of the standard semantic versioning and may contain breaking changes in a minor verion update. If that's a risk you're willing to accept, you could create your own version of SubmitButtonElementBlock inheriting from SubmitButtonElementBlock and implementing IMultipleConditionsElementDependant which provides the relevant fields to pick your dependencies and act on them in the JavaScript.

[ContentType(GUID = "A957C10C-E2B7-492B-96A2-1CA3699A479E", GroupName = "ActionElements", Order = 3200)]
public class HideableSubmitElementBlock : SubmitButtonElementBlock, IMultipleConditionsElementDependant
{
    [Display(GroupName = "Dependencies", Order = 1000)]
    [SelectOne(SelectionFactoryType = typeof(DependencyActionSelectionFactory))]
    public virtual string SatisfiedAction { get; set; }
        
    [Display(GroupName = "Dependencies", Order = 2000)]
    [SelectOne(SelectionFactoryType = typeof(ConditionCombinationSelectionFactory))]
    public virtual int ConditionCombination { get; set; }
        
    [BackingType(typeof(PropertyDependencyConditionsList))]
    [CircularDependencyValidation(ErrorMessage = "/episerver/forms/contentediting/validation/circulardependency")]
    [Display(GroupName = "Dependencies", Order = 3000)]
    public virtual IEnumerable<ICondition> Conditions { get; set; }
}

You'll then need to add a view for that block which you can copy from \modules\_protected\EPiServer.Forms\EPiServer.Forms.zip\Views\ElementBlocks\SubmitButtonElementBlock.ascx into \Views\Shared\ElementBlocks\HideableSubmitElementBlock.ascx. The only changes you'll need to make is to change the name attribute of the <button> to be <%: formElement.ElementName %> then wrap it in a div with a few attributes as below:

<%@ Import Namespace="System.Web.Mvc" %>
<%@ Import Namespace="EPiServer.Forms.Implementation.Elements" %>
<%@ Control Language="C#" Inherits="ViewUserControl<SubmitButtonElementBlock>" %>

<%
    var formElement = Model.FormElement;
    var buttonText = Model.Label;

    var buttonDisableState = Model.GetFormSubmittableStatus(ViewContext.Controller.ControllerContext.HttpContext);
%>

<div class="FormSubmitButton" data_f_type="submitbutton" data-f-element-name="<%: formElement.ElementName %>">
<button id="<%: formElement.Guid %>" name="<%: formElement.ElementName %>" type="submit" value="<%: formElement.Guid %>" data-f-is-finalized="<%: Model.FinalizeForm.ToString().ToLower() %>"
    data-f-is-progressive-submit="true" data-f-type="submitbutton"
    <%= Model.AttributesString %> <%: buttonDisableState %>
    <% if (Model.Image == null) 
    { %>
        class="Form__Element FormExcludeDataRebind FormSubmitButton">
        <%: buttonText %>
    <% } else { %>
        class="Form__Element FormExcludeDataRebind FormSubmitButton FormImageSubmitButton">
        <img src="<%: Model.Image.Path %>" data-f-is-progressive-submit="true" data-f-is-finalized="<%: Model.FinalizeForm.ToString().ToLower() %>" />
    <% } %>
</button>
</div>

You should then be able to create a HideableSubmit button which will act like a standard submit button but with the option to add depencencies.

#203967
May 14, 2019 19:55
Vote:
 

Hi Eric and Paul,

It seems that hiding/showing SubmitButton/RichEtextElement is useful in some cases.

This will be available in the next version.

#204392
May 30, 2019 12:41
Manh Nguyen - Jun 03, 2019 11:33
Cool!
Vote:
 

That's why I love this community. They actually listen to us and improve the product!

#204437
May 31, 2019 21:49
Quan Tran - Jun 03, 2019 11:35
A big family :)
Vote:
 

Hi,

Forms 4.25.0 has been released. This version of forms supports Dependencies tab for Submit button and Rich Text element. 

#204931
Jun 21, 2019 11:45
Bob Bolt - Jun 21, 2019 17:03
New Nuget packages should be available on Monday, June 24.
Quan Tran - Jun 24, 2019 4:43
thank you Bob.
Vote:
 

Woohoo!

#204939
Jun 21, 2019 15:25
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.