0

I am trying to post to a list with a custom form. Each time I try to submit my for the console prints out a "403 FORBIDDEN" error. I have Site Collection Admin rights for the entire site. Here is my code:

    <body>

<div id="AddListData">
    <div>
        Onboard Date:
        <br />
        <input type="text" id="datePicker"/>
    </div>
    <div>
        Name:
        <br />
        <input type="text" id="txtTitle" />
    </div>
    <div>
        Position: 
            <br />
        <input type="text" id="position"/>
    </div>
        <br />
    <div>
            <select id="choiceO" >
                <option selected="selected" value="No">No</option>
                <option value="Yes">Yes</option>
            </select>
    </div>

    <div>
        <input id="btnSubmit" type="button" value="Submit" />
    </div>
</div>
<div id="divResult"></div>

<script src="https:x/jquery.js"></script>
  <script src="x/jqueryUICal.js"></script>
  <script type="text/javascript">
    $(function () {
    bindButtonClick();

});

function bindButtonClick() {
    $("#btnSubmit").on("click", function () {
        addListItem();
    });
}


function addListItem() {
    var title = $("#txtTitle").val();
    var position= $("#position").val();
    var date = $("#datePicker").val();
    var oCheck = $("#choiceO").val();

    var fullUrl = "site/_api/web/lists/GetByTitle('FormDemo')/items";

    $.ajax({
        url: fullUrl,
        type: "POST",
        data: JSON.stringify({
            '__metadata': { 'type': 'SP.Data.FormDemoListItem' },
            'Title': title,
            'Position': position,
            'OnboardDate': date,
            'O': oCheck
        }),
        headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: onQuerySucceeded,
        error: onQueryFailed
    });

}

function onQuerySucceeded(sender, args) {
    $("#divResult").html("Item successfully added!");
}

function onQueryFailed() {
    alert('Error!');
}

  </script>

</body>
  • Run this line in console $("#__REQUESTDIGEST").val(). Check and let me know if you are getting request digest value or it is undefined. – Rohit Waghela Sep 13 at 6:20
0

Try below code. It should work. I have modified your code little bit.

I suspect you are not using SharePoint Master Page in your custom form. So you will not get request digest vakue directly through $("#__REQUESTDIGEST").val() as it is available only in SharePoint Master Pages.

So You will have to get it first by POST call to "_api/contextinfo"

$(function () {
    bindButtonClick();
});

function bindButtonClick() {
    $("#btnSubmit").on("click", function () {
        GetRequestDigestValue().then(GetRequestDigestValueSuccess, GetRequestDigestValueFailed);
    });
}


function GetRequestDigestValue(){
    return $.ajax({
        type : "POST",
            url:"https://mysiteName.sharepoint.com/sites/RohitW/_api/contextinfo",
            headers : {
                'Accept': "application/json;odata=verbose",
                'Content-Type': "application/json;odata=verbose"
            }
    });
}

function GetRequestDigestValueSuccess(data){
    formDigestValue = data.d.GetContextWebInformation.FormDigestValue;
    addListItem(formDigestValue);
}

function GetRequestDigestValueFailed(error){
    // Failure Handler code goes here
}

function addListItem(formDigestValue) {

    var title = $("#txtTitle").val();
    var position= $("#position").val();
    var date = $("#datePicker").val();
    var oCheck = $("#choiceO").val();

    var fullUrl = "site/_api/web/lists/GetByTitle('FormDemo')/items";

    $.ajax({
        url: fullUrl,
        type: "POST",
        data: JSON.stringify({
            '__metadata': { 'type': 'SP.Data.FormDemoListItem' },
            'Title': title,
            'Position': position,
            'OnboardDate': date,
            'O': oCheck
        }),
        headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": formDigestValue
        },
        success: onQuerySucceeded,
        error: onQueryFailed
    });

}

function onQuerySucceeded(sender, args) {
    $("#divResult").html("Item successfully added!");
}

function onQueryFailed() {
    alert('Error!');
}
  • I get a "_spPageContextInfo.webAbsoluteUrl" is not defined console error. – Ben Segarra Sep 13 at 15:03
  • @Ben Segarra It was my mistake. It is also available only on SharePoint master pages. You can directly use your site url. I have updated the answer accordingly. Try it out.. – Rohit Waghela Sep 13 at 18:57

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.