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/