Ajax jQuery textarea CKEDITOR form submit code
First you include some important library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>
Ajax code
$(document).ready(function(){
$('#add_page_details_to_DB').click(function() {
var dataStrings = $('form#create_page_to_DB').serialize();
//for ckeditor textarea field
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
$.ajax({
url: "/admin/add-city-content",
type: "POST",
data: dataStrings,
success: function(response) {
if(response.status == true){
window.location.replace("/admin/manage-city-pages");
}
else {
console.log("Listing Not Inserted");
}
}
});
return false;
});
})
HTML Form code
<form role="form" id="create_page_to_DB" method="post">
<label>Page Title/City Name</label> <input type="text" name="page_title">
<label>Search Header Text</label>
<textarea class="ckeditor" name="search_header_editor"></textarea><br>
<label>Content Area</label>
<textarea class="ckeditor" name="content_area_editor"></textarea>
<div class="seo">
<h1 class="seo_start"> SEO Tags</h1>
<div class="seo_pad">
<label>Title</label> <input type="text" name="seo_title">
<h4 class="seco_second"> Meta Tags</h4>
<div class="seo_pad1">
<label>Description</label> <input type="text" name="description">
<label>Keywords</label> <input type="text" name="keywords">
<label>Canonical</label> <input type="text" name="canonical">
</div>
<h4 class="seco_second"> OG Tags</h4>
<div class="seo_pad1">
<label>Title</label> <input type="text" name="og_title">
<label>URL</label> <input type="text" name="og_url">
<label>Type</label> <input type="text" name="og_type">
<label>Image</label> <input type="text" name="og_image">
<label>Site Name</label> <input type="text" name="og_site_name">
<label>Description</label> <input type="text" name="og_description">
</div>
<h4 class="seco_second"> Twitter Tags</h4>
<div class="seo_pad1">
<label>Card</label> <input type="text" name="twitter_card">
<label>Site</label> <input type="text" name="twitter_site">
<label>Domain</label> <input type="text" name="twitter_domain' ">
</div>
</div>
</div>
<div class="center_button">
<input type="submit" id="add_page_details_to_DB" value="Submit">
</div>
</form>
and add ckeditor script code
<script>
CKEDITOR.replace( 'search_header_editor' );
CKEDITOR.replace( 'content_area_editor' );
</script>