Hello I am trying to upload data to the database suing ajax call I have created a script but the problem is that I had a textarea but for some reasons i CHANGED that textarea to and editable div now my question is how do i get data from that div
<form method="POST" action="" id="post" enctype="multipart/form-data" onsubmit="return false;">
<ul>
<li>
<i class="fa fa-photo"></i> Upload A Photo / Document
<input type="file" name="image" />
</li>
</ul>
<div id='display'></div>
<div id="contentbox" contenteditable="true" name="post_dt">
</div>
<input type="submit" id="sb_art" class="btn_v2" value="Start Discussion" />
</form>
And this is my ajax script created for uploading data
$(document).ready(function(e) {
$("#post").on('submit', (function(e) {
$(document).ajaxStart(function(){
$("#load").css("display", "block");
});
$(document).ajaxComplete(function(){
$("#load").css("display", "none");
});
var form = this;
var content = $("#contentbox").html();
$.ajax({
url : "url/demo/forums/post_forum",
type : "POST",
data : {new FormData(this), content: content},
contentType : false,
cache : false,
processData : false,
success : function(data) {
$("#data_update").prepend($(data).fadeIn('slow'));
form.reset();
}
});
}));
});
You're using the correct method to get the content from the editable element: html(). Your issue is how you're sending the data. When sending binary data through FormData you cannot place that inside an object to be encoded. Instead, the additional data must be added to the FormData using append(). Try this:
$("#post").on('submit', function(e) {
$("#load").show();
var form = this;
var formData = new FormData(this);
formData.append('content', $("#contentbox").html());
$.ajax({
url: "http://tfsquare.com/demo/forums/post_forum",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
$("#data_update").prepend($(data).fadeIn('slow'));
form.reset();
$("#contentbox").empty();
},
complete: function() {
$("#load").hide();
}
});
});
Also note that I changed your use of ajaxStart() and ajaxComplete() to use the complete method. Defining new global AJAX handlers on every submit of the form is rather redundant.