Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
added 2816 characters in body
Source Link
John John
  • 1
  • 49
  • 258
  • 603
<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 Arqaam Capital, 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>

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...

<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 Arqaam Capital, 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>
<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>

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...

Source Link
John John
  • 1
  • 49
  • 258
  • 603

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

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 Arqaam Capital, 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 ?