0

I have a requirement where on Sitecore form submit, I have to show a pop up with Yes/No option. And once I click Yes, it would call save the form data.

Note: we are already using Sitecore form. and CSaveaction is working fine. But now have to add a pop up on submit and from pop up call save action.

enter image description here

So please suggest how to achieve. Thank you.

2
  • You can achieve this by javascript click event, on yes button click trigger form submit button. Sep 23, 2022 at 7:31
  • Thanks Gaurav. can you tell me how to trigger Sitecore form Submit action from script ? Sep 23, 2022 at 7:51

1 Answer 1

2

I would suggest creating a custom Submit button and binding the JS event on the cshtml.

The csthml will look like the one below, where you can bind the confirmation box by clicking on the button. You need to follow the blow code and remove the logic and put the confirmation logic before submitting.

@using Sitecore.ExperienceForms.Mvc.Constants
@model Sc.FormsCustomScripts.Models.CustomScriptButtonViewModel
 
@{
    var cssClass = Model.CssClass;
    if (Model.NavigationStep < 0)
    {
        var classes = Model.CssClass.Split(' ');
        if (!classes.Contains("cancel", StringComparer.OrdinalIgnoreCase))
        {
            if (!string.IsNullOrEmpty(Model.CssClass))
            {
                cssClass += " ";
            }
 
            cssClass += "cancel";
        }
    }
}
 
<input value="@Html.DisplayTextFor(t => Model.Title)" type="submit" class="@cssClass" name="@Html.Name(Model.ItemId)" data-sc-field-key="@Model.ConditionSettings.FieldKey" />
@Html.Hidden(AttributeNames.NavigationButtons, Model.ItemId)
@Html.Hidden(Model.ItemId, Model.NavigationStep)
 
<script type="text/javascript">
    (function ($) {
        var $inputEl = $("input[name='@Html.Name(Model.ItemId)']");
        var $formEl = $inputEl.closest('form');
        if ($inputEl.length == 0 || $formEl.length == 0) {
            return;
        }
        $inputEl.click(function () {
            $("input[type=submit]", $formEl).removeAttr("clicked");
            $(this).attr("clicked", "true");
        });
        @if (Sitecore.Context.Site.Name != "shell")
        {
            if (!string.IsNullOrWhiteSpace(Model.FormSubmitScript)) 
            { 
                <text>
                    $formEl.on("submit", function () {
                        if ($inputEl.attr('clicked')) {
                            @Html.Raw(Model.FormSubmitScript)
                        }
                    });
                </text>
            }
        }
    })(jQuery)
</script>

To know more about the custom submit event, refer to this article.

https://smartsitecore.com/en/call-custom-javascript-on-sitecore-forms-submit/

2
  • Thank you Sumit. Seems helpful. I am gonna try this. Sep 23, 2022 at 8:02
  • @RashmiRanjan Please accept the answer once you think, it works for you. So it will be a solution for everyone . Thanks Sep 23, 2022 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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