Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I keep field values in a form after submit?

After submitting a form it appears that the field values are set back to nothing. I am doing some form validation; if the form is invalid I am having it display an error message from a list of errors but I wish for the field values to stay. Is there a way to do this?

This is my view that validates the form:

@app.route('/booking', methods=['GET', 'POST'])
def booking():
    errors = [] 
    if request.method == 'GET':     
        return render_template('booking.html', errors=errors)
    else:
        # grab values from form fields and store them in objects
        start_date = request.form['start_date']
        end_date = request.form['end_date']
        name = request.form['name'].strip()
        email = request.form['email'].strip()       

        # check if all fields are non-empty and raise an error if not
        if not start_date or not end_date or not name or not email:
            errors.append('Please enter all the fields.')
        else:
            # converts dates to Unix time-stamp for easier validation/calculations
            start_timestamp = dt.strptime(start_date, "%d/%m/%Y")
            end_timestamp = dt.strptime(end_date, "%d/%m/%Y")

            # checks to see if dates are valid          
            if start_timestamp > end_timestamp or end_timestamp < start_timestamp:              
                errors.append('Please enter a valid date range')
            else:
                #checks to see if booking has already been taken
                bookings = read_file('app/static/bookings.csv')     
                for i in bookings:
                    s_date = dt.strptime(i[0], "%d/%m/%Y")
                    e_date = dt.strptime(i[1], "%d/%m/%Y")
                    if s_date <= start_timestamp <= e_date:
                        errors.append('Booking has already been taken, please select another date')
                        break

            # checks to see if email address is valid using regex
            if not valid_email_address(email):
                errors.append('Please enter a valid email address')         

            #if no errors have occured then write booking to file
            if not errors:
                new_booking = [start_date, end_date, name, email]
                bookings.append(new_booking)
                write_file(bookings, 'app/static/bookings.csv')
                return render_template('booking.html')
    return render_template('booking.html', errors=errors)

This is the template for the form:

<div id="main-wrapper">
    <div id="main">     
        <div id="info">
            {% if errors %}
            {% for error in errors %}
            <div><p>{{ error }}</p></div>
            {% endfor %}
            {% endif %}
            <form action = "booking" method="post">
            <input id="start_date" type="text" name="start_date">
            <input id="end_date" type="text" name="end_date">
            <input type="text" name="name" />
            <input type="text" name="email" />

            <input type="submit" value="Submit">
        </div>
    </div>
</div>
like image 631
Robin L Avatar asked Dec 03 '14 20:12

Robin L


People also ask

How do you retain the values of form after submit in Javascript?

To keep the values, you must fill in the values on the server while rendering the page. Usually, you can simply copy the data from the HTML request parameters into the fields.

How do you prevent a form from clearing fields on submit?

You can use preventDefault method of the event object.

How can we keep textbox value after submit in PHP?

You can just echo $_POST['name'] in the value attribute of the input. Make sure you check POST values to avoid XSS. I also put up the update DB function, as you don't need to show the form to the user if the name in longer the 4 chars!


1 Answers

You'd be better off using a form library such as WTForms (and the associated extension Flask-WTF) instead of doing this all manually.

But if you're set on this method, then it's pretty traightforward. You need to provide the value from request.form to the HTML inputs.

<input id="start_data" type="text" name="start_date" value="{{ request.form['start_date'] }}"/>
like image 113
davidism Avatar answered Oct 08 '22 08:10

davidism