javascript 使查询字符串自动填充表单

Question

我的编码经验很少，但总的来说是一个快速学习者，并且一直在一点一点地查找内容以学习如何创建网页所需的一些简单内容。我希望能够使用 URL 中的查询字符串自动填充表单（即 example.com?color=blue 将自动加载表单，其中已在表单部分填写了选项“blue”名为“颜色”）。这是我的 html 代码中构成表单的部分：

<form id="wsite-com-product-options">
    <div class="wsite-com-product-option-groups">   
        <div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
            <label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
                <b class="wsite-com-product-title">Photo</b>
            </label>
            <select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
                <option selected="selected" value="">--</option>
                    <option class="wsite-com-dropdown" value="Pelicans">
                        Pelicans                                
                    </option>
                    <option class="wsite-com-dropdown" value="Dolphins">
                        Dolphins
                    </option>
                    <option class="wsite-com-dropdown" value="Rams">
                        Rams
                    </option>
            </select>
        </div>
    </div>
</form>

所以我想，如果我为我的网站输入 URL，然后输入 ?Photo=Pelicans 或 ?Photo=Dolphins，该表格将自动分别填写答案 Pelicans 或 Dolphins。显然那是行不通的，我现在的理解是我需要一些 javascript 代码来使查询字符串像那样工作？但我已经尝试了几个星期来弄清楚如何做到这一点，逐行检查我能找到的每一个相关示例代码，以试图理解他们在做什么，并且 none 它已经奏效了。是否有一个相对简单的代码可以完成此功能，还是我作为菜鸟完全超出了我的理解范围？

Answer 1

假设您正在尝试从提供给用户的当前 URL 中获取参数，并相应地选择元素。

我已经为您编写了 javascript 代码。检查它是否有效。如果您想使用当前的 URL，请将 javascript 中的 URL 更新为 window.location.href。

var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url)
var url = new URL(url_string);
var c = url.searchParams.get("photo");
document.querySelector('option[value="'+c+'"]').selected = true
console.log(c);

<form id="wsite-com-product-options">
    <div class="wsite-com-product-option-groups">   
        <div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
            <label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
                <b class="wsite-com-product-title">Photo</b>
            </label>
            <select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
                <option selected="selected" value="">--</option>
                    <option class="wsite-com-dropdown" value="Pelicans">
                        Pelicans                                
                    </option>
                    <option class="wsite-com-dropdown" value="Dolphins">
                        Dolphins
                    </option>
                    <option class="wsite-com-dropdown" value="Rams">
                        Rams
                    </option>
            </select>
        </div>
    </div>
</form>

javascript 使查询字符串自动填充表单

javascript to make query strings autofill a form

html

javascript

forms

auto-populate

query-string