Submit AJAX Forms with jQuery and Flask

[@prettyprinted]

Join my free course on the basics of Flask-SQLAlchemy: prettyprinted.com/flasksql

[@h82fail]

As a python programmer that has never touched JS this was great, thanks for writing and explaining the JS code well.

[@freshhb100]

This video is so helpful. In the last few years, I've kept coming back, to reference this code, for different projects I'm always working on.

[@roccosorma2675]

This is exactly what I was looking for. Simple yet filled with the details to extrapolate on any size project.

[@prettyprinted]

Glad it helped you! Thanks for watching.

[@TheMarzukr]

THANK YOU! I was looking for a tutorial on how to do this for the longest time, and this was very informative, well put together, and most importantly of all, it worked!

[@prettyprinted]

You're welcome! Thanks for watching.

[@adwitrahman2762]

Honestly, as a beginner to Flask I have been banging my head for quite a while now with AJAX calls and JS. This was incredibly straightforward and put together. Just one question, how could I do this without the form, say a button would send data from python to js?

[@rahulm8619]

Thanks a lot dude, the other videos were so confusing to understand but you gave a good explanation and a neat demonstration. Thanks again!

[@freshhb100]

Thank you! This is the solution to my problem. I've been searching for an example like this, for the last 2 days :)

[@arvindrao3596]

Thanks for the video. Which frontend works best with flask backend vue.js or jQuery?

[@wimrotor]

Just what I was looking for !! Thanks for the video

[@prettyprinted]

You're welcome. Thanks for watching!

[@idensoneltume627]

This is just what I needed! It was beautifully explained. You earned yourself a subscriber. Keep up the good work. I checked out your website and you're like what Daniel Kehoe is to Rails to Flask. We need someone like that. You need to get yourself more recognition by being on Udemy! Regardless, I will try out your two free courses and then purchase the rest :)

[@prettyprinted]

Thanks for watching! I'll definitely make videos for Udemy in the future. And thanks in advance for taking my courses!

[@RamiroJativa]

Excellent explanation Anthony. Would it be possible for you to make a video that demonstrates how to implement a spinner that is activated after clicking on the submit button of a form? These types of examples exist on the Internet; however I have not found one that is very well explained. One way or another, the videos and documentation of examples that I have found are not clear. I would appreciate it very much. The example would be using AJAX and Flask. Thanks!

[@umarzakari3495]

So happy to see this. Just what i have been looking for months. Thank You anthony

[@prettyprinted]

You're welcome!

[@shanksharma5117]

it's precise for newbies like me! Thank john!

[@OrientalMelodies2010]

Thanks for the excellent tutorial! Well done :)

[@qianbang_]

love your flask tutorials. subbed

[@prettyprinted]

Thanks for watching!

[@mbonuchinedu2420]

YOU'RE A LIFE SAVER

[@galanu]

Needed this information...and Pretty Printed was there for me. THX!!

[@andrei8566]

Great tutorial!

[@mosadchuk]

Good. For guys, who will work with flask-form:"Don't forget to add csrf_token toy your request data, that make you form valid". For example: $.ajax({ data: "form_field": $("form_field").val(), "csrf_token": $("#csrf_token").val() })

[@prettyprinted]

Thanks for this.

[@astralmaverick]

Hi Anthony. This is super helpful for an application that renders a form from one endpoint and submitting data via AJAX without need to utilize the redirect method for system feedback. Now let's say I have an endpoint that renders some two empty divs and a button on the initial GET request. When a user clicks the button, it sends a POST request to the db via AJAX and renders data on the two empty divs, but now I want the two divs to be an additional POST request. How would that be handled? So essentially, a GET, POST, GET, POST all within the same endpoint.

[@prettyprinted]

If you want to handle multiple things in one endpoint, then you just use if statements to separate the cases depending on the method used and the data passed to the route.

[@1HourBule]

Very good video. So how would you submit the form via Ajax and upon submit redirect to a new page?

[@prettyprinted]

In your success block for Ajax (or in the .done), you can call window.location if there are no errors.

[@heilaal-mogren5828]

amazing and straightforward.. thanks

[@isaacyimgaingkuissu3720]

Hello and thanks a lot for your tutorials. I try since weeks to submit a particular form on my page (contain multiple forms) with flask and ajax.Please how can I achieve that?

[@anthonyrogersii1925]

Hey Anthony, I think your stuff is great. I bought one of your courses on Udemy and I've found it's filled in a couple of gaps I still had after working through the Flask Mega tutorial! On Ajax like this, what about form validation and securing your website from CSRF attacks (and other security risks I don't know about yet!)? Any context, guidance or help you could give on this would be great.

[@silassantiago8499]

It is an amazing video. You solve my doubts about ajax in flask. But, in this example, could I replace .done function by success: ... and failure:..}, indide ajax call, to have the same behavior ?

