-1

I want to make sure that my selectfields in my form keep the data that was entered on submit.

I am using html and flask. On submit the form data is disappearing. Do I just have to keep the value of the form or something else.

Pls advise.

I have more fields but I am just showing few lines here.

My code is

 <form method="POST" action="" id="mydivmain" enctype="multipart/form-data" >
           
                
                <div class="form-group">
                    <label for="class1" class="form-control-label">Choose a Class:</label>

                    <select name="class1" id="class1" class="form-control form-control-lg">
                    <option value="all" selected>All classes</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    </select>
                
                
                        
                </div>

                <div class="form-group">
                    <label for="section" class="form-control-label">Choose a Section:</label>

                    <select name="section" id="section" class="form-control form-control-lg">
                    <option value="all" selected>All Sections</option>
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                    <option value="d">D</option>
                    </select>
                
                        
                </div>
            </div>
            <div class="col-md- 6 col-lg-6 "  style="background-color: white; ">
                
                <label for="house" class="form-control-label">Choose a House:</label>

                    <select name="house" id="house" class="form-control form-control-lg">
                    <option value="all" selected>All Houses</option>
                    <option value="puma">Puma</option>
                    <option value="cheetah">Cheetah</option>
                    <option value="jaguar">Jaguar</option>
                    <option value="sher">Sher</option>
                    </select>
                
                        
                
                <div class="form-group">
                    <label for="eventname" class="form-control-label">Choose an Event:</label>
                    

                    <select name="eventname" id="event1" class="form-control form-control-lg" multiple>
                        {% for e in events %}
                    <option value="{{e}}">{{e.event_title}}</option>
                    {% endfor %}
                    </select>
                        
                </div>
            </div>
        </div>
        <div class="row">
             <div class="col-md-12 col-lg-12">
                <div class="form-group">
                    <label for="sport" class="form-control-label">Choose a Sport:</label>
                    

                    <select name="sport" id="sport" value="1" class="form-control form-control-lg" multiple>
                        {% for s in sports %}
                    <option value="{{s}}">{{s.sport_name}}</option>
                    {% endfor %}
                    </select>
                        
                </div>
            </div>
blurfus
  • 13,485
  • 8
  • 55
  • 61
anish
  • 27
  • 1
  • 5

1 Answers1

0

Yes you can, but a bit more complicated.
My solution uses Javascript to submit the form dynamically.
Note that the actual work is done in the Javascript function submitForm().

<body>
<form id="myForm"> <!-- you don't need to specify method and action here -->
    <!-- Whatever stuff here -->
</form>
<button onclick="javascript:submitForm();">Submit !</button>
<!-- NOTE: Move the button outside of the form container -->

<script>
function onReadyStateChange() {
    if (this.readyState == 2 && this.status != 200) {
        alert("Cannot connect to server");
        return;
    }
    if (this.readyState == 4 && this.status == 200) {
        alert("Form submitted successfully !");
        // To redirect to another page after successful submit:
        // window.location.href = "path/to/another/page";
        return;
    }
    alert("Server error");
}

function submitForm() {
    var xhttp = new XMLHttpRequest();
    var loginForm = new FormData(document.getElementById("myForm"));
    xhttp.onreadystatechange = onReadyStateChange;
    xhttp.open("POST", "/path/to/action/page", true);
    xhttp.send(loginForm);
}
</script>
</body>

In this approach, you use Javascript to submit the form, and handle the result as well as any error in Javascript. This way, you need not to reload the page everytime the user submits, and thus you can keep the form content.

Vu Tung Lam
  • 143
  • 1
  • 6
  • 1
    Pure javascript is complicated for this, rather suggest you using ajax jquery, see [this](https://stackoverflow.com/a/67862006/15011621) – charchit Jun 12 '21 at 16:09
  • 1
    @charchit I'd assume that he urgently needs a hotfix, so I give him this code that can be copied and pasted into his source file directly without any dependencies and thus does not demand extra setups. But I'd appreciate your suggestion. – Vu Tung Lam Jun 12 '21 at 16:39
  • 1
    So will I be able to integrate this Javascript with python and flask. – anish Jun 13 '21 at 01:13
  • 1
    Also I already have two submit buttons in the form, so do I move one of the outside or what? – anish Jun 13 '21 at 01:20
  • @anish You should always move the buttons outside the form container. I don't know exactly why this is required, but if I don't do that, the form will not submit, and the page will simply be reloaded (XAMPP 8.0.6, Control Panel 3.3.0, Windows x64) – Vu Tung Lam Jun 13 '21 at 09:43
  • @anish If you want the buttons to be grouped with other elements of the form and thus benefit from common styling, wrap all in a div, like this:
    ...
     – Vu Tung Lam Jun 13 '21 at 09:45
  • @anish Of course you can integrate this Javascript into your application, just like HTML or CSS. They (HTML, CSS, JS) form a fundamental part of almost every advanced website and are supported by all browsers. – Vu Tung Lam Jun 13 '21 at 09:49
  • I tried moving the submit button outside the container and it doesnt submit – anish Jun 13 '21 at 10:16
  • @anish If you use pure HTML form, you *have to* move the submit button into the form container, and specify the button type: . If you use my JS approach, you have to move it out of the form, however. – Vu Tung Lam Jun 14 '21 at 04:31
  • @anish Plus, what do you mean by "it doesn't submit" ? What exactly did you see ? – Vu Tung Lam Jun 14 '21 at 04:32