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