Create a list item using Sharepoint REST API and HTML

Question

I'm working on SharePoint Server 2016. I have a modal with some input fields and a Submit Button. And I used jQuery to extract text from input fields in Modal. When I click on Submit, nothing is happening and unable to add modal input data in the list.

But if I give data in rest API code, then it is working. I can't figure it what's my mistake in the code and method done in rest API or HTML. Please help me to resolve this issue. Below is my code snippet:

HTML:

<div class="form-item form-item-pid form-type-textfield form-group">

 <label class="control-label" for="edit-pname">Project Name<span style="color:red">*</span></label>
 <input class="form-control form-text" type="text" id="edit-pname" name="pname" value="" size="60" minlength="3" maxlength="128" required>

</div>
   
<div class="form-item form-item-pid form-type-textfield form-group">

 <label class="control-label" for="edit-pmanager">Project Manager<span style="color:red">*</span></label>
 <input class="form-control form-text" type="text" id="edit-pmanager" name="pmanager" value="" size="60" minlength="3" maxlength="128" required>
                                    
</div>
                                    
<div class="form-item form-item-pid form-type-textfield form-group">

 <label class="control-label" for="edit-aname">Account Name<span style="color:red">*</span></label>
 <input class="form-control form-text" type="text" id="edit-aname" name="aname" value="" size="60" minlength="3" maxlength="128" required>
      
</div>

<div class="modal-footer">

<button class="submit btn btn-primary" data-dismiss="modal" type="button" id="userartifact-submit" onclick="createItem();" value="SUBMIT" style="margin-left:-200px;">Submit</button>

</div>

JS:

function createItem() {
       
     //Fetch the values from the input elements    
    var projectName = $('#txtedit-pname').val();  
    var projectManager = $('#txtedit-pmanager').val();  
    var accountName = $('#txtedit-aname').val();  

   var rei = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('xyz')/items";

    $.ajax({
      async: true
        url: rei,
       type: "POST",
       data: JSON.stringify({ '__metadata': { 'type': 'SP.Data.xyzListItem' },
         'nofb': projectName,
         'ug2r': projectManager,
         'nzxf': accountName,      
       }),
  
     headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "IF-MATCH": "*"
        },

        success: onSuccess,
        error: onError
    });

    function onSuccess(data) {
        console.log('List Item Created!!');
    }

    function onError(error) {
        alert(JSON.stringify(error));
    }
    }

Ganesh Sanap - MVP · Accepted Answer · 2021-05-27 06:43:56Z

1

You are using wrong jQuery selectors while fetching the values from the input elements.

Use this:

// Fetch the values from the input elements    
var projectName = $('input#edit-pname').val();  
var projectManager = $('input#edit-pmanager').val();  
var accountName = $('input#edit-aname').val();

OR simply (if element IDs are unique on DOM):

// Fetch the values from the input elements    
var projectName = $('#edit-pname').val();  
var projectManager = $('#edit-pmanager').val();  
var accountName = $('#edit-aname').val();

Also, to create a new item, you don't need "IF-MATCH": "*" in headers.

edited May 27, 2021 at 6:43

answered May 27, 2021 at 6:38

Ganesh Sanap - MVP

47.4k22 gold badges32 silver badges64 bronze badges

Add a comment |

Divya Sharma · Accepted Answer · 2021-05-27 05:43:28Z

1

Please try by removing IF-MATCH from the HTTP request header as it makes the request conditional and try it as below:

headers: {  
          "accept": "application/json;odata=verbose",  
          "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
          "content-Type": "application/json;odata=verbose"  
         },

answered May 27, 2021 at 5:43

Divya Sharma

1,45911 silver badges26 bronze badges

Thanks for the response. I tried what you suggested me but it didn't work.

Venkat Sai
– Venkat Sai

2021-05-27 05:49:26 +00:00
Commented May 27, 2021 at 5:49

Add a comment |

Stack Exchange Network

Create a list item using Sharepoint REST API and HTML

2 Answers 2

Your Answer

Hot Network Questions

Create a list item using Sharepoint REST API and HTML

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions