I currently have a form that submits multi text fields using ajax, jquery and adds the information in a database via php without refreshing the page. All this works fine but now I need to add images for each box. How can I submit these images using the ajax, jquery php.
This is my form
<form action="" method="post" enctype="multipart/form-data" id="submitForminfo">
<div id="set1">
<div style="padding: 20px;">
<p>Box A</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_a" name="title[]" value="<?= $boxAcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_a" class="textinputtextarea"><?= $boxAcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_a" name="url[]" value="<?= $boxAcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image A :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
<div style="background: #999; padding: 20px;">
<p>Box B</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_b" name="title[]" value="<?= $boxBcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_b" class="textinputtextarea"><?= $boxBcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_b" name="url[]" value="<?= $boxBcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image B :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
<div style="padding: 20px;">
<p>Box C</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_c" name="title[]" value="<?= $boxCcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea value="" name="brieftxt[]" id="brieftxt_c" class="textinputtextarea"><?= $boxCcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_c" name="url[]" value="<?= $boxCcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image C :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
<div style="background: #999; padding: 20px;">
<p>Box D</p>
<label class="adduserlabelblockfull">Title :</label><div class="textinputtextareablock"><input type="text" id="title_d" name="title[]" value="<?= $boxDcontent[0]; ?>" class="addusertextinput"></div>
<label class="adduserlabelblockfull">Text :</label><div class="textinputtextareablock"><textarea name="brieftxt[]" id="brieftxt_d" class="textinputtextarea"><?= $boxDcontent[1]; ?></textarea></div>
<div class="clearfix"> </div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Page URL :</label><div class="textinputtextareablock"><input type="text" id="url_d" name="url[]" value="<?= $boxDcontent[2]; ?>" class="addusertextinput"></div>
<div class="clearfix"> </div>
<label class="adduserlabelblockfull">Image D :</label><div class="textinputtextareablock"><input type="file" name="file[]" class="addusertextinput"></div>
<div class="clearfix"> </div>
</div>
</div>
<input type="button" id="addpage" value="Save Page" class="addnewuserbtn">
</form>
I've found this bit of code
//////////////////////////////////////////////////////////
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progress, false);
}
return myXhr;
//////////////////////////////////////////////////////////
and this
//////////////////////////////////////////////////////////
function progress(e){
if(e.lengthComputable){
//this makes a nice fancy progress bar
$('progress').attr({value:e.loaded,max:e.total});
}
}
//////////////////////////////////////////////////////////
Can any one help me complete the function below so it validates the input text fields and file fields, before it submits checks to see all the fields are not empty, then uploads the files. I'm not using IE so compatibility is not an issue.
$("#addpage").click(function(){
var form = new FormData($('#submitpage')[0]);
$.ajax(
url: 'includes/process-category.php',
data: form,
contentType: false,
processData: false,
type: 'POST',
},
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
if(msg == 'OK') {
result = '<div class="notification_ok">The Category has been saved. Please wait while you are redirected!</div>';
$('#note').html(result);
setTimeout(function()
{
window.location.href = "includes/showcategories.php";
}, 4000);
}
else
{
result = msg;
$('#note').html(result);
}
}
});
return false;
});