How to write js redirect rule for a+ b to alway put a before b, even in b+a scenario?

user_2574614 0
Viewed 31

novice here, be gentle!

I am trying to incorporate some redirect rules for the below and have hit a wall.

Basically, the user selects 2 values from 2 identical dropdowns, so can be A&B or B&A.

But if the url example.com/combo/B-A, I need it to redirect to example.com/combo/A-B

Also if I am approaching it in a horrible way, open to better suggestions.

<div id="my-menu">
    <div class="wrapper menu">
        <form id="form-dropdown">
            <select id="my-menu-1" aria-label="Combine">
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c" selected="selected">C</option>
            <option value="d">D</option>
            <option value="e">E</option>
            <option value="f">F</option>
            <option value="g">G</option>
            <option value="h">H</option>
            <option value="i">I</option>
            <option value="j">J</option>
            <option value="k">K</option>
            <option value="l">L</option></select>
        
            <span class="spt">+</span> 
        
            <select id="my-menu-2" aria-label="Combine">
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d" selected="selected">D</option>
            <option value="e">E</option>
            <option value="f">F</option>
            <option value="g">G</option>
            <option value="h">H</option>
            <option value="i">I</option>
            <option value="j">J</option>
            <option value="k">K</option>
            <option value="l">L</option></select>
        
        <button type="submit" aria-label="Combine">Combine</button>
    
        </form>
    </div>
</div>

    <script type='text/javascript'> 
        const form  = document.getElementById('form-dropdown');
        form.addEventListener('submit', (event) => {
        // stop form submission
        event.preventDefault();
        // if valid, submit the form and redirect to combo page
        var s1, s2 = "https://www.example.com/combo/" + 
            (s1 = document.getElementById('my-menu-1')).options[s1.selectedIndex].value + "-" + 
            (s2 = document.getElementById('my-menu-2')).options[s2.selectedIndex].value + "/";
        //prevents usage of browser back button, but malfunctioning for some reason...cache?
        window.location.replace(s2); 
            });
    </script>
php javascript
2 Answers

A "simple" sort will also do the job - provided the option-values are set in a meaningful way:

const sels=[...document.querySelectorAll("#form-dropdown select")];
sels.forEach(s=>s.addEventListener("change",ev=> console.log(sels.map(s=>s.value).sort().join("-")) ) )
<form id="form-dropdown" aria-label="combine">
  <select id="my-menu-1">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c" selected="selected">C</option>
    <option value="d">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
  </select>

  <span class="spt">+</span>

  <select id="my-menu-2" aria-label="combine">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d" selected="selected">D</option>
    <option value="e">E</option>
    <option value="f">F</option>
    <option value="g">G</option>
    <option value="h">H</option>
    <option value="i">I</option>
    <option value="j">J</option>
    <option value="k">K</option>
    <option value="l">L</option>
  </select>

</form>

user_26100610

Ended up figuring it out with the help of another fellow. Using the comparator function.

const comparator = (a, b) => {
  const signs = ['item', 'item2', 'item 3', 'item 4', 'item 5'];
  return signs.indexOf(a) - signs.indexOf(b);
};

['sign1', 'sign2'].sort(comparator).join('-');

After that its just a matter of assigning sign 1 and sign 2 to the selected values from the 2 my-menu's, attaching them to the base url.

user_25746140
Related