4

I have an HTML form on a web page. I want to send users an email with a URL that they can click to fill out the form. I want to pre-populate the value of a radio button group using URL parameters only.

The platform I am using does not allow me to do any scripting of any kind. I need to do this using only the URL parameters.

This is trivial for other types of input tags. For example, if I have a page called form.html and within that page I have an input tag as follows:

<input name="firstname" type="text">

Then I can use the following URL to pre-populate the field with the value "James":

http://form.html?firstname=James

What I am looking for is how to do this with a radio button. For example, let's say my page form.html has a radio button group with three options as follows:

<input name="status" type="radio" value="New">
<input name="status" type="radio" value="Expired">
<input name="status" type="radio" value="Renewed">

How do I pre-set the value of this radio button group with a URL parameter?

I have tried the following:

http://form.html?status=Expired

But this doesn't work. Is there any way to do this without JS or JQuery? You may think I can just set the value I want to be selected by default using the checked=true attribute in the HTML itself, but the problem is that the value I want to pre-populate is different depending on the user, so I need to set it in the URL parameter.

ChaosFreak
  • 574
  • 1
  • 6
  • 18

1 Answers1

-2

Came across this when looking for same answer and surprised no one answered it. Bit late but I figured this out and thought I'd put in answer here. Basically, I ran an pageload function and grabbed the parameters via URLSearchParams then selected the radio button via an ID. For example:

Add IDs to your radio buttons:

<input id="new" name="status" type="radio" value="New">
<input id="expired" name="status" type="radio" value="Expired">
<input id="renewed" name="status" type="radio" value="Renewed">

Then run the javascript below upon pageload (add if statements to handle different statuses):

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const status = urlParams.get('status'); 
if (status == "expired") {
 document.getElementById("expired").checked = true;
 }

I based this off the following answer but modified it for radio butons: https://stackoverflow.com/a/70267794/7901491

iampre409
  • 167
  • 1
  • 10
  • Hi, thanks for the answer but my original question clearly states "without using JQuery or JavaScript". I already know how to do it with JavaScript. – ChaosFreak Aug 30 '22 at 14:46