Change form select name based on dropdown option value

Question

I have a search form that looks like this:

<form action="https://someform.foo" target="_blank">
<div class="searchTerm">
<input placeholder="Search here" autofocus="autofocus" id="query" class="searchbox" name="queryString">
<input type="hidden" name="format" value="all">
</div>
    <div class="dropdown">
      <select name="scope" id="searchLibrary" class="custom-dropdown-menu">
        <option name="scope" value="aa:aaaa" selected>Search A</option>
        <option name="subscope" value="bb:bbbb::bb:bbbb">Search B</option>
        <option name="scope" value="cc:cccc">Search C</option>
        <option name="scope" value="dd:dddd">Search D</option>
        <option name="scope" value="">Search E</option>                 
      </select>
    </div>
<input type="submit" class="headersubmit" value="&#xf002;" title="Search">

</form>

When the form is submitted, the user is directed to a search results page, with the URL formed on the basis of the options selected. The dropdown option name is setting the parameter name in the URL (scope).

For example, if the user selects Search A from the options, the URL looks like this:

https://someform.foo/?queryString=SomeInput&format=all&scope=aa:aaaa

The scope/subscope parameter is set by the select name value, but if a user does select Search B from the search box, I need 'scope' to become 'subscope' in the resulting URL.

But selecting Search B needs to result in this URL:

https://someform.foo/?queryString=SomeInput&format=all&subscope=bb:bbbb::bb:bbbb

I can't get the parameter element to be called subscope, it's always called scope.

I've been trying some jQuery and have been testing with this fiddle. I can get the alert to appear to tell me that the select name has changed, but it doesn't actually change the URL parameter.

All advice/documentation/suggestions appreciated!

Answer 1

On submit, you can identify the selected option's name and value, which you can use to generate a URL:

const searchLibrary = document.querySelector('#searchLibrary');
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const option = searchLibrary.options[searchLibrary.selectedIndex];
  const name = option.getAttribute('name');
  const { value } = option;
  const queryString = document.querySelector('#query').value;
  const url = `https://someform.foo/?queryString=${queryString}&format=all&${name}=${value}`;
  console.log('Redirecting to ' + url);
  // window.open(url);
});

<form action="https://someform.foo" target="_blank">
<div class="searchTerm">
<input placeholder="Search here" autofocus="autofocus" id="query" class="searchbox" name="queryString">
<input type="hidden" name="format" value="all">
</div>
    <div class="dropdown">
      <select name="scope" id="searchLibrary" class="custom-dropdown-menu">
        <option name="scope" value="aa:aaaa" selected>Search A</option>
        <option name="subscope" value="bb:bbbb::bb:bbbb">Search B</option>
        <option name="scope" value="cc:cccc">Search C</option>
        <option name="scope" value="dd:dddd">Search D</option>
        <option name="scope" value="">Search E</option>                 
      </select>
    </div>
<input type="submit" class="headersubmit" value="&#xf002;" title="Search">

</form>