CODEWITHSUNDEEP
javascripthtmljquery
Tapialj
Tapialj

Reputation: 345

Select a certain radio button on redirect page after clicking a button on previous page

So I'm working on a project where I have a bio section of two people. I want to add a button to book that individual person by redirecting to the book page and have that persons radio button selected.

Is it possible to have this done? Or maybe it would be better to have a dropdown for the selection instead if that would be easier? Or if it's just not possible, that's okay. Thanks in advance for any help!

Not sure what code you'd like to see but here is the radio button select I have on the book page right now:

<div id="choose-stylist">
    <label for="stylist">Which Stylist would you like to book? </label>
    <ul>
        <li>
            <input type="radio" name="stylist" value="tristia" checked>Tristia
        </li>

        <li>
            <input type="radio" name="stylist" value="heidi">Heidi
        </li>
    </ul>
</div>

Upvotes: 0

Views: 279

Answers (1)

davidroseboom
davidroseboom

Reputation: 197

You could achieve something like this by redirecting to two different hashes, for example to #tristia and to #heidi, like so:

example.com/book#tristia
example.com/book#heidi

Now on the /book page you should add an onload event listener, check for a hash in the link, and check if it's an appropriate hash, like this:

window.onload = function () {
    if (window.location.hash) { //check if link has #hash
        switch(window.location.hash) { // check for value of #hash
            case "#tristia":
                // do something
                break;
            case "#heidi":
                // do something else
                break;
            default: // you could leave this out
                // do nothing
                break;
        }
    }
}

Edit: Like @icecub has stated in the comments, please do be careful when using hashes to transfer data. You could produce some undesired behaviour because hashes typically set the scroll position on a page. For example if you have an element with id="foo" and you have a url like /page#foo your scroll position will be set to the element with id="foo".

If you wish to transmit more than 1 type of data or you intend to set a scroll position on your target page, it's better to use string query parameters for this (typically used in a GET request):

var url_string = "http://www.example.com/target_page.html?book=Tristia&page=one"; //window.location.href
var url = new URL(url_string);
var book = url.searchParams.get("book"); // Tristia
var page = url.searchParams.get("page"); // one

Reference: How to get the value from the GET parameters?

Upvotes: 2

Related Questions