Get Query String Parameter(s)

get-query-string-parameter-s.markdown

Get Query String Parameter(s)

This is the destination page that's loaded after the "faux" form submission on the landing page.

The first function parses the value of your previously selected radio button from the "amount" query string parameter in the page URL.

The second function populates the associated radio button based on the query string parameter/value from the page URL.

A Pen by Mark Hillard on CodePen.

License.

index.html

<p class="pen">Your selection from the landing page has been populated below.</p>
<br>
<div id="button">Thank You!</div>
<div id="panel">
    <p>Populated Amount:</p>
    <form name="populated_amount" action="whatever.php" method="post">
        <input type="radio" name="amount" value="100">&nbsp;&#36;100<br>
        <input type="radio" name="amount" value="200">&nbsp;&#36;200<br>
        <input type="radio" name="amount" value="300">&nbsp;&#36;300<br>
        <input type="radio" name="amount" value="400">&nbsp;&#36;400<br>
        <input type="radio" name="amount" value="500">&nbsp;&#36;500<br>
      <input id="submit" type="submit" value="Submit">
    </form>
</div>

script.js

// Inspiration: http://www.designchemical.com/blog/index.php/jquery/8-useful-jquery-snippets-for-urls-querystrings/

$(document).ready(function () {
    // get query string parameter(s)
    var vars = [], hash;
    var query = document.URL.split('?')[1];
    if (query !== undefined) {
        query = query.split('&');
        for (var i = 0; i < query.length; i++) {
            hash = query[i].split('=');
            vars.push(hash[1]);
            populateRadio();
            // add additional functions here...
        }
    }
    
    // check radio button based on query string parameter
    function populateRadio() {
        $('input[type="radio"]').each(function () {
            $('input[name="' + hash[0] + '"][value="' + hash[1] + '"]').prop('checked', true);
        });
    }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

style.css

@import url("//fonts.googleapis.com/css?family=Ruda");

html,body {
background-color:#555;
font-family:"Ruda", arial, sans-serif;
margin:0;
padding:15px 0 0 15px;
}

p {
color:#252525;
font-size:15px;
margin:0 0 8px;
padding:0;
}

.pen { color:#fff; }
.pen a { color:#ccc; }

form { color:#252525; }
input[type="radio"] { margin-bottom:10px; }

#button {
background:#222;
color:#ddd;
font-size:20px;
font-weight:700;
padding:12px 15px;
width:225px;
}

#panel {
background:#ccc;
color:#111;
cursor:auto;
font-weight:400;
height:auto;
padding:15px;
position:absolute;
width:225px;
}

#submit {
background-color:#ddd;
border:1px solid #777;
border-radius:.2em;
box-shadow:0 4px 4px -6px #000;
color:#333;
cursor:pointer;
display:inline-block;
font-family:'Ruda';
font-weight:700;
margin:3px 0 4px 4px;
overflow:visible;
padding:4px 7px 4px 6px;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,.4);
white-space:nowrap;
}

#submit:hover { background-color:#eee; }
#submit:active { box-shadow:none; position:relative; top:1px; }
#submit:focus { background:#fafafa; outline:none; }