0

I am working on 2 classic online team sites. one site is the root which contain the real list, and the other is acting as the infrastructure site which contain some custom scripts and pages which i am referring inside the root site using the modern embed web part. Inside the root site i have a custom list named "CommentBoxSource", and i am building a simple html form + javascript to submit feedback . but when i submit the form i will get the following error:-

validation for this page is invalid and might be corrupted. Please use your web browser's Back button to try your operation again

here is the HTML code:-

<div id="s" style="font-family: Tahoma;">
<span class="titlehead"><sup>Suggestion Box:</sup></span><br>
Got a suggestion to improve our working environment at , fill out the comment box below.<br>
If preferred, please leave the Name/ Department box empty to submit suggestions anonymously. <br>All entries will be checked on a regular basis and vetted by the HR team to ensure it is business appropriate.<br><br>

  <b>Comment:*</b><br>
  <textarea id="CommentCustom" required="" rows="4" cols="50"></textarea>
  <br>
  <b>Name / Department:</b><br>
  <input id="NameDept" type="text"><br><br>
  <input id="submitfeedback" style="color: white; font-size: 14px; background-color: rgb(152, 111, 11);" type="submit" value="Submit"><img id="customloader" style="display: none;" src="/resources/ajax-loader-circle.gif">

<br>
<div id="s" style="font-family: Tahoma;">
</div>
</div>

and here is the javascript which i am referencing below the above html:-

<script src="/resources/jquery-1.10.2.js"></script>
<script>
$( "#submitfeedback" ).click(function(e) { 

    e.preventDefault();

   var namedept = document.getElementById("NameDept").value; 

   var commentcustom = document.getElementById("CommentCustom").value; 

   var itemType = GetItemTypeForListName("CommentBoxSource");
        var item = {
            "__metadata": { "type": itemType },
            "Title": namedept ,
            "CommentBoxComment": commentcustom
        };

        if(commentcustom.trim() === '' || commentcustom.trim() === ' ' || commentcustom.trim().length <= 5 ){ 
    $("#commentcustom").css("background-color", "rgb(256, 0, 0, 0.5)");
    $("#commentcustom").attr("placeholder", "Please enter value here");

  // reset textarea once clicked again
  $("#commentcustom").click(function() {
    $("#commentcustom").css("background-color", "white");
    $("#commentcustom").attr("placeholder", "");
    return;
  });

    return; //<--- This will prevent the ajax call if the Custommessage textarea is blank or only contains whitespace
  }
$("#customloader").show();
        $.ajax({
            url: "/_api/web/lists/getbytitle('" + "CommentBoxSource" + "')/items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function (data) {          

$("#customloader").hide();
                $('#s').find('input, textarea, button, select').attr('disabled','disabled');
                $( "#s" ).replaceWith( "<span style='color:rgb(114, 83, 8)'> Your feedback was submitted successfully</span>" );
            },
            error: function (data) {
                $("#customloader").hide();
                 alert(data);
            }

        });

});

 function GetItemTypeForListName(name) {
        return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
    }
</script>

i am not sure why i am getting this error? and could the reason be that the above code is been executed on different site collection compared to where the CommentBoxSource list is ?

EDIT based on the reply i got from @BigRaj, i modified the script as follow:-

   $( "#submitfeedback" ).click(function(e) { 

    e.preventDefault();

   var namedept = document.getElementById("NameDept").value; 

   var commentcustom = document.getElementById("CommentCustom").value; 

   var itemType = GetItemTypeForListName("CommentBoxSource");
        var item = {
            "__metadata": { "type": itemType },
            "Title": namedept ,
            "CommentBoxComment": commentcustom
        };

        if(commentcustom.trim() === '' || commentcustom.trim() === ' ' || commentcustom.trim().length <= 5 ){ 
    $("#commentcustom").css("background-color", "rgb(256, 0, 0, 0.5)");
    $("#commentcustom").attr("placeholder", "Please enter value here");

  // reset textarea once clicked again
  $("#commentcustom").click(function() {
    $("#commentcustom").css("background-color", "white");
    $("#commentcustom").attr("placeholder", "");
    return;
  });

    return; //<--- This will prevent the ajax call if the Custommessage textarea is blank or only contains whitespace
  }
$("#customloader").show();
        $.ajax({
            url: "/_api/web/lists/getbytitle('" + "CommentBoxSource" + "')/items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $('#__REQUESTDIGEST').val(getDigest())
            },
            success: function (data) {          

$("#customloader").hide();
                $('#s').find('input, textarea, button, select').attr('disabled','disabled');
                $( "#s" ).replaceWith( "<span style='color:rgb(114, 83, 8)'> Your feedback was submitted successfully</span>" );
            },
            error: function (data) {
                $("#customloader").hide();
                 alert(data);
            }

        });

});

 function GetItemTypeForListName(name) {
        return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
    }
    function getDigest(){
  return $.ajax({
    type: 'POST',
    url: '/_api/contextinfo',
    dataType: 'json',
    headers: {
      Accept: 'application/json;odata=verbose'
    }
  }).then(function(results){
    return result.d.GetContextWebInformation.formDigestValue;
  });
}

but still i am getting the same error...

0

your ajax call looks a bit off.

$.ajax({
  url: "http(s)://<URL OF SITE COLLECTION>/_api/web/lists/getbytitle('CommentBoxSource')/items",
  type: "POST",
  data: JSON.stringify(item),
  headers: {
    "Accept": "application/json;odata=verbose",
    "Content-Type": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val() 
  },
  success: function (data) {          
    $("#customloader").hide();
    $('#s').find('input, textarea, button, select').attr('disabled','disabled');
    $( "#s" ).replaceWith( "<span style='color:rgb(114, 83, 8)'> Your feedback was submitted successfully</span>" );
  },
  error: function (data) {
    $("#customloader").hide();
    alert(data);
  }
});

Also if the url is in a different site collection, the Request Digest may not be valid. Consider using this to return the request digest from the target site collection

function getDigest(){
  return $.ajax({
    type: 'POST',
    url: '<target sitecollection url>/_api/contextinfo',
    dataType: 'json',
    headers: {
      Accept: 'application/json;odata=verbose'
    }
  }).then(function(results){
    return result.d.GetContextWebInformation.formDigestValue;
  });
}

If Interested, considering using the sp rest wrapper made by iOnline247

  • thanks now i added the function function getDigest(){ return $.ajax({ type: 'POST', url: '/_api/contextinfo', dataType: 'json', headers: { Accept: 'application/json;odata=verbose' } }).then(function(results){ return result.d.GetContextWebInformation.formDigestValue; }); } to get the formdigest from the root site where the commentboxsource is.. and inside the ajax call i modify the "X-RequestDigest": $("#__REQUESTDIGEST").val() to be "X-RequestDigest": getDigest() but still i get the same error – SharePoint TestDev May 24 at 20:29
  • can you advice on my above comment? – SharePoint TestDev May 27 at 19:49
  • Sorry for the delay. It sounds like a race condition is happening. getDigest() requires a round trip to the server to return the digest. By adding getDigest() as the value for X-RequestDigest It is probably still doing its round trip to the server when your $.ajax call is initiated. That causes the X-RequestDigest to show as null. For test purposes, in the getDigest function, instead of return result.d.GetContextWebInformation.formDigestValue paste your ajax call in there and set X-RequestDigest to be result.d.GetContextWebInformation.formDigestValue – BigRaj May 28 at 14:17
  • Has getting the digest before running your ajax call worked? – BigRaj May 30 at 14:36

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.