使用Javascript将URL查询字符串传递到HTML表单字段

Question

I have always used PHP for passing query strings into forms, but I am looking to move to a static site scenario and need the query data from a URL to populate the form fields.

I have the code with no console errors, but the data is not passing into the form fields. Does anyone know how this can be done that works across all modern and legacy browsers?

function getQueryString() {
    var result = {};
    if(!window.location.search.length) return result;
    var qs = window.location.search.slice(1);
    var parts = qs.split("&");
    for(var i=0, len=parts.length; i<len; i++) {
        var tokens = parts[i].split("=");
        result[tokens[0]] = decodeURIComponent(tokens[1]);
    }
    return result;
}

$(document).ready(function() {
    $("#theForm").submit(function(e) {
        //var that = this;
        var qs = getQueryString();
        for(var key in qs) {
            var field = $(document.createElement("input"));
            field.attr("name", key).attr("type","hidden");
            field.val(qs[key]);
            $(this).append(field);
        }
    });
});

https://formpopulate.netlify.com/index.html?name=john&email=[e-mail] https://formpopulate.netlify.com/

Answer 1

You should use URL seachParams:

var params = (new URL("https://example.com/?name=Jonathan&age=18&test=a%20long%20string")).searchParams;
var name = params.get("name"); console.log(name); // is the string "Jonathan"
var age = parseInt(params.get("age")); console.log(age);// is the number 18
var test = params.get("test"); console.log(test); // is a long string

</div>