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

Question

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>

If you want to do it pure client side and have to use different pages, there's 2 options you can use: Query string parameters in the url or local storage. The first one makes most sense. You can read how to do it in this question: https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters — icecub, Sep 02 '21 at 17:20
Thought I should add a little explanation on how to approach it: On redirecting to the second page, use JS to check which bio was selected. Then redirection to "your_website.com/second_page.html?bio=tristia" or "your_website.com/second_page.html?bio=heidi". Then on the second page, you can read out the `bio` parameter with JS and select things for the user based on it or whatever else you want to use it for. — icecub, Sep 02 '21 at 17:25

score 2 · Accepted Answer · edited Sep 02 '21 at 17:53

2

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?

edited Sep 02 '21 at 17:53

icecub

8,615
6
41
70

answered Sep 02 '21 at 17:25

davidroseboom

187
10

In my original answer I did not set the switch up right. You should, when checking for the value of `window.location.hash` always include the `#` character. I have edited my question to reflect this. – davidroseboom Sep 02 '21 at 17:31
I probably wouldn't use URL fragments for this. They're typically used to set the scroll position on the targeted page. Not to transmit data between pages. It'll probably work fine, but the approach seems to be a bit odd to me. Also, you'd be limited to transmitting 1 type of data only. Pretty sure things will go wrong when you start transmitting multiple values like url/book#trista#page#one etc – icecub Sep 02 '21 at 17:31
Should work fine for this specific use case. Just make sure you don't have any `id="tristia"`'s or `id="#heidi"`'s or you might experience that, like @icecub described, your scroll position will be set to this element. – davidroseboom Sep 02 '21 at 17:35
@icecub You could also transmit more than 1 type of data by using the `split()` method. For example in the link `url/book#data1-data2-data3` you'd use `window.location.hash.split("-")` and get an array with values data1, data2 & data3. – davidroseboom Sep 02 '21 at 17:38
I was thinking something like this, I wasn't sure how to check the the hash through javascript like that when loading into a new page. Thank you for the input! – Tapialj Sep 02 '21 at 17:40
True, but what if you want to set a scroll position as well? I know your solution is probably good enough for this specific use case, but I'm also thinking about future visitors to this question. I'm not trying to nitpick on you or anything here :D Just giving you the opportunity to improve your answer and will definitely upvote myself if you do. – icecub Sep 02 '21 at 17:41
@icecub I added a 'careful' note in the original question. Thanks for your suggestion. – davidroseboom Sep 02 '21 at 17:45
@user3076241 if this answer has solved your problem, please consider marking the answer as accepted for future visitors of this question. – davidroseboom Sep 02 '21 at 17:46
Mind if I edit your answer to improve it further? You'll still get all the credit for it, but it'll help others :) – icecub Sep 02 '21 at 17:47
@icecub not at all! It's what SO is about. – davidroseboom Sep 02 '21 at 17:48

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

1 Answers1