Laravel submit form using Ajax with form validation | Send form data using Ajax | jQuery Ajaxform

friends in this video I will show you how you can submit a laravel form using Ajax so using Ajax you can submit the form you can validate the form also and also you can display the error message in case there is any validation error let me show you the application with the help of a very simple form in laravel and MySQL so in the browser when I enter localhost 8000 it gives me a list of applications I have one application right now and there is a button for new applicants if I click on it it gives me a form where I can enter the name email and address and submit the form we are submitting this form using Ajax only also laravel form validation is done and we will be showing the error messages also so let me just click on submit here so it is showing the error messages here so let me give a name here I have given the email as test which is not exactly the correct email format so let me submit it so email validation error is coming so let me now enter a new value so let me submit it now so email ID already exists so I give test one form is submitted successfully and it is showing the message in the form of model I go to home page back so it is showing that test one is added here earlier one row was there we test at test.com so now let me show you how we can develop this simple application and submit the form using Azure before that if you have not subscribed already please subscribe to the channel by clicking on the Subscribe button below and click on the Bell icon to get a notification for the new video let me show you the code for this application I have a laravel project Lara ajax form and in the environment if I go to dot EnV I have the database Lara underscore demo so I have Lara demo here and in this demo database I have few tables specifically I am using a custom table which is applications and this table I have created using laravel migration so this table if you see the structure of this table name email and address so these are the fields so let me show you the migration so this is the migration of the table name email and address and then I use PHP Artisan migrate to create the table once that is done the model was created and the model I have updated this is my model and I just added the dollar fillable columns here let me show you the views first so this is one View for the home page which gives me the list of applications and this is another view for the form submission so if I see the views here this is the index.blade.php which is nothing but just a list of applications which are being displayed in the HTML table and this is our form we have defined the form and then there then the fields name email and address and then a submit button and a cancel button so this is a very simple form but we have to submit this form using Ajax only so that is why in the form I do not have any action there is no route here so we'll be calling the route from the Azure script in this form I have a modal also if you see this is the model which which is actually used to display the thank you message after form is submitted successfully and this is the jQuery script which I am using when the form is submitted so on submit event is used this specific few lines are used to remove the existing errors if any in the form so we'll see that how we are displaying the errors setup and then here we are calling the we are calling the route application the store from the Azure script and sending data as the form data instance we are creating a new form data instance and then submit button is reserved here and once Ajax is completed successfully we are resetting the form and showing the message thank you message in the model but if there is any validation error then we are taking all the errors and then using a loop we are displaying the error by creating a span element for each input say here we are using key value where p is the input field name and value is the error first we are searching the input field and then creating a span element and displaying the error in the span so this is the error and then at the end we are enabling the at the end we are enabling the submit button so this is the Azure script which we are using let me show you the routes first here we are using application.store let me show you the routes here so we have one route for the home page one route for displaying the form which is get and the form submission we have a post shroud here which is actually we are using application.store so now let us see the controller method so index method and create method these are obvious for displaying the list of applications and for displaying the form now we'll see the store method here and when the form is submitted this method is called first we are using validator laravel validator to validate the input Fields so we are validating here name and email so this is normal validation we usually do for the name and email email format is required and the email has to be unique in the application state if the validation fails so we have to send the errors to the form so in this case we are returning a Json data with the errors so here we are using hydration errors and sending the errors as a Json data to the form but if there is no validation error that is hydration is successful then we are creating a row in the application table and sending a success message to the power so this is the method we are using in the controller so if we see the form again you can see in the Azure script in the jQuery script we are using here the errors that are displayed we are removing the error first and then in a loop we are displaying the error using a span element for the corresponding input field so let me show you the layout here you just hit a normal header footer and the master layout I am using in the header I am using booster 5 and I have a custom Style shooter in the footer we are using jQuery standard libraries so this way we can develop a arrival form and submit it using Azure script sometimes it is required because we don't want to refresh the page and submit the form without refreshing the page so in that case we can submit the form using Azure script only hope I could explain it properly if you find it useful please give a like to the video and subscribe to the channel you can write your comments in the comment box you can visit the website code.com for this topic detailed development steps are given in the website you can download the code for free you do not even need to sign up for that links are given in the video description below hope it will be useful for you thank you for watching the video

Channel: Codehow2

Views: 2,286

Keywords: jquery ajaxform, ajaxform, ajax form submit, laravel submit form, laravel form submit, laravel form validation, jquery submit form, form validation laravel, ajax, laravel, laravel course, laravel tutorial, php, submit form using ajax, submit form without refresh, form submit with ajax, mysql, php form, php tutorial, learn php, php code, ajax tutorial, laravel ajax, php ajax, php and ajax, html, css

Id: HdF42jiC1Fs

Length: 9min 4sec (544 seconds)

Published: Tue May 23 2023