2

I have this form, and I can't change anything about it (ids, vals, etc) because its auto generated by my website builder. Is it possible to use code or even better, just use the URL to auto select an option? For example, use the URL

https://mywebsite.com/GCValue=50/

to select the 50 option in the form below, instead of the 10 that it will default on? I'm a beginner with JS and JQuery, so I'm happy to use those and learn a little bit about it during the process, if its possible.

<select id=GCValue>
  <option val="10">10</option>
  <option val="25">25</option>
  <option val="50">50</option>
  <option val="100">100</option>
  <option val="250">250</option>
</select> <br />

Any help or external links pointing me in the right direction appreciated.

ThatBraxGuy
  • 39
  • 5

2 Answers2

1

Using Just One Variable from JS Document Pathname

Use window.location.pathname to get the path of the current page, then use a simple regex.exec(url) to capture anything that matches /=([0-9])+/. This will match anything in the format of "=12345", and return "12345" as the match.

var url = "https://mywebsite.com/GCValue=50/";
// in reality, use this:
// var url = window.location.pathname;
var regex = /=([0-9]+)/g;
var match = regex.exec(url);
document.getElementById("GCValue").value = match[1];
<select id="GCValue">
  <option val="10">10</option>
  <option val="25">25</option>
  <option val="50">50</option>
  <option val="100">100</option>
  <option val="250">250</option>
</select> <br />

Using Many Variables from JS Document Pathname

If you wanted to use many parameters, just extend the same logic. For instance, imagine: /GCValue=50/Page=765/Index=42/...

var url = "https://mywebsite.com/GCValue=50/Page=765/Index=42/";
// in reality, use this:
// var url = window.location.pathname;
var regex = /([A-Za-z0-9]+)=([0-9]+)/g;
var match;
while ((match = regex.exec(url)) != null) {
    document.getElementById(match[1]).value = match[2];
}
<select id="GCValue">
  <option val="10">10</option>
  <option val="25">25</option>
  <option val="50">50</option>
  <option val="100">100</option>
  <option val="250">250</option>
</select> <br />

<input id="Page" type="text"><br>
<input id="Index" type="text">
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
  • Thanks for your response! When I load this in, it comes up with a 404, do I need a `?` before the GCValue in the URL to fix that? That doesn't seem to work either. I guess I'm not totally sure how to format this correctly. – ThatBraxGuy Dec 08 '21 at 00:07
  • 1
    @ThatBraxGuy Heyas! So, getting your server to handle URLs like `https://mywebsite.com/GCValue=50/` is a different issue. I only posted the JS solution here. You COULD use `?GCValue=50`, but the problem (JS-wise) only becomes a different one of [equal difficulty](https://stackoverflow.com/a/901144/2430549) (SO solution). If my answer helped solve your JS issue (based on your q tags), let me know by accepting. – HoldOffHunger Dec 08 '21 at 00:24
  • Getting this error when I try to run it: `?GCValue=5/:330 Uncaught TypeError: Cannot read properties of null (reading '1') at ?GCValue=5/:330` using GCValue=5 – ThatBraxGuy Dec 08 '21 at 00:38
  • 1
    @ThatBraxGuy Hey, so, that doesn't really help me, I'd need to see your code to know what would produce that. I mean, my code demo above works perfectly, right? If you're having new problems in different areas, I would recommend posting a new question (or, better yet, just digging around SO for answers). SO is great because you can find short answers to quick questions! Not because there are massive solutions to massive problems. Solve one problem with SO, mark it right/wrong, rinse/repeat with next problem. =) – HoldOffHunger Dec 08 '21 at 00:44
0

UPDATED

Here is a solution using url query parameters.

// Your link should look like this: https://www.boothemusic.com/gift-card/?price=50

const selectList = document.getElementById('GCValue');
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const price = urlParams.get('price'); // change "price" to anything you want.

for (let option of selectList.options) {
  let chosen = option.value;
  if(chosen === price) {
    selectList.value = price;
  }
}
<select id="GCValue">
  <option value="10">10</option>
  <option value="25">25</option>
  <option value="50">50</option>
  <option value="100">100</option>
  <option value="250">250</option>
</select>

const price = urlParams.get('price'); assigns the value associated with the given search parameter to price (Check this article to learn more about URLSearchParams). Then for-of loop skims through select options and looks for a match for price variable. If any of the options match price (50 in this case), then its value is set as price hence selecting 50 on your dropdown.

junior_dev
  • 39
  • 6