PHP Not Able To Get POST value passed from AJAX

Question

I'm following what this post mentioned to upload a file. A little difference is I added one more text input field on the form. The image file is uploaded to server successfully but it seems the value in input field doesn't get passed to PHP for database update. The database function is fired and database record added but missing the value from the form.

Can anyone point me out what I missed? Thanks.

$.validate({
  form: '#frmSlide',
  modules: 'file, html5',
  validateOnBlur: false,
  errorMessagePosition: 'top', // Instead of 'element' which is default
  scrollToTopOnError: false, // Set this property to true if you have a long form
  onSuccess: function($form) {
    var file_data = $('#a_imgfile').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);
    $.ajax({
      url: 'slide_upd.php', // point to server-side PHP script
      dataType: 'text', // what to expect back from the PHP script, if anything
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,
      type: 'post',
      success: function(data) {
        alert(data);
      }
    });
  }
});

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
  <div class="form-group">
    <label class="col-sm-4 control-label" for="imgfile">Image file</label>
    <div class="col-sm-8">
      <input type="file" id="a_imgfile" data-validation="required mime size" data-validation-allowing="jpg, png, gif" data-validation-ratio="1:1" data-validation-max-size="1M" data-validation-error-msg="An image file is mandatory." />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-8 col-md-offset-4" id="image-holder">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="seq">Sequence</label>
    <div class="col-sm-8">
      <input class="form-control server" name="a_seq" id="a_seq" type="number" min="1" max="4" value="" placeholder="Enter display sequence of this slide" data-validation-error-msg="Only 1 to 4 is allowed." />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
      <button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i>&nbsp;Update</button>
    </div>
  </div>

</form>

<?php
 $image_name = $_FILES['file']['name'];
 $image_size = $_FILES['file']['size'];
 $image_temp = $_FILES['file']['tmp_name'];
 
 move_uploaded_file($image_temp, 'img/'.$image_name);

 $seq = $_POST['a_seq'];
 addSlide($seq);
?>

function addSlide($seq) {
 $seq = (int)$seq;
 mysql_query("INSERT INTO slide (seq, lastchgat) 
  VALUES ('$seq', now())")  or die(mysql_error());
}

Can you show me how to append other fields on the form? Thanks. — Fai W, May 13 '16 at 10:40
`var a_seq = $('#a_seq').val();` `form_data.append('a_seq', a_seq);` Have something like this — guradio, May 13 '16 at 10:43
added the two lines you suggested above 'var file_data = $('#a_imgfile').prop('files')[0];', but still no luck — Fai W, May 13 '16 at 10:48
add the var `form_data.append('a_seq', a_seq);` after `form_data = new FormData();` — guradio, May 13 '16 at 10:52
it works.. should have appended after form_data is defined. How do I mark yours as answer, — Fai W, May 13 '16 at 10:52

score 2 · Accepted Answer · answered May 13 '16 at 10:53

2

The a_seq is not appended to the form_data.
add var a_seq = $('#a_seq').val();
form_data.append('a_seq', a_seq);
Should be good to go

answered May 13 '16 at 10:53

guradio

15,524
4
36
57

score 0 · Answer 2 · answered May 13 '16 at 04:56

I think this will fix your problem

$.validate({
  form: '#frmSlide',
  modules: 'file, html5',
  validateOnBlur: false,
  errorMessagePosition: 'top', // Instead of 'element' which is default
  scrollToTopOnError: false, // Set this property to true if you have a long form
  onSuccess: function($form) {
    //var file_data = $('#a_imgfile').prop('files')[0];
    //var form_data = new FormData();
    //form_data.append('file', file_data);
    //------ instead of three lines i just did this and works fine for me -------
    var formData=new FormData($('#frmSlide')[0]);
    $.ajax({
      url: 'slide_upd.php', // point to server-side PHP script
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      type: 'post',
      success: function(data) {
        alert(data);
      }
    });
  }
});

Unfortunately, even the file is now not uploaded. – Fai W May 13 '16 at 10:20 — Fai W, May 13 '16 at 10:20

PHP Not Able To Get POST value passed from AJAX

2 Answers2