[@prettyprinted]

+Silas Santiago Yes, done/fail and success/failure are two ways of doing the same thing. Thanks for watching!

[@wongeunpark3111]

Which ajax, sijax or fetch, fits the flow these days?

[@rohandevaki4349]

sir ,please show us a way for using axios instead of jquery and ajax , thankyou

[@ahmedkabbanyeg]

Thank you. Do you have any tutorials about flask_cors? I believe browsers blocks the access to the api.

[@arcadiosincero]

+1 Informative Although while I was watching the vid I was wondering why would I ever need to do this. Then it donned on me that the default submit behavior would cause the entire page to refresh itself 😀.

[@prettyprinted]

I'm glad the video helped!

[@florian-radu]

@Pretty Printed it is possible to make this without submit button?

[@mitultyagi3357]

Thanks....got what I was looking for.

[@prettyprinted]

You're welcome. Thanks for watching.

[@nbme-answers]

Hey Anthony -- thanks so much for your videos! I'm new to programming and have found them to be extremely helpful. (Thanks to you, I'm working on my first Flask app! :) Just wondering, do you have a video where you actually show the "more complicated" example of updating a database and returning the data of the database without refreshing? Thanks so much & keep up the awesome work!

[@prettyprinted]

I don't, but I can make that video this week. Any specific request for it before I start planning it?

[@nbme-answers]

That's awesome! Thanks so much!! Specifically? Hmmm, I suppose I can be a bit more detailed about what I've been trying to implement today. Basically, I have a web app that iterates over a Book() table, with each entry being a book, its title, author, etc.; each Book object can be "tagged" with any number of tags from a Tag() table; the Book class & Tag class are related via a many-to-many relationship where relationships are stored in a 2-column association table [book_id, tag_id]: a Book can have many Tags, and a Tag can have many Books. In my web app, I generate a form for each Book object which takes an from the user; my logic checks to see if Tag.tag_name exists in the Tag table; if it does, a row is inserted into the association table (book_id = Book.book_id & tag_id = Tag.tag_id); if Tag.tag_name does not exist, then the logic creates a new instance of Tag(), grabs its tag_id, & inserts in the association table as described above; finally, the route in which all this logic is defined returns the user to the index page, where the user can see the Book object tagged with the Tag instance he just created. All of this works just fine. The issue, of course, is the page refresh. I have 300+ books which get displayed in the web app; if the user submits a new Tag() for Book object #299, say, it's annoying for the user to have to scroll alllllllllll the way back down to see the updated data. My understanding is that jQuery and AJAX will allow me to (1) commit changes to a database submitted by a user and then (2) display those changes without a page refresh; do I have that right? If that is a possibility, it'd be great to learn how to do it! Thanks so much for taking the time to read this! (And I hope it wasn't too much!! :)

[@prettyprinted]

That wasn't too much, and I see what you mean now. I'll think up an example and get a video out this week. Thanks for the idea.

[@nbme-answers]

Thanks for the tutorials!! Will definitely look forward to it!

[@drcmyway5064]

Could u make something like percentage progress bar till python script loaded in flask?

[@sfh8000]

Thank you! how can I get result populated in dropdown list. I used your example and receive data from my database but I have to populate it in dropdown list. "Dependent Dropdown example"

[@pandasd382]

Hi, is it possible to pass down the entire form data into the ajax data param? My form consists of 50+ checkboxes which I would like saved on submit, or cleared.

great tutorial, I am looking for solution to submit the form on change of any field, is it possible ?

[@prettyprinted]

Yeah that's possible. Just put an on change handler on all the form elements and put the ajax inside of the handler.

[@thegaribovv]

Good, exactly what i need!

[@prettyprinted]

Thanks for watching!

[@shrishabharadwaj4811]

Thank you so much! It helped me a lot :)

[@prettyprinted]

You're welcome! Thanks for watching.

[@saitarunpalakula5818]

can I know where you have used bootstrap and why...

[@CodeMastersChannel]

you are really awesome

[@r11sr]

thank you!!

[@akritiyadav3873]

Hey pretty printed I am doing the same thing in my project but data is submitted into the database but the alert is not printing only the returned value from the server is printing on the white page in the browser.

[@pial2461]

Great Man.Just as i was looking for

[@prettyprinted]

Glad you like it. Thanks for watching!

[@PratikKadam]

Nice video! Thanks! Can you suggest some help in submitting two forms on one single html flask template. I have been facing issues in that. How to accept data from two different forms and render them?

