Laravel 5.8 - Dynamically Add or Remove input fields using JQuery Ajax

hello friends in this video tutorial we are going to learn how to implement dynamically add or remove input fields in Louisville 5.8 by using jQuery and insert into my SQL table using Ajax after learning Ajax crud application in Louisville 5.8 now we have start one new topic in Louisville five point eight because we have start new advanced level topic in Louisville five point eight we have already discussed how to dynamically add or remove fields by using jQuery in PHP but this thing's how can we implement in Louisville five point so we have make this video tutorial now let's start discussing this topic so this is testing database we have already make database connection we will make one dynamic fields table in this database from Louisville 5.8 application for this we want to create migration file for this we have to go to command prompt and write this command this command will make create dynamic field migration file so we have go-to database folder and in that folder we want to open migration folder and here we can file migration file so we have opened this file here we can see two method like up and down up method will create dynamic fields table so here first we want to define table column so here we have right dollar table variable with string method and under this we have right first name table column name same way for last name table column here we have right dollar table variable with string method and under this we have right last name now we have go to command prompt and here we have write this command this command will migrate table structure from laravel application to testing my SQL database after this we want to create dynamic field model so we have go to command prompt and write this command it will make dynamic field model under app folder now we have go-to app folder and open dynamic field dot PHP model file under this file we have write-protect dollar fillable variable is equal to array with table column like first name and last name here we will use this model for database operation after this we want to create dynamic field controller file so we have go to command prompt and write this command it will create dynamic field controller dot PHP file under app / HTTP / controller folder so we have go to that folder and open dynamic field controller dot PHP file first here we have right use statement with M folder with forward slash dynamic field model class so under this controller we can use dynamic field model for a database operation same way for form data validation here we have right used statement with validator namespace so we can use validator class for validate form data now under this controller we have create index method this will be the root method of this class under this method we have right return statement with view method under this we have right dynamic field it will load dynamic field dot blade dot PHP file under browser now we have go-to resources folder / views folder and open dynamic fields dot blade dot PHP file in this file we have already included jQuery library and bootstrap library under this file first we have create by right form tag with method is equal to post and ID is equal to dynamic field under this form first we have right span tag with attribute ID is equal to result under this tag we will display form validation error or form data success message now we have create one table with three columns like first name last name and action after this we have right open and closed table body tag under this tag we will generate dynamic input fields by using jQuery below this we have right open and closed table footer tag and under this first we have right at the rate CSRF expression it will for prevent attack cross-site request forgery for submit form data here we have write input type is equal to submit name and ID is equal to save and value is equal to also save by click on this button form data will be submitted now we have moved to write jQuery code so here first we have defined count variable as equal to one below this we have right one jQuery function with named dynamic field with number variable as argument this function will generate dynamic input field under this function first we have write HTML variable is equal to open table row tag below this we have again write HTML variable and under this we have append a CH tml code like open and closed table data tag between this tag we have right input type is equal to text and name is equal to first name with array this is for at multiple value at in same field after this we have again write HTML variable and under this we have append a CH t ml code like open and closed table data tag between this tag we have right input type is equal to text and name is equal to last name with array this is for at multiple value at in same field now we have right if statement and under condition we have right number variable value is greater than one if this condition true then it will execute if block of code under this block we have write HTML variable and under we have append HTML code like open and closed table data tag and between this tag we have right button type is equal to button name and ID is equal to remove by click on this button user can remove that table row below this we have right dollar with table body tag with append method and under this we have write HTML variable this code will append HTML code under this table body tag but suppose number variable value less than one then it will execute else block of code under this block we have write HTML variable and under this variable we have append HTML code like open and closed table data between this we have right button type is equal to button name and ID is equal to add by click on this button user can add new blank table row with input field below this we have right dollar with table body tag with HTML method and under this we have write HTML variable it will change HTML code of table body tag first we have called this function so here we have write dynamic field function and under argument we have write count variable so when page load then this function will called it will generate blank table row will text input field an add button when user click on add button then dynamic input field must be generate for this here we have right dollar with button ID and with click event so when user click on add button then this block of code will execute under this block we have right count variable and increment this variable value by one and after this we have called dynamic field function and in argument we have right count variable it will append blank table row with text input fields and remove button under table body tag same way for removed table row here we have right dollar with document selector with on method and under this we have right click event with button ID remove so when user click on remove button then this block of code will execute under this block we have right count variable and now we have decrement this variable value decrement by one for remove table row here we have right dollar the selector with closest method and under this we have right table row with remove method it will remove table row now we have moved to submit form data so here we have write dollar with form ID dynamic form with on method and under this we have write submit event so when form has been submitted this block of code will execute under this we have right event dot preventdefault method it will stop to submit form data to server below this we have start right Ajax request in this first we have right URL option and here we have right expression and between this we have right root method between this method we have right dynamic field dot insert it will send Ajax requests to insert method of dynamic field controller in second option we have right method and here we have right post so it will use post method for send data to server in third option we have right data option here we can define which data we want sent to server so here we have right dollar this with serialized method it will convert form data into URL encoded string in fourth option we have right data type and here we have write JSON so it will receive data from server in JSON format in fifth option we have right before send callback function this function has been called before send Ajax request under this we have right dollar with submit button ID save with attribute method and in both argument we have right disabled it will disabled submit button before it send Ajax request lastly we have rightt success callback function this function has been called if request completed successfully and it will receive data from server under this function we have right if statement and condition we have right data dot error if this condition true then it will execute if block of code under this block we have right error HTML variable is equal to blank value below this we have right for loop and under condition we have right count variable value is equal to zero count variable value less than value of data error dot length and count variable value increment by one under this loop we have right error HTML variable and under this variable we have append HTML code like data dot error variable with count index it will store error data under this error HTML variable now here we have right dollar with span tag ID result with HTML method and under this we have right division tag with class is equal to alert and alert danger and between this we have right error HTML variable it will display form data validation error but suppose a Falls then it will execute else block of code and here first we have called dynamic field function and in argument we have write one it will remove all row and create one new table row with blank input text field and add button after this we have right dollar with span tag ID result with HTML method and under this method we have right division tag with class is equal to alert and alert success and between we have right data dot success it will display success message lastly for enable submit button here we have right dollar with submit button ID save with attribute method with two argument in first argument we have right disabled and in second argument we have right false it will enable submit button for click now we have moved to dynamic field controller and here we have create insert method with request argument it will receive Ajax request for insert multiple data under this method first we have right if statement and under condition we have right dollar request variable with Ajax method if this method receive Ajax request then it will execute if block of code under this block first we want to validate form data so here we have write dollar rules variable is equal to array in first key we have write first name dot star with value required in Louisville for validate data of same name of multiple input then we have to use star with input field name same way in second key we have right last name dot star as key and in value we have right required it will validate multiple input field with name last name now here we have right dollar error variable is equal to validator class with make method under this first we have right dollar request variable with all method and in second argument we have right dollar rules variable this code will validate all form fields if there is any error occur which will store under dollar error variable four check any validation error has been generated or not so here we have write if statement and under condition we have write dollar error variable with fails if there is any validation error has been generated then it will execute if block of code under this block we have right return statement with the response method with JSON method this JSON method will transform resource into an HTTP response in the form of JSON under this method we have right array with key errors with value get from dollar error variable with errors method with all method here it will fetch all validation error and store under errors key which will be sent to Ajax request but suppose there is no any validation error found encode will continue execute code and here we have right dollar first name variable is equal to dollar request variable with first name same way below this we have right dollar last name variable is equal to dollar request variable with last name variable so here we have store form data under local variable now we have right for a loop and under condition we have right dollar count variable is equal to zero dollar count variable value less than value of count method with dollar first name variable and dollar count variable value increment by one under this loop we have right dollar variable is equal to array with first key first name and value get from dollar first name variable with dollar count variable index in second key we have right last name with value get from dollar last name variable with dollar count variable index so here we have store form data under dollar data variable in array format now we have right dollar insert data variable is equal to dollar data variable so here we have store whole form data has been store under dollar insert data variable for insert multiple data here we have right dynamic filled modal class with insert method and under this we have right dollar insert data variable this method will insert new record into the database after inserting data into Table four sends success response to Ajax requests here we have write return statement with response method with JSON method it will send response to Ajax requests in JSON format now we want to set for this dynamic field controller method so we have go-to root folder an open web dot PHP file under this we have right root class with get method and under this we have right dynamic field and in second argument we have right dynamic field controller at the rate index it will called index method for dynamic field controller below this we have right root class with post method with two argument in first argument we have right dynamic field slash insert and in second argument we have right dynamic field controller at the rate insert here it will called insert method of dynamic field controller and lastly here we have add name method and under this we have write dynamic field dot insert this is for Ajax method now we have check output in browser friends here we have enter base URL of Laura Val 5.8 application slash dynamic field then on web page we can see table with blank table row with two input field with add button and say button now we have click on add button after click on add button new blank row has been generate which we can see on webpage so here we have create some blank row now we want to remove blank row so here we have click on that row remove button after click on remove button that row has been removed from table so this way we can remove dynamic generated input field now we want to check validation so here we have click on Save button without entering data after click on Save button we have received validation error which we can see on web page so here validation of multiple input field with same name has been working properly so here we have generate three blank row and then after one by one we have fill all table row input text fields with data lastly we have click on Save button after click on Save button we have received success message which we can see on webpage so this way we can add or remove dynamic HTML input fields by using jQuery and by using Ajax we have insert multiple input field with same name data has been inserted into my SQL table in Louisville 5.8 if you have any query or input regarding this video tutorial please comment your query or input in comment box or if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel forget more update regarding release of future video lastly keep watching our YouTube channel thanks for watching this video tutorial

Channel: Webslesson

Views: 41,903

Keywords: laravel 5.8, laravel 5.8 tutorial, laravel dynamically add form fields, laravel 5.8 jquery add more fields dynamically, laravel 5.8 mysql dynamic form add more fields, laravel 5.8 add more fields example, laravel 5.8 dynamic form fields validation example, add more jquery laravel 5.8, laravel 5.8 jquery ajax validation add more, how to save multi record in laravel 5.8, save multi record in laravel 5.8, add more fields, add more jquery, add more fields jquery

Id: KqDpESFmLrg

Length: 26min 57sec (1617 seconds)

Published: Mon Apr 15 2019