HTML page keeps resetting after form submission

Question

I have a simple python script and html code that I'm executing on my localhost. The code displays a simple form that allows the user to fill out their personal info and submit. Upon submission, a jquery script outputs whatever the user had submitted. This part of the code works. However, after outputting, the form immediately resets and the output disappears. How do I get everything to remain the same until the user manually changes a form field and re-submits?

Python script (app.py)

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def main():
    return render_template('index.html')

if __name__ == "__main__":
    app.run()

HTML code (index.html)

.container{
  width: 500px;
  clear: both;
  margin-right: auto;
  margin-left: auto;
}
.container input{
  width: 100%;
  clear: both;
}
html, body {
  margin: 0;
  height: 100%;
} 
br {
  margin:1.25em 0;/* Firefox */
  line-height:2.5em;/* chrome  */
}

</style>

<html>
 <header>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </header>
  <body>
    <h1><center>Gettin' acquainted to docker</center></h1>
    <div class="container">
      <form>
      Salutation<input type="text" id="salutation" required><br>
      First Name<input type="text" id="firstname" required><br>
      Last Name<input type="text" id="lastname" required><br>
      <input type="submit" id="register" class= "get_greeting" value="Display" disabled="disabled" />     
      <div class="results"></div>
      </form>
    </div>
  </body>
 <script>

     (function() {
        $('form > input').keyup(function() {

            var empty = false;
            $('form > input').each(function() {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            if (empty) {
                $('#register').attr('disabled', 'disabled');
            } else {
                $('#register').removeAttr('disabled');
            }
        });
    })()

   $(document).ready(function(){
     $('.container').on('click', '.get_greeting', function(){
       $('.results').html('<p>Hi, '+$('#salutation').val()+' '+$('#firstname').val()+' '+$('#lastname').val()+'. I am learning how to implement containers...</p>')
     });
   });
 </script>
</html>

It looks like you are letting the form submit. When a form submits, it essentially does a page transfer to the endpoint the form goes to. It will show as a response whatever the response is from that endpoint. Given that your html is static, and does not appear to be doing anything to pre-populate the fields, their values would be blank as they were on your first visit. If you want the fields to be pre-populated, that would be logic you will need to implement by either the server returning the page, or by converting this process into an ajax request that does not do a page transfer. — Taplar, Sep 17 '18 at 18:15
Or potentially the values could be stored in sessionStorage and restored on the next visit. Given the different ways to accomplish this, the question as it currently stands is sorta too broad. — Taplar, Sep 17 '18 at 18:16
The click handler takes an event which will submit the form. Do `event.preventDefault()` in the handler to prevent this. — chriopp, Sep 17 '18 at 18:18
@chriopp, how would that be formatted exactly within the script — whatanoob, Sep 17 '18 at 18:40

score 0 · Accepted Answer · answered Sep 17 '18 at 18:46

To prevent the form submission you need to use .preventDefault() on the submit event:

 $('form').on('submit', e => {e.preventDefault()})

If you only want to prevent the form submitting when clicking your button, you should prevent default the button click:

 $('button','form').on('click tap', e => {e.preventDefault()});

Feel free to change the selectors in order to only prevent the default action (which is submitting the form on clicking any button inside form) to the buttons which you don't want to submit the form.

chriopp · Answer 2 · 2018-09-17T19:03:29.603

The click handler takes an event. The event is bubbling up and will submit the form by default. Do event.preventDefault() in the handler to prevent this behaviour.

$(document).ready(function(){
  $('.container').on('click', '.get_greeting', function(event){
    event.preventDefault()
    $('.results').html('<p>Hi, '+$('#salutation').val()
    +' '+$('#firstname').val()+' '+$('#lastname').val()
    +'. I am learning how to implement containers...</p>')
  });
});

This way the form will not be committed any longer. Your handler should now commit the form using ajax. See the documentation about jquery post to get this running.

HTML page keeps resetting after form submission

2 Answers2