title: How to send form data including a file to ajax via onclick() function?
body: <p>My Modal has a form:</p>
  
  <pre><code>&lt;div class="modal fade bs-example-modal-lg" id="myMODALTWO" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="form-content"&gt;
              &lt;div class="modal-dialog modal-lg" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                          &lt;h4 class="modal-title" id="myMODALTWOLabel"&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;form role="form" method="POST" action="" id="stuff"&gt;
                      &lt;div class="col-md-12"&gt; 
                       &lt;div class="box box-info"&gt;
                          &lt;div class="box-header"&gt;
                              &lt;h3 class="box-title"&gt;Update History&lt;/h3&gt; 
                              &lt;input  type="hidden" class="form-control" id="IDu" disabled=""&gt; 
                          &lt;/div&gt;
          &lt;!-- /.box-header --&gt;
                          &lt;div class="box-body table-responsive no-padding" id="output"&gt;
                              &lt;table class="table table-bordered table-hover" id="updatetable" &gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
          &lt;!-- /.box-body --&gt;
                       &lt;/div&gt;
  
                       &lt;div class="box box-primary"&gt;
                          &lt;div class="box-header"&gt;
                              &lt;h3 class="box-title"&gt;Insert your update here...&lt;/h3&gt;
                          &lt;/div&gt;
  
                          &lt;div class="box-body"&gt;
                              &lt;!-- &lt;label&gt;Update Content&lt;/label&gt; --&gt;
  
                              &lt;textarea class="form-control" rows="3" placeholder="Enter Update..." id="updatecontent"&gt;&lt;/textarea&gt;
                              &lt;input class="form-control" type="text" placeholder="Name" id="updateuser"&gt;
                              &lt;label&gt;&lt;input type="checkbox" class="flat-red" id="closed"&gt;To be Closed&lt;/label&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="exampleInputFile"&gt;Evidence Upload&lt;/label&gt;
                                  &lt;input type="file" id="exampleInputFile"&gt;
                                  &lt;p class="help-block"&gt;Please upload evidence here&lt;/p&gt;
                               &lt;/div&gt;
  
  
                          &lt;/div&gt;
  
  
                      &lt;/div&gt;
  
  
                      &lt;/form&gt; 
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary" onclick="update()" &gt;Update&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>With this, I would like to submit some data to the ajax function via the onlick function (update()). My problem is I m not sure on how to get the File submitted to the ajax function below. The data functions are correctly submitted. </p>
  
  <pre><code>function update() 
   {
       setTimeout(function(){$('#myMODALTWO').modal('hide')}, 3)
  
      var updatecontent = document.getElementById("updatecontent").value;     
      var updateuser = document.getElementById("updateuser").value;
      var IDU = document.getElementById("IDu").value;
      var uploaded = document.getElementById("exampleInputFile");
  
      alert(uploaded);
      if(document.getElementById('closed').checked) 
      {
          var status="CLOSED";
      } else 
      {
          var status ="OPEN";
      }
  
  
  
      var dataStringro = 'id=' + IDU + '&amp;updatecontent=' + updatecontent + '&amp;updateuser=' + updateuser + '&amp;status=' + status;
  
  // AJAX code to submit form.
  $.ajax({
      type: "POST",
      url: "insertupdate.php",        
      data: dataStringro,
      cache: false,
  
  
      success: function(html) 
      {      
  
  
  
                  $('html').scrollTop(0);
  
                  setTimeout(function(){$('#submitting').modal('hide')}, 3)
                  $('#submitting').show();
                  $("#submitting").fadeTo(3000, 500).slideUp(500, function()
                  {
                      $("#submitting").alert('close'); 
                  });
  
                 /*  setTimeout(function(){$('#exampleModal').modal('hide')}, 6)  */                  
                  $('#successmodel').delay(3200).fadeIn(500);
                  $('#successmodel').delay(3000).fadeOut(500);
                  /* $("#successmodel").fadeTo(3000, 500).slideUp(500, function()
                  {
                      $("#successmodel").alert('close'); 
                  }); 
                   */
                   setTimeout(function(){location.reload();}, 7150); 
                  /* setTimeout(function(){$('#exampleModal').modal('hide')}, 3)
                  $('#successmodel').show();
                  $("#successmodel").fadeTo(3000, 500).slideUp(500, function()
                  {
                      $("#successmodel").alert('close'); 
                  });
                  setTimeout(function(){location.reload();}, 4000); */
  
  
      },
     error: function (html) 
     {
                  $('html').scrollTop(0);
                  setTimeout(function(){$('#submitting').modal('hide')}, 3)
                  $('#submitting').show();
                  $("#submitting").fadeTo(3000, 500).slideUp(500, function()
                  {
                      $("#submitting").alert('close'); 
                  });
  
                  $('#verybadmodel').delay(3200).fadeIn(500);
                  $('#verybadmodel').delay(3000).fadeOut(500);
      }
  
  
  
      /* var dataTable = $('#example1').dataTable();
      var oSettings = dataTable.fnSettings();
      dataTable.fnClearTable(this);
      for (var i=0; i&lt;json.aaData.length; i++)
      {
          dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
      }
      oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
      dataTable.fnDraw(); */ 
  
  
  });
  
  return false;
  
  
  
   }
  </code></pre>