CODEWITHSUNDEEP
javascriptpythonflask
Guillermo Brachetta
Guillermo Brachetta

Reputation: 4775

Automatically redirect on option selected

I have the following select with a submit button. I would really like for the option selected to redirect to my route without me needing to press a submit button, so I could get rid of it.

<form action="{{ url_for("perfumes.filters") }}" class="search-form">
    <div class="form-group">
        <label for="exampleFormControlSelect1">Filter by Type</label>
        <select class="form-control" id="filter_query" name="filter_query" onchange="checkSelected()">
            <option selected='true' name="" value="" id="">Please select a type</option>
            {% for type in types %}
            <option value="{{type['type_name']}}" id="{{type['type_name']}}" name="{{type['type_name']}}">{{type['type_name']}}</option>
            {% endfor %}
            <option value="{{ url_for('types.new_type') }}">Create new type...</option>
        </select><br>
        <button class="btn btn-primary btn-sm" type="submit">Submit</button>
    </div>
</form>

The last option (Create New Type) is already redirecting to its corresponding route with this function. 

function checkSelected() {
    const selected = document.getElementById("filter_query");
    const option = selected.options[selected.options.length - 1];
    if (option.selected == true) {
        window.location = option.value;
    }
}

What would be the best way to adapt that function so I can suppress the "Submit" button and have the redirect automatically triggered on selection?

UPDATE:

This is all now working well, but I get a console error when the option outside the loop gets selected

<form  id="form" action="{{ url_for("perfumes.filters") }}" class="search-form">
    <div class="form-group">
        <label for="exampleFormControlSelect1">Filter by Type</label>
        <select class="form-control" id="filter_query" name="filter_query">
            <option selected='true' name="" value="" id="">Please select a type</option>
            {% for type in types %}
            <option value="{{ url_for('perfumes.filters', filter_query=type['type_name']) }}">{{type['type_name']}}</option>
            {% endfor %}
            <option value="{{ url_for('types.new_type') }}">Create new type...</option>
        </select><br>
        <button class="btn btn-primary btn-sm" type="submit">Submit</button>
    </div>
</form>

And the script:

function checkSelected() {
    if (this.value) window.location = this.value;
}
const EL_select = document.querySelector("#filter_query");
EL_select.addEventListener("change", checkSelected);

Upvotes: 1

Views: 400

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206459

If I got your question correctly, you want to:

  • Last option (having a value of i.e: "some/route") should navigate to that route
  • All other options (which value is not empty) should submit the form immediately

If so than this might help:

function checkSelected() {
  if (this.value === "some/route") return (window.location = this.value);
  if (this.value) this.form.submit();
}

const EL_select = document.querySelector("#filter_query");
if (EL_select) EL_select.addEventListener("change", checkSelected);
<form>
  <select class="form-control" id="filter_query" name="filter_query">
    <option selected value="">Please select a type</option>
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="etc">etc</option>
    <option value="xxx">Create new type...</option>
  </select>
</form>

PS:

  • Stop using inline JS (onchange="checkSelected()")
  • SELECT should have the name attribute, not OPTION elements

Upvotes: 1

ngShravil.py
ngShravil.py

Reputation: 5058

I assume that you want to redirected to some /filte_selected/<id> type of URL, on selecting an option.

You can do the following change for option tag:

<option value="{{ url_for('filter_selected', id=type['type_name']) }}" id="{{type['type_name']}}" name="{{type['type_name']}}">{{type['type_name']}}</option>

You can change your scrip to:

<script>
    function checkSelected() {
        var selectedValue = document.querySelector('#options').value
        if (selectedValue) {
            window.location = selectedValue;
        }
    }
</script>

Upvotes: 1

Nick
Nick

Reputation: 16586

You can actually pull the selected value directly off of the select element. Then, simply redirect users to that value.

function checkSelected() {
  const value = document.querySelector("#select-id").value;
  console.log(value);
  // window.location = value;
}
<select id="select-id" onchange="checkSelected()">
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
</select>

Upvotes: 0

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

You can invoke submit() method programmatically when option change.

const form = document.querySelector("form");
const select = document.querySelector("select");

select.addEventListener("change", (event) => {
  const value = event.target.value;
  console.log(value);
  form.submit();
})
<form id="form" action="{{ url_for("perfumes.filters") }}" class="search-form">
    <select name="filter_query" id="select">
      <option>Select Option</option>
      <option>Option 1</option>
      <option>Option 2</option>
    <select>
</form>

Upvotes: 1

Related Questions