We Keep Coding

Having problem submitting a form without reload using jquery ajax

When i submit form it doesnot update value in database mysql.Its a form written in php.
here is my php and html. I want that the form should not reload and it must submit the changes in database without reloading the page and show preloader for 1 sec on submitting form.
HTML,PHP AND ACTION of form: Here action is the current page where this form is avalilable
detail_customer.php
<?php
$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";
$conn = mysqli_connect($server, $username, $pass, $dbname);
if (isset($_GET['detail_customer'])) {
$quest_id = $_GET['detail_customer'];
$get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
$getting_quest = mysqli_query($conn, $get_quest);
while ($row = mysqli_fetch_assoc($getting_quest)) {
$quest_title = $row['quest_title'];
$category_id = $row['category_id'];
}
}
if (isset($_POST['submit'])) {
$quest_t = $_POST['quest_t'];
$update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
$run_update = mysqli_query($conn, $update);
if ($run_update) {
echo 'hello';
}
}
?>
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php
" method="POST" class="c_form animate__animated animate__fadeIn">
<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>
<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<?php echo $category_id ?>" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<?php echo $quest_title ?>" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>
JS Code
index.js
$("#form-submit").on("submit", function () {
// e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr("action"),
data: formData,
success: function (data) {
$(".alert-success").show();
$(".alert-success").fadeOut(4000);
console.log(data);
},
error: function (data) {
$(".alert-danger").show();
$(".alert-danger").fadeOut(4000);
console.log(data);
},
});
return false;
});
Ajax Success Response But not updating data in mySQL
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php" method="POST"
class="c_form animate__animated animate__fadeIn">
<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>
<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<br />
<b>Warning</b>: Undefined variable $category_id in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>62</b><br />
" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<br />
<b>Warning</b>: Undefined variable $quest_title in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>66</b><br />
" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>

