Many episodes ago we created a frontend form that would [add actors to our database](watch-learn.com/video-tutorials/making-websites-october-cms-part-26-uploading-images-frontend). In this episode we are going to Ajaxify that form and upload our image with Ajax. 

You will see that is nothing special. So I'm also going to show you how to create image previews on that form so that the user gets nice feedback of what's going on. 

Remember this will only work on the latest build of October, so if you don't have that build [please check out this video](http://watch-learn.com/video-tutorials/update-october-cms-laravel-55-valet).

In this episode I'm going to show you how to upload images from the October CMS frontend with Ajax and also show image previews.

Ajax Image Upload

This episode is going to serve as a starting point for next few episodes where we will be doing sorting, searching and pagination. That is why this episode is so long. I promise the next few episodes will be much shorter.

As you know we already did [Frontend Filters](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-39-frontend-filters) two episodes ago, and now we are doing the same thing, but this time we will be using Octobers Ajax framework so that our page does not need to refresh every time we want to filter out some data.

To achieve this we will be using HTML, CSS and of course PHP and just a pinch of JavaScript and jQuery.

In this episode we are going to use Octobers Ajax framework to filter our movies by genre and year.

Ajax Frontend Filters

Few episodes ago I was talking about [Ajax form validation](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-22-ajax-form-validation) and I said that it was not the most elegant solution, but I didn't know how to do it better. [Samuel Georges](https://twitter.com/daftspunk) - the creator of October CMS -  saw that video and thought it wasn't very good to say the least. So he created new feature in October that does Ajax form validation much better - so, you're welcome :) .

In this episode I'm going to show you how to do Ajax form validation the right way.

In this video we are going to learn about new Ajax form validation that just came to October CMS few days ago.

NEW! Ajax Form Validation

### UPDATE: [There is a much better way to do Ajax Form Validation](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation)

Although I planned to continue doing what we did in the [last episode](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-21-users), I decided to make this quick video about validating our forms with Ajax.

Our previous version of validation, validated our form by refreshing the page and displaying errors. And this had a nasty side effect - it would clear all the forms input fields, which is not good from the UX perspective, as that would aggravate the user.

So in this episode I'm going to show you how to validate your form without page refresh and that way keep the data in our fields. This is good for the users, but it's also cool that the page doesn't refresh.

We are going to do that by using Octobers Ajax framework and a bit of jQuery.

In this episode we are quickly going back to forms and validation, but this time we are going to do it with Ajax na October CMSs Ajax framework.

Ajax Form Validation

First we [created our form widget](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-13-creating-custom-form-widgets) and then we [made it work](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-14-saving-form-widget-data). And in this episode I'm going to show you how to create new Actor model instance when user types in the name of the actor that doesn't already exists in our Actors table.

Also in this episode I'm going to show you how to debug AJAX requests that October CMS uses when saving data from the backend.

In this episode I'm going to show you how to create new model instance via October CMS form widget that we created in the previous two episodes.

Tutorials tagged with: ajax

Get in touch