jquery - Add a photo and tags in a single ajax request -

i'm writing page user can upload photo, add comment , tags. before photo uploaded displayed user. once user hits post button data sent database. problem can't upload both photo , tags @ same time. i'm using tokeninput plugin catch tags.

<form method="post" action="" class="snap-pic">   <section class="new-snap-upload">      <img src="images/newsnap-icon.png" alt="image" class="newsnapbox">      <div class="errortext" style="color: red;"></div>      <input type="file" name="newsnap" id="uploadnewsnap">      <button id="imgbutton">upload snap</button>   </section>                 <section class="snapitems">      <h5>about outfit</h5>      <textarea rows="10" cols="60" name="aboutoutfit" class="aboutfit"></textarea>      <div class="error-items" style="color: red;"></div>   </section>   <section class="snaptags">       <h5>tags</h5>       <input type="text" name="tags" class="tagbox-snap">       <div class="error-tags" style="color: red;"></div>       <img src='' alt="" class="loader-gif"></img>   </section>        <input type="submit" class="submit-snap" name="submit-snap" value="post!"> </form> 

when user click on upload snap select photo want upload , it's displayed in <img> tag. when post clicked want send data database. i'm using function:

$(".snap-pic").on('submit', (function (e) {     e.preventdefault();                    $(".errortext").text('loading...');     $.ajax({         url: "snap-ajax.php",                 type: "post",                      data: new formdata(this),          contenttype: false,                cache: false,                      processdata: false,                 success: function (data)            {            $(".errortext").text('ok');         }     });     }  )); 

to insert tags i'm using this:

var names = [];             $('.tagbox-snap').siblings("ul").find('li p').each(function () {                 names.push($(this).html());                 //names.push($(this).text());//possibly better                 tags = names.join()             });  $.ajax ({             url: "ajax-training.php",             type: "post",             data: {'tags': tags},             success: function (data) {             alert(data);                     },              error: function () {             alert("problem");             }             }); 

however can't seem use both functions @ same time. when use 1 uploading photos can't use 1 tags , other way around. there anyway can send new formdata {'tags': tags}? i'm not sure how use formdata though. i'd send same page then.

i'm sorry chaotic post , hope legible enough. thank help.

from mdn formdata docs can use formdata.append().

code like:

$(".snap-pic").on('submit', (function (e) {     e.preventdefault();                    $(".errortext").text('loading...');     var postdata = new formdata(this);      var tags = // tags data here      // add tags formdata     postdata.append('tags', tags);       $.ajax({         url: "snap-ajax.php",                 type: "post",                      data: postdata,          contenttype: false,                cache: false,                      processdata: false,                 success: function (data)            {            $(".errortext").text('ok');         }     });     }  ));