How to add values to item once user completes form. They are coming across blank in my api POST

Question

My Sharepoint page is Posting data via an api Post. The issue is that two fields are inserting as empty text instead of as the values entered by the user. Here's how the form is supposed to work. I lookup SiteURL, and SiteId when the page starts. Then, after the page loads and the user has entered data, the values for "Title" and "Suggestion" should pass in the values they keyed into the two textboxes. How do I add the values the users entered in the textboxes?

<script>
    var listName ="Suggestion";
    var listName2 = "New Request";
    var siteIdFromParameter
    var item
    var siteUrlFromParameter = getUrlParam('site', _spPageContextInfo.webAbsoluteUrl);

    $.ajax({

            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName2 + "')/items?$filter=SitePath eq '" + siteUrlFromParameter + "'",
            type: "GET",
            contentType: "application/json;odata=verbose",
            async: false,
            headers: {
              "Accept": "application/json;odata=verbose",
             "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
        }).then(function (data) {


        item = {
            "__metadata": { "type": "SP.Data.FeatureSuggestionsListItem" },
            "Title": $('#inputTitle').val(),
            "Suggestion": $('#inputSuggestion').val()
            };

        if (data && data.d && data.d.results && data.d.results.length && data.d.results[0].Id) {
                siteIdFromParameter = data.d.results[0].Id
                item.SiteURL = siteUrlFromParameter;
                item.SiteId = siteIdFromParameter;
             }
            else
            {
                item.SiteURL ==  null
                item.SiteId == null
            }

        });


        $('#btnSubmit').on('click', function () {
            debugger;
            if (($('#inputSuggestion').val() != ''))
            {
                addFeatureSuggestion();
                return false;
            }
            else {
                alert("Required fields must be completed!");
                return false;
            }
        });

        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
                });
            return vars;
        }

        function getUrlParam(parameter, defaultvalue){

            var urlparameter = defaultvalue;
            if(window.location.href.indexOf(parameter) > -1){
            urlparameter = getUrlVars()[parameter];


        }
            return urlparameter;
    }


    function addSuggestion() {

        $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/lists/getbytitle('" + listName + "')/Items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            async: false,
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function (data) {

                $(".newsuggestionform").hide();
                $(".newsuggestionsuccess").show();
                $(".newsuggestionfailure").hide();

            },
            error: function (data) {
                $(".newsuggestionfailure").show();
            }
        });
        return false;
    }


</script>

Answer 1

I think you are facing this issue because you are using old item variable in addSuggestion() function which is initialized on page load.

But to get the new values of textboxes, you need to get those value using $("#elementId").val() for each textbox after the submit button is clicked (i.e. inside addSuggestion() function).

So I would recommend you to create a new variable which will store all the values of textboxes and used in data payload of "POST" REST API.