The condition if (isset($_POST['submit'])) { will never evaluate to true, since there is no input element in the form with name="submit" (the button with name='submit' does not send the attribute by default).
Either change the condition:
if (isset($_POST['quest_t'])) { ...
Or, include an input element with name='submit', for example:
<input name="submit" type="hidden" />
Also, make sure to move the $_POST check at the beginning of the file and ensure that no other code will be evaluated in the PHP file (e.g. the rest of the HTML code) if a POST request has been received.

Just return false after at the end of the method.
jQuery has its own way of ensuring "preventDefault()" and it is just returning false from the submit handler.
Full background on this here:
event.preventDefault() vs. return false

Issue has been solved. By changing path and then putting path of js file again.

backend not adding books to android app sql

i have made an ebook android app everything works fine but the backend code of admin age which is written in php and javascript .the admin has a function to add book known as savebook the "savebook" function is not working please help me guys....every time i try to add a book i it just shows a failed message but when i add the book to the database manually via phpmyadmin it works here is the code to that function
the problem is in last function (what is think) but stil i would appreciate if you guys find some other mistake in the code the whole website is working but this only function is not working the app in on android platform the backend is done using codeigniter and the app is linked to a database which maintains the details of book
<?php
$this->load->view('admin/comman/header');
?>
<div class="clearfix"></div>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumb-->
<div class="row pt-2 pb-2">
<div class="col-sm-9">
<h4 class="page-title">Add Book</h4>
<ol class="breadcrumb">
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item">Books</li>
<li class="breadcrumb-item active" aria-current="page">Add Book</li>
</ol>
</div>
<div class="col-sm-3">
<div class="btn-group float-sm-right">
Books List
</div>
</div>
</div>
<!-- End Breadcrumb-->
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="card">
<div class="card-body">
<div class="card-title">Add Book
<form id="edit_video_form" enctype="multipart/form-data">
<div class="form-group">
<label for="input-1">Book Name</label>
<input type="text" required value="" class="form-control" name="input_name" id="input-1">
</div>
<input type="hidden" name="id" value="">
<div class="form-group">
<label for="input-3">Book Cost</label>
<select name="select_cost" required class="form-control" id="purpose">
<option value="0">Free</option>
<option value="1">Paid</option>
</select>
</div>
<div class="form-group" id="business" style="display:none">
<label for="input-1">Book price</label>
<input type="text" required value="" class="form-control" name="input_price" id="input-1" placeholder="Enter Book Price">
</div>
<div class="form-group">
<label for="input-2">Book Category</label>
<!-- DropDown -->
<select name="select_category" required class="form-control">
<option value="">Select Category</option>
<?php $i = 1;
foreach($categorylist as $cat) { ?>
<option required value="<?php echo $cat->cat_id; ?>"><?php echo $cat->cat_name; ?></option>
<?php $i++;
} ?>
</select>
</div>
<div class="form-group">
<label for="input-2">Book Author</label>
<!-- DropDown -->
<select name="select_author" required class="form-control">
<option value="">Select Author</option>
<?php $i = 1;
foreach($authorlist as $cat) { ?>
<option value="<?php echo $cat->a_id; ?>"><?php echo $cat->a_title; ?></option>
<?php $i++;
} ?>
</select>
</div>
<div class="form-group">
<label for="input-1"> Book Cover Poster</label>
<input type="file" required class="form-control" name="input_bookcover" id="input-1" placeholder="select Book Cover image"
onchange="readURL(this,'showImage')">
<input type="hidden" name="input_bookcover" value="">
<p class="noteMsg">Note: Image Size must be less than 2MB.Image Height and Width less than 1000px.</p>
<img id="showImage" src="<?php echo base_url() . 'assets/images/placeholder.png'; ?>" height="100" width="100" alt="your image"/>
</div>
<div class="form-group">
<label for="input-1"> Upload Sample Book</label>
<input type="file" required class="form-control" name="input_sample_book" id="input-1" placeholder="select Sample Book">
<input type="hidden" name="input_sample_book" value="">
</div>
<div class="form-group">
<label for="input-1"> Upload Full Book</label>
<input type="file" required class="form-control" name="input_full_book" id="input-1" placeholder="select Full Book">
<input type="hidden" name="input_full_book" value="">
</div>
<div class="form-group">
<label for="input-1">Book Description</label>
<textarea cols="40" rows="5" style="height: 150px" type="text" required value="" class="form-control" name="input_description"
id="input-1"></textarea>
</div>
<div class="form-group">
<button type="button" onclick="savebook()" class="btn btn-primary shadow-primary px-5">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$this->load->view('admin/comman/footerpage');
?>
<script type="text/javascript">
$('#purpose').on('change', function () {
if (this.value === '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
function savebook() {
var wallpaper_title = jQuery('input[name=wallpaper_title]').val();
if (wallpaper_title == '') {
toastr.error('Please enter Book Name');
return false;
}
$("#dvloader").show();
var formData = new FormData($("#edit_video_form")[0]);
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>index.php/admin/savebook',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function (resp) {
$("#dvloader").hide();
if (resp.status == '200') {
document.getElementById("edit_video_form").reset();
toastr.success(resp.msg, 'success');
setTimeout(function () {
location.reload();
}, 500);
} else {
toastr.error(resp.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#dvloader").hide();
toastr.error(errorThrown.msg, 'failed');
}
});
}
</script>
here is the database code
enter code here
public function savebook(){
$input_name = $_POST['input_name'];
$input_description = $_POST['input_description'];
$input_price = $_POST['input_price'];
$select_category = $_POST['select_category'];
$select_author = $_POST['select_author'];
$select_cost = $_POST['select_cost'];
$is_feature = "yes";
$b_status = "enable";
$fa_id = $_POST['select_author'];
$input_bookcover=$this->imageupload($_FILES['input_bookcover'],'input_bookcover', FCPATH . 'assets/images/book');
if (isset($_FILES['input_sample_book']) && !empty($_FILES['input_sample_book']['name'])) {
$input_sample_book=$this->fileupload($_FILES['input_sample_book'],'input_sample_book', FCPATH . 'assets/images/book');
}
if (isset($_FILES['input_full_book']) && !empty($_FILES['input_full_book']['name'])) {
$input_full_book=$this->fileupload($_FILES['input_full_book'],'input_full_book', FCPATH . 'assets/images/book');
}
$data = array(
'b_title' => $input_name,
'b_description' => $input_description,
'is_paid' => $select_cost,
'sample_b_url' => $input_sample_book,
'b_url' => $input_full_book,
'b_price' => $input_price,
'fcat_id'=> $select_category,
'b_image' => $input_bookcover,
'is_feature' => $is_feature,
'b_status' => $b_status,
'fa_id' => $fa_id,
'b_date' => date('Y-m-d h:i:s')
);
$res_id=$this->Adminmodel->add_book($data);
if($res_id){
$res=array('status'=>'200','msg'=>'Book added successfully.','id'=>$res_id);
echo json_encode($res);exit;
}else{
$res=array('status'=>'400','msg'=>'fail');
echo json_encode($res);exit;
}
}

I am implementing image-preview functionality but during that unable to reset relevant file input

I am implementing image-preview functionality (for multiple hidden-browse buttons with dynamic ids) but during that unable to reset relevant file input
Everything working fine..
HTML Part:
<div class="col-sm-12">
<?php
$prd_imgs_sql = "SELECT * FROM `ci_product_images` WHERE `added_by` = '".$this->session->userdata('user_id')."' AND `is_prod_submited` = '0'";
$prd_imgs_res = $this->home->customQuery($prd_imgs_sql);
$chk_img = 1;
foreach($prd_imgs_res as $res){
if($res->prod_img != "" ){
$prdImgThumb = BASE_URL.'uploads/productImages/150x150/'.$res->prod_img_thumb;
}else{
$prdImgThumb = BASE_IMAGE.'plbtn.jpg';
}
if($res->prod_img_link != "" ){
$prdImgLinkTxt = $res->prod_img_link;
$prdImgLink = $res->prod_img_link;
}else{
$prdImgLinkTxt = '';
$prdImgLink = BASE_IMAGE.'preview.png';
}
?>
<div class="row">
<div class="col-sm-2">
<img src="<?=$prdImgLink?>" class="img-responsive primg" id="preview_img_<?php echo $chk_img;?>">
</div>
<div class="col-sm-6">
<div class="input-group" style="margin-top: 20px">
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_<?php echo $chk_img;?>" name="url_input[]" value="<?=$prdImgLinkTxt?>" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default findbtn" type="button" id="find_btn_<?php echo $chk_img;?>">Find</button>
</span>
</div><!-- /input-group -->
<div class="err" id="valmsg_<?php echo $chk_img;?>" style="display: none;"></div>
</div>
<div class="col-sm-1">
<h2 style="text-align: center;">Or</h2>
</div>
<div class="col-sm-3">
<div class="form-group">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_<?php echo $chk_img;?>" />
<?php if($res->prod_img != "" ){ ?>
<a class="topright imgDelete" href="<?php echo BASE_URL;?>admin/products/delete_prd_img/<?php echo base64_encode($res->id);?>" id="imgdel_<?php echo $chk_img;?>">X</a>
<?php } ?>
<input type="file" name="prod_images[]" id="ip_<?php echo $chk_img;?>" class="hidBrws" style="display: none;" />
</div>
</div>
</div>
<?php
$chk_img++;
}
?>
<?php
while($chk_img<5){
?>
<div class="row">
<div class="col-sm-2">
<img src="<?php echo BASE_IMAGE."preview.png"; ?>" class="img-responsive primg" id="preview_img_<?php echo $chk_img;?>">
</div>
<div class="col-sm-6">
<div class="input-group" style="margin-top: 20px">
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_<?php echo $chk_img;?>" name="url_input[]" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default findbtn" type="button" id="find_btn_<?php echo $chk_img;?>">Find</button>
</span>
</div><!-- /input-group -->
<div class="err" id="valmsg_<?php echo $chk_img;?>" style="display: none;"></div>
</div>
<div class="col-sm-1">
<h2 style="text-align: center;">Or</h2>
</div>
<div class="col-sm-3">
<div class="form-group">
<img src="<?php echo BASE_IMAGE."plbtn.jpg"; ?>" class="edi_prd_img rk" id="brws_btn_<?php echo $chk_img;?>" />
<input type="file" name="prod_images[]" id="ip_<?php echo $chk_img;?>" class="hidBrws" style="display: none;" />
</div>
</div>
</div>
<?php
$chk_img++;
}
?>
</div>
My jQuery Script:
$(".edi_prd_img").click(function() {
var id = $(this).attr("id");
var tmp = id.split('_');
$("input[id='ip_"+tmp[2]+"']").click();
});
$(".hidBrws").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
var id = $(this).attr("id");
var tmp = id.split('_');
reader.onload = function(e) {
$('#preview_img_'+tmp[1]).attr('src','<?=base_url()?>preview.png');
$('#url_input_'+tmp[1]).val('');
$('#brws_btn_'+tmp[1]).attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
But when I want to reset one of the browse-button (file) on some specific event then I am getting issue.. its not getting reset.
My browse-button (file) reset jquery script:
$('.imgLnk').keyup(function(e){
var id = $(this).attr("id");
var tmp = id.split('_');
$('ip_'+tmp[2]).val(''); //tried with this but not happening
$('#brws_btn_'+tmp[2]).attr('src', '<?=base_url()?>plbtn.jpg');
$('#imgdel_'+tmp[2]).hide();
});
But relevant reset jquery script not working..
not working: $('ip_'+tmp[2]).val('');
please suggest me changes or any idea

There is only one issue with your code. You need to change your line $('ip_'+tmp[2]).val(''); to $('#ip_'+tmp[2]).val('');. As this is your identifier, you have slight issue in syntax.
I just have updated your code to static code and created the fiddle. Try below. For testing purpose, I have enabled the file input.
$(function(){
$('.imgLnk').keyup(function(e){
var id = $(this).attr("id");
var tmp = id.split('_');
$('#ip_'+tmp[2]).val(''); //tried with this but not happening
$('#brws_btn_'+tmp[2]).attr('src', '<?=base_url()?>plbtn.jpg');
$('#imgdel_'+tmp[2]).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_1" />
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_1" name="url_input[]" autocomplete="off">
<input type="file" name="prod_images[]" id="ip_1" class="hidBrws" style="display: block;" />
</div>
<div class="row">
<img src="<?=$prdImgThumb?>" class="edi_prd_img rk" id="brws_btn_2" />
<input type="text" class="form-control imgLnk" placeholder="Image Url.." id="url_input_1" name="url_input[]" autocomplete="off">
<input type="file" name="prod_images[]" id="ip_2" class="hidBrws" style="display: none;" />
</div>

how to upload files from 2 different file input in from with ajax using formData?

I'm trying to upload 2 file which is in form with ajax but when i print_r($_POST) and print_r($_FILES) it showing me empty array.
here is my html code:
<form id="addFloorEntityTypeFrom" method="POST" action="api/apiRoute.php" enctype="multipart/form-data boundary=----WebKitFormBoundary0BPm0koKA">
<div class="col-md-12">
<div class="form-group">
<label for="categories">Category *</label>
<select class="form-control" id="categories" name="category" required>
<option value="">Please select category</option>
<?php foreach ($categories as $category) {
echo "<option value=\"" . $category['entityTypeId'] . "\">" . $category['entityName'] . "</option>";
} ?>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="typeSVG" class="sr-only">Upload SVG *</label>
<div class="input-group">
<input type="text" name="filename" class="form-control custom-file" placeholder="Please select base svg file" readonly>
<span class="input-group-btn">
<div class="btn btn-dark custom-file custom-file-uploader">
<input type="file" id="typeSVG" name="entityTypeBaseSVG" onchange="this.form.filename.value = this.files.length ? this.files[0].name : ''" required/>
Browse
</div>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="baseImage" class="sr-only">Upload style Image *</label>
<div class="input-group">
<input type="text" name="baseImage_filename" class="form-control custom-file" placeholder="Please base style image" readonly>
<span class="input-group-btn">
<div class="btn btn-dark custom-file custom-file-uploader">
<input type="file" id="baseImage" name="base_style_image" onchange="this.form.baseImage_filename.value = this.files.length ? this.files[0].name : ''" required />
Browse
</div>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" name="addFloorEntity" onclick="SaveEntity(this, true)" class="btn btn-dark mt-3">Save</button>
<button type="button" onclick="closeBaseEntity()" class="btn btn-default mt-3">Cancel</button>
</div>
</form>
here is my JavaScript code.
var formData = new FormData();
var formDataArray = $(form[0]).serializeArray();
for(let i = 0; i < formDataArray.length; i++) {
if(formDataArray[i].name !== 'entityTypeBaseSVG' || formDataArray[i].name !== 'base_style_image') {
formData.append(formDataArray[i].name, formDataArray[i].value);
}
}
formData.append('entityTypeBaseSVG', $('#typeSVG')[0].files[0]);
formData.append('base_style_image', $('#baseImage')[0].files[0]);
$.ajax({
method: "POST",
url: baseUrl + 'newIFPAdmin/api/apiRoute.php',
data: formData,
cache: false,
contentType: false,
processData: false,
}).done(function (response) {
console.log('response', response);
});
this is my server side code..
print_r(json_decode(file_get_contents('php://input'), true));
print_r($_POST);
print_r($_FILES);
exit;
response is:
Array
(
)
Array
(
)

Please try this code. It's working fine. Review screenshot.
https://ibb.co/wJWLfW5
<form id="addFloorEntityTypeFrom" method="POST" action="" enctype="multipart/form-data boundary=----WebKitFormBoundary0BPm0koKA">
<div class="col-md-12">
<div class="form-group">
<label for="categories">Category *</label>
<select class="form-control" id="categories" name="category" required>
<option value="">Please select category</option>
<?php foreach ($categories as $category) {
echo "<option value=\"" . $category['entityTypeId'] . "\">" . $category['entityName'] . "</option>";
} ?>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="typeSVG" class="sr-only">Upload SVG *</label>
<div class="input-group">
<input type="text" name="filename" class="form-control custom-file" placeholder="Please select base svg file" readonly>
<span class="input-group-btn">
<div class="btn btn-dark custom-file custom-file-uploader">
<input type="file" id="typeSVG" name="entityTypeBaseSVG" onchange="this.form.filename.value = this.files.length ? this.files[0].name : ''" required/>
Browse
</div>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="baseImage" class="sr-only">Upload style Image *</label>
<div class="input-group">
<input type="text" name="baseImage_filename" class="form-control custom-file" placeholder="Please base style image" readonly>
<span class="input-group-btn">
<div class="btn btn-dark custom-file custom-file-uploader">
<input type="file" id="baseImage" name="base_style_image" onchange="this.form.baseImage_filename.value = this.files.length ? this.files[0].name : ''" required />
Browse
</div>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" name="addFloorEntity" onclick="SaveEntity(this, true)" class="btn btn-dark mt-3">Save</button>
<button type="button" onclick="closeBaseEntity()" class="btn btn-default mt-3">Cancel</button>
<script>
function SaveEntity()
{
var formData = new FormData();
var formDataArray = $("form").serializeArray();
for(let i = 0; i < formDataArray.length; i++) {
if(formDataArray[i].name !== 'entityTypeBaseSVG' || formDataArray[i].name !== 'base_style_image') {
formData.append(formDataArray[i].name, formDataArray[i].value);
}
}
formData.append('entityTypeBaseSVG', $('#typeSVG')[0].files[0]);
formData.append('base_style_image', $('#baseImage')[0].files[0]);
$.ajax({
method: "POST",
url: 'demo.php',
data: formData,
cache: false,
contentType: false,
processData: false,
}).done(function (response) {
console.log('response', response);
});
}
</script>

Boostrap date picker not work after clone (using jQuery-Cloneya)

I have a question would like to ask you why Bootstrap date picker is not work with other after I've clone its. I am using jQuery-Cloneya Plugin to clone the form, you can visit this website to know about it : https://github.com/yapapaya/jquery-cloneya
Below is the code of cloneya jQuery plugin which I have try :
<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery-cloneya.js"></script>
<script>
$('#contain-education').cloneya({
limit : 5,
valueClone : true,
dataClone : true,
deepClone : true,
clonePosition : 'after',
serializeID : true,
defaultRender : false
});
$('#contain-exp').cloneya();
$('#contain-lang').cloneya();
$('#contain-language').cloneya();
</script>
Below is a code to clone :
<script type="text/javascript">
$('.contain-education').each(function() {
var $wrapper = $('.wrap-education', this);
$("body").on("click",".add-education", $(this),function(e) {
$('.append-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.append-field .remove-edu-field', $wrapper).click(function() {
if ($('.append-field', $wrapper).length > 1)
$con = confirm("Are you sure you want to delete this?");
if($con==true){
$(this).parent('.append-field').remove();
}
});
});
</script>
Here is a HTML code :
<div class="row" id="contain-education">
<div class="toclone">
<div class="form-group">
<label class="col-xs-3 control-label" for="school_name[]">School name <span class="error">*</span></label>
<div class="col-xs-8">
<input id="textinput" name="school_name[]" placeholder="" value="<?php echo set_value("school_name"); ?>" class="form-control input-md" type="text">
<span class="error"><?php echo form_error("school_name"); ?></span>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="program_name[]">Major <span class="error">*</span></label>
<div class="col-xs-8">
<input type="text" class="form-control input-md" value="<?php echo set_value("program_name"); ?>" placeholder="" name="program_name[]" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="education_level[]">Education level <span class="error">*</span></label>
<div class="col-xs-8">
<select class="form-control input-md" name="education_level[]">
<option value="">-- Education level --</option>
<?php foreach($education_level->result() as $row): ?>
<option value="<?php echo $row->education_level_id; ?>"><?php echo $row->name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="start_edu_date[]">Start date <span class="error">*</span></label>
<div class="col-xs-8">
<input type="text" class="form-control date_pick" id="start_edu_date" value="<?php echo set_value("start_edu_date"); ?>" name="start_edu_date[]" required="required">
<span class="error"><?php echo form_error("start_edu_date"); ?></span>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="end_edu_date[]">End date <span class="error">*</span></label>
<div class="col-xs-8">
<input type="text" class="form-control date_pick" id="end_edu_date" value="<?php echo set_value("end_edu_date"); ?>" name="end_edu_date[]" required="required">
<span class="error"><?php echo form_error("end_edu_date"); ?></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<span class="pull-right">
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-plus"></i>
</span>
</div>
</div>
</div>
</div>
thanks you for your help.

You haven't mentioned what plugin you have used. Lets say your plugin is invoked like this:
$('input.date_pick').datepicker();
Then, it will only be applied to the existing inputs, not inputs that will be created in the future.
When the new inputs are created by cloning, you can invoke your datepicker:
$('#contain-education').cloneya({
// ... options
}).on('clone_after_append', function(event, toclone, newclone) {
$(newclone).find('input.date_pick').datepicker();
});