How to pass SiteURL as a parameter into a Form to insert via API Post

Question

I've got a pretty basic form, that has a couple fields that are saving data via SharePoint API post. My ultimate goal is to pass in a parameter in the URL, and save that parameter in the field named "SiteURL". How do I grab the url and insert it as part of my API Post. I've currently just saving "Hello World" for the SiteURL (I wanted to make sure it was saving). Here's my code so far:

function addEntry() {

        var item = {
            "__metadata": { "type": "SP.Data.EntryListItem" },
            "SiteURL": "Hello World",
            "Title": $('#inputTitle').val(),
            "Entry": $('#inputEntry').val()
        };


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

Answer 1

Below function can be used to get the query string parameters from URL:

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

You can use it like:

var mytext = getUrlVars()["siteUrl"];

Okay but when the parameter is missing from the URL the value will be undefined. Here’s how to set a default value to the variable:

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

Use it like this:

var mytext = getUrlParam('siteUrl', _spPageContextInfo.webAbsoluteUrl);

Note: Here I am passing current site URL as default. But, you can pass any other site URL you want by default if the query string parameter is missing from URL

Solution for you:

1. Add getUrlVars() and getUrlParam() functions in your code.
2. Construct a URL to your form page with siteUrl as query string parameter like: https://tenant.sharepoint.com/sites/siteName/SitePages/PageName.aspx?siteUrl=<enter the site URL here>
3. On form page Use your code like below:

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 addEntry() {
    var siteUrlFromURLParameter = getUrlParam('siteUrl', _spPageContextInfo.webAbsoluteUrl);

    var item = {
        "__metadata": { "type": "SP.Data.EntryListItem" },
        "SiteURL": siteUrlFromURLParameter,
        "Title": $('#inputTitle').val(),
        "Entry": $('#inputEntry').val()
    };


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

Reference: Get URL Parameters With JavaScript.

Answer 2

Per this community post, you can use URLSearchParams which is simple and has decent (but not complete) browser support.

Assuming the value was passed to this page like https://fullpageurl.aspx?SiteUrl, then the following should get you what you need:

    function addEntry() {

        const urlParams = new URLSearchParams(window.location.search);

        var item = {
            "__metadata": { "type": "SP.Data.EntryListItem" },
            "SiteURL": urlParams.get('SiteUrl'),
            "Title": $('#inputTitle').val(),
            "Entry": $('#inputEntry').val()
        };


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

Answer 3

We can use the method below to get the parameter from the url.

function getUrlParameter(name){
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

Modify your code as below.

function addEntry() {
    var siteUrl=getUrlParameter("SiteUrl");
    var item = {
        "__metadata": { "type": "SP.Data.EntryListItem" },
        "SiteURL": siteUrl,
        "Title": $('#inputTitle').val(),
        "Entry": $('#inputEntry').val()
    };


    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/lists/getbytitle('" + listName + "')/Items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
    });
    return false;
}
function getUrlParameter(name){
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}