I am creating a dynamic resume form in which I have created dynamic add remove field with the help of java script but I am not getting any idea to store the input values of this dynamic form in database I am giving some code below -
dynamic add Remove script code resume.js
$(document).ready(function(){
var maxField = 5; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML =
'<div class="field_wrapper"><div class="mb-3"><input type="text" name="skills[]" value=""class="form-control" /><a href="javascript:void(0);" class="remove_button"><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></a></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
// *************** Hobby******************
$(document).ready( function(){
var maxhobby = 4;
var addHobby = $('.add_hobby');
var hobby_wrapper = $('.hobby_wrapper');
var hobbyHTML = '<div class="hobby_wrapper"><div class="mt-sm-0"><input type="text" name="myhobby[]" value=""class="form-control" /><a href="javascript:void(0);" class="remove_hobby"><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></a></div>';
var x = 1;
$(addHobby).click( function(){
if (x < maxhobby) {
x++
$(hobby_wrapper).append(hobbyHTML);
}
});
// Once Remove Button Click
$(hobby_wrapper).on('click', '.remove_hobby', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Job Objective******************
$(document).ready( function(){
var maxjob = 4;
var addjob = $('.add_job');
var job_wrapper = $('.job_wrapper');
var jobHTML = '<div class="job_wrapper"><div class="mt-sm-0"><input type="text" name="myjob[]" value=""class="form-control" /><a href="javascript:void(0);" class="remove_job"><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></a></div>';
var x = 1;
$(addjob).click( function(){
if (x < maxjob) {
x++
$(job_wrapper).append(jobHTML);
}
});
// Once Remove Button Click
$(job_wrapper).on('click', '.remove_job', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Education ******************
$(document).ready( function(){
var maxedu = 10;
var addEdu = $('.add_edu');
var edu_wrapper = $('.edu_wrapper');
var eduHTML = '<div class="edu_wrapper"><hr><div class="d-flex justify-content-between mb-lg-3"><div class="col-md-6"><label class="form-label">School/University</label><input type="text" name="school_name[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">Degree/Course</label><input type="text" name="degree[]" class="form-control" required></div></div><div class="col-md-12"><label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label><input type="text" name="mark[]" value="" class="form-control"/></div><div class="d-flex justify-content-between"><div class="col-md-6"><label class="form-label">Start Date</label><input type="text" name="start_date[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">End Date</label><input type="text" name="end_date[]" class="form-control" required></div></div><a href="javascript:void(0);" class="remove_edu"><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></a></div>';
var x = 1;
$(addEdu).click( function(){
if (x < maxedu) {
x++
$(edu_wrapper).append(eduHTML);
}
});
// Once Remove Button Click
$(edu_wrapper).on('click', '.remove_edu', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
and this is my form code for resume form.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="create-resumecv" method="post" enctype="multipart/form-data" name="add_name" id="add_name">
<!-- Start Education -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning">Education & Qualification</h4>
<div class="edu_wrapper">
<div class="d-flex justify-content-between mb-lg-3">
<div class="col-md-6">
<label class="form-label">School/University</label>
<input type="text" name="schoolname[]" class="form-control" >
</div>
<div class="col-md-6 ms-2">
<label class="form-label">Degree/Course</label>
<input type="text" name="degree[]" class="form-control" >
</div>
</div>
<div class="col-md-12">
<label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label>
<input type="text" name="mark[]" value="" class="form-control"/>
</div>
<div class="d-flex justify-content-between mt-3">
<div class="col-md-6">
<label class="form-label">Start Date</label>
<input type="date" name="startdate[]" class="form-control" >
</div>
<div class="col-md-6">
<label class="form-label">End Date</label>
<input type="date" name="enddate[]" class="form-control" >
</div>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_edu" title="Add More Eduction"><img src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
<!-- End Education -->
<!-- About Me -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">About Me</h4>
<div class="form-floating">
<textarea class="form-control" id="editor" name="aboutme"></textarea>
</div>
</div>
<!-- End -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Skills</h4>
<p class="text-muted">Add More Skill Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="field_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Skill</label>
<input type="text" name="skills[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_button" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Job-Objective</h4>
<p class="text-muted">Add More Job Objective Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="job_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Job Objective</label>
<input type="text" name="myjob[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_job" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- My Hobbies -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Hobbies</h4>
<div class="mb-3">
<div class="hobby_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Hobby</label>
<input type="text" name="myhobby[]" value="" class="form-control"/>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_hobby" title="Add hobby"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!-- end My Hobbies -->
<!--Start Experience -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Experience</h4>
<div class="expe_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="experience_title" class="form-control">
</div>
<div class="mb-3">
<div class="form-floating">
<label for="exampleInputEmail1" class="form-label">Description</label>
<textarea class="form-control" name="experience_des" id="editor2"></textarea>
</div>
</div>
</div>
</div>
<!-- end Experience -->
<div class="text-center">
<button type="submit" title="Submit your form for generate Resume" class="btn btn-success mb-5" name="create-resume" id="submit"> <img src="<?php echo BASE_URL . 'reg-users/images/resume.png' ?>" style="width: 20px; height: 20px;"> Create Resume</button>
</div>
</form>
there are no any issue to add or remove dynamic input field its work correctly, but don't have an idea to store dynamic add field form values in mysqli database.
please tell me how can i store dynamic input field values in database using PHP.
At last I found the solution, so I am posting the answer. See, when we want to store the input values of the form in the form of an array in the database, then we simply define a string to array, it is a simple thing.
I have used the implode and explode function of php in this solution, then I got the perfect solution. You can also use this function if you want.
The implode() function returns a string from the elements of an array.
The explode() function breaks a string into an array.