CODEWITHSUNDEEP
javascriptpythonhtmlpython-3.xflask
godzillabeast
godzillabeast

Reputation: 175

How to redirect to another page when drop button is selected with flask?

I'm very new to html and flask. In webapp it contents select dropdown button how can I redirect to other page when dropdown button is selected below are my code

html code

<form action="/gallery_new/folder_path" method="post">
    <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" onchange="checkAlert(event)" name="cadlists">
        <option selected>Select label type </option>
        {% for image_name in image_names %}
        <option value={{image_name}}>{{image_name}}</option>
        {%endfor%} 
      </select>

    </form>


<script>function checkAlert(evt){
        console.log(evt.target.value)
    }
    </script>

Flask code

@app.route('/gallery_new/<folder_path>', methods=["GET", "POST"])
def get_gallery_new(folder_path):
    all_imgs = os.listdir(folder_path)
    all_imgs_val = 0
    img_paths = os.listdir(os.path.join(folder_path,all_imgs[all_imgs_val]))
    cls_name = all_imgs[all_imgs_val]
    return render_template('gallery.html',image_names = all_imgs,img_paths=img_paths,folder_path=folder_path,cls_name=cls_name)

when I choose option in select button it wont redirect to the page I want. How can I modify this code to achieve what I want? any help or suggestion on this will be very helpful

Upvotes: 0

Views: 535

Answers (1)

Titouan L
Titouan L

Reputation: 1173

I was initially thinking of something along the lines of window.location.replace("{{ url_for('get_gallery_new') }}");, but I honestly dont know how to use parameters with this.

Another solution is to submit your form: since the proper option is selected. Give your form and ID, then you can select your form and finally call HTMLFormElement.submit()

<form action="{{url_for('get_gallery_new')}}" method="post" id="myForm">
    <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" onchange="checkAlert(event)" name="cadlists">
        <option selected>Select label type </option>
        {% for image_name in image_names %}
        <option value={{image_name}}>{{image_name}}</option>
        {%endfor%} 
    </select>
</form>


<script>
    function checkAlert(evt){
        console.log(evt.target.value);
        myForm = document.getElementById("myForm");
        myForm.submit();
    }
</script>

And in the Flask code you can retrieve the select value with this after importing request (from flask import request)

@app.route('/gallery_new', methods=["GET", "POST"])
def get_gallery_new():

    folder_path = request.form.get('cadlists')

    all_imgs = os.listdir(folder_path)
    all_imgs_val = 0
    img_paths = os.listdir(os.path.join(folder_path,all_imgs[all_imgs_val]))
    cls_name = all_imgs[all_imgs_val]
    return render_template('gallery.html',image_names = all_imgs,img_paths=img_paths,folder_path=folder_path,cls_name=cls_name)

Upvotes: 1

Related Questions