[@prettyprinted]

I'll consider that video idea. Thanks.

[@dden725]

Thank you for posting this. I'm looking to do basically the same thing, except i need to display images returned after the button click rather than text. Any ideas?

[@prettyprinted]

You can return a JSON object with links to the images from the Flask app. You can then use JavaScript to place those images on your page.

[@jinkaz2895]

thanks, hi anthony how about many fields.. how to apply serialize method? do you have example?

[@prettyprinted]

I'll see what I can do.

[@michaelkoopman3870]

Hi Anthony, are you able to show how this can work with WTForms? This method doesn't work even with the event.preventDefault() as I have to set the endpoint with WTForms

[@shreyaiyer210]

Hey, how to pass a parameter to the url when a button is clicked?

[@Multijuicee]

Is ajax figuring out the content type by itself? Or hiw does it know its form data and not json etc?

[@carlosazuaje8381]

Hey friend, I would like to see a video about dynamic forms, example: If I want a user to enter n numbers of skill or tag that can do them by clicking a button that creates another form this same

[@prettyprinted]

Hey Carlos, I can make a a video like that. I'll add it to my list. Thanks for the idea and thanks for watching.

[@carlosazuaje8381]

We would be very helpful, my friend, This code has those gist.github.com/kageurufu/6813878

[@prettyprinted]

OK, I'll take a look.

[@trevorslobodnick4345]

Can you do a tutorial on how to deploy this code so it can be accessed by anyone?

[@rangabharath4253]

Hi, this is awesome. Can you please do a tutorial on this with Django also. Please, I am trying to do the jquery, ajax call to a python function in Django. Please tell me the process in Django. Thank you so much.

[@prettyprinted]

I'll see what I can do.

[@sandtiwa]

Could you please make a video for infinite scrolling for list of data using flask and ajax?

[@prettyprinted]

That's a good idea. I'll add it to my list of videos to make.

[@sayyedarijab7018]

Would this work with "contenteditable div". Basically I want to pass the data of div to another html page.

[@rodmaruyama]

thank you! Very helpful!

[@prettyprinted]

You're welcome!

[@tomasemilio]

Dude you are amazing.

[@prettyprinted]

+Tomás Emilio Silva Ebensperger lol thanks!

[@creator8001]

I have a Dynamic table generated. Now on clicking the checkbox of few rows in the table, i need to peform a refresh so that those selected rows are deleted from the UI..so i am not sure how to go with this..

[@gilflorendo3359]

thanks for the tutorial. Im confused about the request.form['name']. I check your html code for the input but i did not see any id or name specified as "name" can you please enlighten me. anyone?

[@prettyprinted]

The 'name' comes from the JavaScript. When using ajax, you can give the form fields whatever name you like.

[@one_lettersandnumbers]

I hate javascript. I spent about 1 hour trying to find two missing #-s, of course without knowing that I was actually looking for those. But anyway, thanks for the vid, great tutorial :)

[@prettyprinted]

haha JavaScript is the worst to debug. Thanks for watching.

[@JeevanKarloss]

Getting localhost/process not found error ...Any tips?

[@younesboukroun3060]

Can we make 2 diffrent type of request in the same script ? POST, and GET ??

[@prettyprinted]

Yeah, of course. Just create another AJAX block for the second request.

[@younesboukroun3060]

@@prettyprinted Thank You, I have another question please, Im working on a flask project .. I need to make a post method for 2 things: first send value of an input to my python backend varriable, then Get data from the server that interoge some APIs.

[@ChimeraGilbert]

Hey I was wondering if there's a different way this needs to be done in 2022, because when I cloned your source code from GitHub it says that the loading for static failed

[@udaypatil367]

Can't Download cheatsheet !! Please help

[@cccmatthew6702]

how can I pass the result to JavaScript as well

[@ananava254]

Mil graciass!!!!

[@prettyprinted]

You're welcome!

[@FullStackArtist]

Don't know why but the code is not working in my case

[@rohandevaki4349]

sir there are some popups of jquery cheatsheat, but when i click on them , the 404 page is opening.please check.

[@emceedeecee18]

Thank you!

[@prettyprinted]

You're welcome! Thanks for watching.

[@simon1430]

Thanks for your tutorial. Just one note that you spent the majority of the video on the data checking algorithm rather than explaining AJAX itself.

[@prettyprinted]

I guess I couldn't make the AJAX part complicated enough. Thanks for the feedback and thanks for watching.

[@oliverqueen7813]

how do i send a html file back on main page?

[@sebastianfuentealba2675]

thanks!!

[@prettyprinted]

You're welcome!

[@mayurpande5415]

