How to keep selected values in html in flask app-CodePudding

This if my html file and i just want to keep the selected values in the dropdown menu after clicked. That's only my problem I hope for your response. I try a lot of methods but I can't solve my problem. Thankyou for the help

<form action="{{url_for('values')}}" method='POST'>
     <div >
<div >
         <label style="font-weight: bold; color:white;">Select a Fish:</label>
<select name="fish" >
    <optgroup label="BRACKISHWATER FISHPOND">
      <option value="BF - Milkfish">BF - Milkfish</option>
          <option value="BF - Tilapia">BF - Tilapia</option>
          <option value="BF - Tiger prawn">BF - Tiger Prawn</option>
            <option value="BF - Mudcrab">BF - Mudcrab</option>
            <option value="BF - Endeavor prawn">BF - Endeavor prawn</option>
            <option value="BF - White shrimp">BF - White shrimp</option>
            <option value="BF - Grouper">BF - Grouper</option>
            <option value="BF - Siganid">BF - Siganid</option>
  </optgroup>
</select>

         <label style="font-weight: bold; color:white;">Number of Quarter/s:</label>
         <select name="quarter"  >
          <option value="0">1 (JANUARY-MARCH)</option>
          <option value="1">2 (APRIL-JUNE)</option>
          <option value="2">3 (JULY-SEPTEMBER)</option>
          <option value="3">4 (OCTOBER-DECEMBER)</option>
        </select>
</div>
         <div >
     <button type="submit" >Submit</button>
     </div>

CodePudding user response：

Frontend You can save selected data in localstorage when you click the button and then select the option which its value is equal to the save data.

OR Backend use session storage

this code snippet is frontend solution, link this javascript code to your html and it should work fine

let btn = document.querySelector('.btn_pos .btn');
let fishDropdown = document.querySelector('[name=fish]');
let quarterDropdown = document.querySelector('[name=quarter]');
    
// select last clicked fish option
document.querySelectorAll('[name=fish] option').forEach(el => {
    el.value == localStorage.getItem('savedFish') && el.setAttribute('selected', true);
});

// select last clicked quarter option
document.querySelectorAll('[name=quarter] option').forEach(el => {
    el.value == localStorage.getItem('savedQuarter') && el.setAttribute('selected', true);
});

btn.addEventListener('click', ()=> {
    let selectedFish = fishDropdown.value;
    let selectedQuarter = quarterDropdown.value;

    localStorage.setItem('savedFish', selectedFish);
    localStorage.setItem('savedQuarter', selectedQuarter);
});

<div >
    <label style="font-weight: bold; color:white;">Select a Fish:</label>
    <select name="fish" >
        <optgroup label="BRACKISHWATER FISHPOND">
            <option value="BF - Milkfish">BF - Milkfish</option>
            <option value="BF - Tilapia">BF - Tilapia</option>
            <option value="BF - Tiger prawn">BF - Tiger Prawn</option>
            <option value="BF - Mudcrab">BF - Mudcrab</option>
            <option value="BF - Endeavor prawn">BF - Endeavor prawn</option>
            <option value="BF - White shrimp">BF - White shrimp</option>
            <option value="BF - Grouper">BF - Grouper</option>
            <option value="BF - Siganid">BF - Siganid</option>
        </optgroup>
    </select>

    <label style="font-weight: bold; color:white;">Number of Quarter/s:</label>
    <select name="quarter" >
        <option value="0">1 (JANUARY-MARCH)</option>
        <option value="1">2 (APRIL-JUNE)</option>
        <option value="2">3 (JULY-SEPTEMBER)</option>
        <option value="3">4 (OCTOBER-DECEMBER)</option>
    </select>
</div>
<div >
    <button type="submit" >Submit</button>
</div>