How to stop automatic refresh when trying to type inside form input?

Question

I am writing a python web application using the Flask framework, and the Flask-WTF, Flask-Login extensions with a postgreSQL db. Everytime I try to type an email or password into the input field the page refreshes and I can't type anything. How do I fix this? There just seem to be multiple GET requests being made to my view function.

HTML:

<!-- BODY OF THE LOGIN FORM -->
    <div class = "login">
        <form id = "loginform" action = "{{ url_for('login') }}" method = "post">
            {% from "formhelpers.html" import render_field %}
            {{render_field(form.email)}}
            {{render_field(form.password)}}
            <input type = "submit" class = "btn btn-default" value = "Log In">  
        </form>
    </div>

PYTHON / FLASK view function:

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Send')

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if request.method == 'POST' and form.validate_on_submit():
        #retrieve data from user
        checkemail = form.email.data
        checkpassword = form.password.data
        #query database for user email 
        founduser = User.query.filter_by(email=checkemail).first()
        #check password hashes if user is found by email
        if founduser:
            if hashpw(checkpassword, founduser.password.encode('utf-8')) == founduser.password:
                return "SUCCESS: Logged In"
            #incorrect password
            else:
                return "ERROR: Invalid Details"
        #incorrect email address
        else:
            return "ERROR: User Doesn't Exist"
    #passing an instance of our login form class to HTML for rendering
    else:
        return render_template('login.html', form=form)

Here is a screenshot of my terminal window. I have so many GET request being made as I try to type in the email or password fields. screenshot terminal window

fixed my issue, it was a stupid typo where I had forgotten to close the with a closing tag — smundlay, Aug 29 '17 at 08:14

score 0 · Answer 1 · answered Aug 29 '17 at 07:15

0

you should use ajax to submit you Form i haven't used flask,but ajax is similar in html ,you can use jquery to post you ajax request

answered Aug 29 '17 at 07:15

Sun Yi

39
5

I'm trying to use Flask-WTF because of the additional security it offers & the ability to structure my forms in python. How does using jquery to post my ajax request work with that? How is my view function affected? – smundlay Aug 29 '17 at 07:30
1

you should change the form's action to as js function,then use $.ajax submit you data .of course your must import juqery.js in your html. – Sun Yi Aug 29 '17 at 07:38
hey ! If you want to see an "example" of Ajax request with flask : https://stackoverflow.com/questions/45709821/flask-store-feedback-data-to-server/45710494#45710494 – SD3L Aug 29 '17 at 07:43
Cool, the only thing preventing me is that Flask-WTF adds a csrf_token to your form to protect it from csrf attacks. What's the security situation with posting form data through an ajax request? – smundlay Aug 29 '17 at 07:46

How to stop automatic refresh when trying to type inside form input?

1 Answers1