Pass Query String Parameter(s)

pass-query-string-parameter-s.markdown

Pass Query String Parameter(s)

This donation button toggles between 2 view states via CSS and the slide-down effect is powered by some simple jQuery.

The second function appends the "amount" query string parameter and the value of your selected radio button to the end of the destination page URL upon a "faux" form submission.

This can be customized for all types of input fields.

A Pen by Mark Hillard on CodePen.

License.

script.js

// Inspiration: http://www.aspsnippets.com/Articles/Send-Pass-Data-Values-from-one-page-to-another-using-jQuery.aspx

$(document).ready(function () {
    // slide-down panel toggle effect
    $('#button').on('click', function () {
        $('#panel').slideToggle(250);
    });
    
    // send query string parameters to destination page (redirect)
    $('#send').on('click', function () {
        var url = '//codepen.io/markhillard/full/Exwou?amount=' + encodeURIComponent($('input[type="radio"]:checked').val());
        window.location.href = url;
    });
});

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

.steps {
color:#fff;
font-size:15px;
list-style-position:inside;
margin:0;
padding:0;
}

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

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

#button {
background:#333;
color:#ddd;
cursor:pointer;
font-size:20px;
font-weight:700;
padding:12px 15px;
transition:background 250ms ease;
width:225px;
}

#button:hover { background:#222; }

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

#send {
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 20px 4px;
overflow:visible;
padding:4px 7px 4px 6px;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,.4);
white-space:nowrap;
}

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

test.html

<ol class="steps">
    <li>Click "Donate Now!"</li>
    <li>Select an amount.</li>
    <li>Click "Send".</li>
    <li>Watch the magic.</li>
</ol>
<br>
<div id="container">
    <div id="button">Donate Now!</div>
    <div id="panel">
        <p>Choose Amount:</p>
        <form name="choose_amount">
            <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="send" type="button" value="Send">
        </form>
        <p>Click "Send" to pass all form data to the destination page.</p>
    </div>
</div>