onchange submit but keep the first selected option

Question

So, whenever the user chooses "hightolow" and "1", it normally redirects to sortby=hightolow&availability=1. However, if a user changes availability to 0, it redirects to the FIRST of sortby and availability=0 (sortby=lowtohigh&availability=0)

I want the selected option to stay as it got chosen by the user (i.e: sortby=hightolow&availability=0), what's the best solution? Thanks.

I use express.js (node.js) as a back-end solution.

<form method="GET" onchange="submit()">
  <label>Sort By</label>
  <div>
    <select name="sortby">
      <option value="lowtohigh">Price (Low to High)</option>
      <option value="hightolow">Price (Low to High)</option>
      <option value="new">Newest</option>
    </select>
  </div>

  <label>Availability</label>
  <div>
    <select name="availability">
      <option value="1">Available</option>
      <option value="0">Out of Season</option>
    </select>
  </div>
</form>

You could use whatever backend you have to set the selected value equal to the `$_GET` value. — JordyvD, Nov 05 '17 at 14:05
Database, session storage, local storage. All options to save the input. — Mouser, Nov 05 '17 at 14:06
Ah, this can't be done on the client side? I use express.js (node.js) — Cedric Hadjian, Nov 05 '17 at 14:08

AngYC · Accepted Answer · 2017-11-05T14:55:03.263

0

That's because when you submit your form, the value will return to your original state (default to first element), therefore any subsequent change will only reflect to single select box, you can let me know what is your backend so I can write a sample code of handling

Hope it helps!

Edit: For express.js, you can do this in your handler (I didn't use any render middleware here)

function(req, res) {
    var selection = [{
        name: "sortby",
        label: "Sort By",
        options: [
            { value: "lowtohigh", label: "Price (Low to High)" },
            { value: "hightolow", label: "Price (High to Low)" },
            { value: "new", label: "Newest" }
        ]
    }, {
        name: "availability",
        label: "Availability",
        options: [
            { value: "1", label: "Available" },
            { value: "0", label: "Out of Season" }
        ]
    }];

    var html = "";

    selection.forEach(function(select) {
        html += `<label>${select.label}</label>`;
        html += `<div><select name="${select.name}">`;
        select.options.forEach(function(opt) {
            var selected = (opt.value == req.query[select.name]) ? "selected" : "";
            html += `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
        });
        html += `</select></div>`;
    });

    res.send(`<form method="GET" onchange="submit()">${html}</form>`);
}

edited Nov 05 '17 at 14:55

answered Nov 05 '17 at 14:07

AngYC

3,051
6
20

I'm facing exactly the same problem as I was facing before. :( – Cedric Hadjian Nov 05 '17 at 14:45
You mind showing more codes? Especially the handler for this request – AngYC Nov 05 '17 at 14:46
I simply used router.get('/hello', .... YOUR CODE HERE) and encountered the same problem. – Cedric Hadjian Nov 05 '17 at 14:49
Ah my mistakes, it should be `req.query` instead of `req.params`, I didn't try my code just now (Post edited), you can try using the latest code now – AngYC Nov 05 '17 at 14:55
No problem, `req.query` will parse your GET request and make it into a Javascript object, and what the code does is check for the matching value and add `selected` attribute to it. p/s: up vote if you don't mind =) – AngYC Nov 05 '17 at 15:30
By the way, I think this could also be done in the EJS file using req.query (first by passing query object to the locals of course) – Cedric Hadjian Nov 05 '17 at 15:34
I still can't upvote, need more reputations. :/ And yes I got what you're doing, thanks again! – Cedric Hadjian Nov 05 '17 at 15:34
Yup, it can be done in frontend as well, you can parse the query by following this solution: [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) – AngYC Nov 05 '17 at 15:37
yep, res.locals.query = req.query – Cedric Hadjian Nov 05 '17 at 15:41

onchange submit but keep the first selected option

1 Answers1