javascript html forms query-string auto-populate

javascript to make query strings autofill a form

I have very little coding experience, but am generally a quick learner and have been looking things up piece by piece to learn how to create a few simple things I need for a webpage. I want to be able to autofill a form using query strings in my URL (i.e. so that example.com?color=blue will automatically load the form with the option "blue" already filled out in the form section named "color"). Here is the part of my html code that makes the form:

<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>

So I thought if I typed the URL for my website, followed by ?Photo=Pelicans or ?Photo=Dolphins, that form would automatically be filled out with the answer Pelicans or Dolphins, respectively. Obviously that didn't work, and my understanding now is that I need some javascript code to make the query string work like that? But I have been trying for a couple weeks now to figure out how to do that, examining every relevant example code I could find line by line to try to understand what they were doing, and none of it has worked. Is there a relatively simple code that would accomplish this function, or am I just completely out of my depth as a noob here?

Solution

Assuming you're trying to fetch your parameter from the current URL given to your users and would be selecting the element accordingly.

I've written javascript code for you. check if it works. In case you want to use your current URL update the URL in javascript with 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>