0

I have a custom SharePoint designer new form where on cancel button (on ribbon), I want to give a confirmation box.

On clicking Yes, it should redirect to allitems.aspx and on clicking No it should remain on the form and do nothing.

I have implemented the following code.

$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").removeAttr("onclick");
$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").click(function(e){
    if (confirm('The data on this form might have changed. Are you sure you want to close this form?'))
    {
        return true;
    }
    else
    {
        e.preventDefault();
        e.stopImmediatePropagation();
        // Do nothing!
    }
});`

I get the confirmation box but whether clicking on Yes or No, it anyway redirects me to allitems.aspx.

3 Answers 3

0

Please return false in case of else condition.

function Confirm()
{
  var x = confirm("Are you sure ?");
  if (x)
      return true;
  else
    return false;
}
7
  • I've tried that, still on clicking no it redirects Jan 25, 2017 at 10:41
  • How you have written redirect code, Could you please share here? Jan 25, 2017 at 10:54
  • I haven't written any redirection code, by default Sharepoint cancel button redirects to allitems.aspx. Jan 25, 2017 at 10:56
  • As you can see in the first loc, I've even tried to override that by removing onclick attribute, but I guess it doesn't work Jan 25, 2017 at 10:57
  • Have you checked in which condition it's going to If Block and when in else block. You can debug in different way- If {Redirect to page A} else {redirect to page B}, see how your code react in this case.. Jan 25, 2017 at 11:00
0

You are removing the default 'onclick' of the Cancel button so its click can't redirect you to "AllItems.aspx" page unless and until you redirect your page. Refer below code:

$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").removeAttr("onclick");
$("#Ribbon\\.ListForm\\.Edit\\.Commit\\.Cancel-Large").click(function(e){
    if (confirm('The data on this form might have changed. Are you sure you want to close this form?'))
    {
        window.location = url;  //the url variable contains page location of "AllItems.aspx"
    }
});`

@Mayank, please try below code might it works.

<script>

function overrideCancel()
{
    //Custom input button
    var input = document.createElement('input');
    input.type = "button";
    input.name = "Cancel";
    input.value = "Cancel";
    input.id = "custominput";
    document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
    document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");

    //Hiding already implemented cancel buttons
    document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
    document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";

    //this is main logic to move history back
    document.getElementById("custominput").setAttribute("onclick", "Cancel()");
}

function Cancel()
{
    if(confirm("Are you sure to leave the page?"))
    {
        window.location = url;
    }
    else
    {
        return false;
    }
}

_spBodyOnLoadFunctionNames.push('overrideCancel');
</script>

<style>
#Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
{
    display:none;
}
</style>
14
  • The click is redirecting me to allitems.aspx Jan 25, 2017 at 17:14
  • The click which you set after removing default click is redirecting you to Allitems.aspx page, isn't it? Jan 25, 2017 at 17:16
  • When I click cancel, a confirmation box appears. Then whether I click Yes or No, it redirects me to AllItems.aspx. I want this happening only on clicking Yes Jan 25, 2017 at 17:18
  • Please add "return false;" in the else part of if condition. Jan 25, 2017 at 17:22
  • I've tried that, it's the above answer Jan 25, 2017 at 17:23
0

I have hidden the original button through css and created exactly the same custom button via javascript and jquery. It works great.

Here is the code.

function overrideCancel() {
    var input = document.createElement('a');
    input.title = "Cancel";
    input.role = "button";
    input.id = "custominput";
    $('.ms-cui-group:first').find('.ms-cui-row-onerow:first').append(input)
    $("#custominput").addClass("ms-cui-ctl-large");

    var firstSpan = document.createElement('span');
    firstSpan.id = "fSpan";
    $("#custominput").append(firstSpan);
    $("#fSpan").addClass("ms-cui-ctl-largeIconContainer");

    var innserSpan = document.createElement('span');
    innserSpan.id = "iSpan";
    $("#fSpan").append(innserSpan);
    $("#iSpan").addClass("ms-cui-img-32by32");
    $("#iSpan").addClass("ms-cui-img-cont-float");
    $("#iSpan").addClass("ms-cui-imageDisabled");

    var cancelImg = document.createElement('img');
    cancelImg.style = "top: -511px;left: -273px";
    cancelImg.src = "/_layouts/15/1033/images/formatmap32x32.png?rev=23";
    $("#iSpan").append(cancelImg);

    var lbl = document.createElement('span');
    lbl.id = "lblSpan";
    $("#custominput").append(lbl);
    $("#lblSpan").addClass("ms-cui-ctl-largelabel");
    $("#lblSpan").text("Cancel");
    $("#custominput").click(function () { Cancel() });
}

function Cancel() {
    var url = _spPageContextInfo.webAbsoluteUrl + "/Lists/(ListName)/AllItems.aspx";
    if (confirm("Are you sure you want to close this form?")) {
        window.location = url;
    }
    else {
        return false;
    }
}

Your Answer

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

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