How would I do this with a "GET" request. Currently I display data from mysql on flask app jinja template. However when I click a button to invoke a function and it adds new data the webpage is not updating dynamically. So I have returned a jsonify and rendered a template temp.html looping through the data. But in my ajax call I can log the results successfully but I cannot display them on my index.html file. I have tried to append the "data" which is the temp.html with the results displayed, but it does not show up on my index.html template view

[@prettyprinted]

I'm a little confused on what you mean. If you email the code to [e-mail], I can take a look.

[@forestandtwig6824]

Looking for this exact thing but getting from a MySql database

[@prettyprinted]

It's pretty much the same. You just need to add the query in your route.

[@one_lettersandnumbers]

So basically whenever I need to change one div to another with Ajax, I have to use this method: create both in advance, and then hide one and display the other?

[@prettyprinted]

Not necessarily. There are many ways to accomplish the same. It comes down to preference.

[@one_lettersandnumbers]

Well there is the JQuery-kind of show and hide, and the CSS display property changing... What else?

[@prettyprinted]

Off the top of my head: you can load more HTML from the AJAX request that includes the relevant classes, you can dynamically change the class on the div, or you can change the div so when no text is in them, the user sees nothing.

[@one_lettersandnumbers]

As always, your thoughts and videos are greatly appreciated. :)

[@mohamedahmed-xu6qc]

what if the route have varaibles like

[@prettyprinted]

Then you just have to make sure you always pass numbers.

[@mohamedahmed-xu6qc]

sorry, my question wasn`t complete . i don`t know how to pass the varaibles i tried to use url_for function but it doesn`t work

[@tycooperaow]

I keep getting this error: HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax. (XHR)POST - 127.0.0.1:5000/api/send_msg

[@gregoriodia]

you should use for request.form.get('email', 'Default_value'), rather than [''] syntax - this will save you from KeyError.

[@prettyprinted]

Yeah that's something I'm thinking about switching to full time on the videos. I do like the possible key errors though incase your form is changed or you miss something. It makes it easier to handle the case where the value isn't there.

[@ehaynie100]

OMG I just spent an hour trying to figure this out fml

[@johndoe-vs8bi]

can any one tell how he mapped request.form['user] and email to html??

[@adeelali2910]

thanks

[@prettyprinted]

You're welcome! Thanks for watching.

[@adeelali2910]

hey I am working on a flask blog script can you take a look at it github.com/Adeelasd/flask-blog-script Thanks

[@prettyprinted]

It's too much to look at completely, but if you ever have a question about a specific part of it, feel free to ask.

[@adeelali2910]

thanks for your response bro will do...

[@thenetimp]

cheatsheet no longer exists at that link...

[@prettyprinted]

I updated the link: prettyprinted.com/flaskcheatsheet Thanks for letting me know.

[@shaniverma4580]

It would have been better if you got the data inserted in the box.

[@marcelliniewiecki3524]

This excellent tutorial. However I wonder if anybody could help me. I have been struggling to implement something like this: Simple flask app that reads the data from html paragraph and sends it python script for further processing (NLTK) and then back to html. Any ideas - I am completely hopeless here ...

[@prettyprinted]

To read HTML, you can use something like beautiful soup. To generate the new HTML, you can use Flask. The processing in between would just be plain Python, of course.

[@marcelliniewiecki3524]

Many thanks that worked fine! I was wondering how could that be done with a simple click of a button on the page. I.e button clicked activates the beautiful soap script etc.

[@prettyprinted]

You could use jQuery for that as well. $('#yourbuttonid').on('click', function () { //something that triggers your script. could be an ajax call, could just redirect to a page, etc. })

[@dheerajdashora3078]

Your video is too good. learned a lot . But how to remove them

[@hi-io6dp]

good

[@prettyprinted]

+hi Ho thanks for watching!

[@eddurguti]

when I try to add one more variable to this it's breaking with 'bad request 400' Address above is on my form: $.ajax({ data : { name : $('#nameInput').val(), email : $('#emailInput').val(), email : $('#addressInput').val() is the ajax script email = request.form['email'] name = request.form['name'] address = request.form['address'] above is the process.py nothing fancy here, just adding another field to test, the moment I add the field it breaks

[@prettyprinted]

You have two inputs named email. One should be address.

[@shashankbaghel6678]

Yes same thing is happening with me as well! Any luck? Thanks in Advance

[@paullopeztito257]

You made a simple ajax use case too complicated. Too much beating around the bush.

[@maheshwarreddy4124]

make a video using database

[@prettyprinted]

Definitely will in the future.

[@davidbeiler6364]

i tried following your code but it print the value back in a new html windows in my process view

[@AlberL561]

good