0

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));
    }
    }

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.

0
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"  
         },
1
  • Thanks for the response. I tried what you suggested me but it didn't work. – Venkat Sai May 27 at 5:49

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.