Submit text-data AND file to php script with jquery

Question

I'm trying to pass the input of an HTML form to a PHP script with jQuery, but all that happens is a refresh of the page. The PHP script called by this form returns a formatted div which contains all the post data. How can I display this data in the page without reloading it?

jQuery

$("form#submissionform").submit(function(){
  var formData = new FormData($(this));
  $.ajax({
    url: 'handlers/upload.php',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
      $("#submissionform").html(data);
    }});
  });

HTML

  <form id="submissionform" method="post" enctype="multipart/form-data">
    <p>Title: <p><br><input style="width:360px" type="text" name="songtitle"><br>
    <p>Artist: </p><br><input style="width:360px" type="text" name="artist"><br>
    <p>YouTube Link(s): </p><br><input style="width:360px" type="text" name="ytlinks" cols="50"><br>
    <p>Other Info </p><br><textarea style="width:100%" name="otherinfo" rows="4" cols="50" placeholder="Bitte alle zusätzlichen Informationen hier eintragen"></textarea><br>
    <p>Select file to upload:</p>
    <input type="file" name="fileToUpload" id="fileToUpload">
    <br><br>
    <button>Send Form</button>
  </form>

Prevent default form submission `.submit(function(event){ event.preventDefault(); ...` Moreover, `async: false` doesn't seem to be a good idea — Artur Filipiak, Oct 22 '16 at 14:30
Possible duplicate of [Text Content and FileUpload with AJAX](http://stackoverflow.com/questions/30161862/text-content-and-fileupload-with-ajax) — Artur Filipiak, Oct 22 '16 at 14:55
Duplicate of [Uploading both data and files in one form using Ajax?](http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) — ettanany, Oct 22 '16 at 15:39
@ettanany I have seen both posts and tried what was mentioned but it still doesn't work, that's why I asked this question, aware that it might look like a duplicate — technical_difficulty, Oct 22 '16 at 16:07
@stendarr Please, check my answer below and let me know if it works for you. — ettanany, Oct 22 '16 at 17:16

score 0 · Answer 1 · answered Oct 22 '16 at 14:33

Firstly make an id on your button.If you use submit it will refresh your page.

<button id="btnSubmit">Submit</button>

Then

$("#btnSubmit").click(function(){
  var formData = new FormData($(this));//Here I'd like to suggest you send the data using variable .I'm giving one exmple then do like that

<p>Title: <p><br><input style="width:360px" type="text" name="songtitle" id="songtitle"><br>

var songTitle = $("#songtitle").val().trim();

In similar way you can do.

<p>Artist: </p><br><input style="width:360px" type="text" name="artist" id="artist"><br>

var artist = $("#artist").val().trim();
var formData = {
    artist : artist,
    songTitle : songTitle
}



$.ajax({
    url: 'handlers/upload.php',
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
      $("#submissionform").html(data);
    }});
  });

doesn't .val() on the file input field only return its name? I wanted to pass the whole file to the PHP script. — technical_difficulty, Oct 22 '16 at 14:42

score 0 · Answer 2 · edited Oct 22 '16 at 18:17

(...) but all that happens is a refresh of the page. (...)

In order to prevent page refreshing, you have to prevent default form submission. If the <button> inside a form has no type attribute specified or if the attribute is dynamically changed to an empty or invalid value, it's treated as type=submit, which - naturally - will submit the form as a HTTP POST request (reloading page).

The following code should work for you:

index.html:

<html>
<body>
<form id="submissionform" method="post" enctype="multipart/form-data">
    <p>Title: <p><br><input style="width:360px" type="text" name="songtitle"><br>
    <p>Artist: </p><br><input style="width:360px" type="text" name="artist"><br>
    <p>YouTube Link(s): </p><br><input style="width:360px" type="text" name="ytlinks" cols="50"><br>
    <p>Other Info </p><br><textarea style="width:100%" name="otherinfo" rows="4" cols="50" placeholder="Bitte alle zusätzlichen Informationen hier eintragen"></textarea><br>
    <p>Select file to upload:</p>
    <input type="file" name="fileToUpload" id="fileToUpload">
    <br><br>
    <!-- The button has no "type" attribute specified, so it's treated as type="submit" : -->
    <button>Send Form</button>
</form>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
  $("form#submissionform").submit(function(event){

    // prevent default form submission:
    event.preventDefault();

    var data = new FormData($(this)[0]);
    $.ajax({
      url: 'handlers/upload.php',
      data: data,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(data){
          alert(data);
      }
    });
  });
</script>
</body>
</html>

handlers/upload.php:

<?php
    $data = $_POST;
    foreach ($data as $key => $value) {
        echo $key . " " . $value . "\n";
    }
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $res = move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
    echo $res;
?>

Note: In my case, I have uploads folder inside handlers folder.

References:

still doesn't work, neither file nor other input is uploaded, and everything that happens is a page reload — technical_difficulty, Oct 22 '16 at 17:33

Submit text-data AND file to php script with jquery

2 Answers2