Submitting multiple text fields and files in HTML form with AJAX

Question

Im new to AJAX/JQuery, and I'm wondering if there is a way to send, via an AJAX request, data from an HTML form that includes a text file, and 2 separate text boxes. I have been able to send the data from the text boxes, but the file is not sent.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    // this is the id of the form
    $("#SQLsubmit").submit(function() {

        var url = "DAOserv"; // the script where you handle the form input.

        $.ajax({
            type : "POST",
            url : url,
            data : $("#SQLsubmit").serialize(), // serializes the form's elements.
            success : function(data) {
                alert(data); // show response from the php script.
            }
        });

        return false; // avoid to execute the actual submit of the form.
    });
</script>

This is my AJAX call^

<div class="row">
<form id="SQLsubmit" name="SQLsubmit">

    <div class="form-group col-lg-4">
        <textarea rows="11" id="BAU" name="BAU" class="form-control"
            placeholder="BAU Reason" form="SQLsubmit"></textarea>
        <input type="file" name="file" /> <input type="submit"
            class="btn btn-primary" value="Submit">
    </div>

    <div class="form-group col-lg-8">
        <textarea rows="11" id="SQL" name="SQL" class="form-control"
            placeholder="SQL Statements" form="SQLsubmit"></textarea>    
    </div>

</form>

Here is the HTML.

If anyone could show me how to get the two text files, and the file into my Java Servlet (using the doPOST method), so I am able to parse all into strings, that would be greatly appreciated!

Thanks!

edit: The problem I am having when running the code in the original post is that the text fields get sent, but the file is not being sent.

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You should define enctype: 'multipart/form-data. Otherwise how jquery should know you are sending a file.

This link might help: How can I upload files asynchronously?

edited May 23 '17 at 12:29

Community

1
1

answered Jul 17 '14 at 20:22

pms

944
12
28

score 0 · Answer 2 · answered Jul 17 '14 at 20:24

0

Have you tried

 $("#SQLsubmit").submit(function() {

     var url = "DAOserv"; // the script where you handle the form input.

     $.ajax({
         type : "POST",
         url : url,
         data : new FormData(this),
         success : function(data) {
             alert(data); // show response from the php script.
         }
     });

 return false; // avoid to execute the actual submit of the form.
});

answered Jul 17 '14 at 20:24

jj689

456
2
4

Just tried this, and got a 404 error. The problem I am having when running the code in the original post is that the text fields get sent, but the file is not being sent. – jFram Jul 17 '14 at 20:35

Submitting multiple text fields and files in HTML form with AJAX

2 Answers2