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

【问题标题】：Passing URL query strings into HTML form fields using Javascript使用 Javascript 将 URL 查询字符串传递到 HTML 表单字段
【发布时间】：2018-09-10 23:10:46
【问题描述】：

我一直使用 PHP 将查询字符串传递到表单中，但我希望转移到静态站点场景并且需要来自 URL 的查询数据来填充表单字段。

我的代码没有控制台错误，但数据没有传递到表单字段。有谁知道如何在所有现代和旧版浏览器中实现这一点？

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=john@aol.com https://formpopulate.netlify.com/

【问题讨论】：

当您的意思是 URL query strings 时，您的意思是您正在使用 GET 方法发送您的表单吗？
你试过什么？查找将 url 搜索参数解析为对象的代码很容易搜索。从那里可以很容易地将字段与参数匹配
显示的代码正在您的页面中提交。可以在控制台中运行$('#theForm').submit(e=>e.preventDefault()) 然后单击提交按钮并查看隐藏的输入和值
但请注意，您在示例中复制了 name。隐藏字段与可见字段同名
注意&field[] 类型的字段。

标签： javascript php html forms static-site

【解决方案1】：

你应该使用 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

【讨论】：