Get JSON response from Form Submit

Question

I am not front end developer and I'm spending a quite time trying to do so. Hope you guys can help me. I have a form which sends files to an API in server, like below:

<form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1">   

      <div class="inputFileCustom">
        <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
        <label for="uploadFiles">
            <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
            Choose a file
            </div>
        </label>
    </div>

    <input type="submit" value="Upload PDF" class="btn btn-primary" />
</form>

url/upload returns a JSON, like:

{ "status": "ok"/"fail" }

I need two things:

Prevent submit to redirect to url/upload;
Get JSON response from server and, if successful, call loadFiles() function (which is already working).

I'm using javascript for loadFiles() function, but its very simple.

Are you using jQuery? You can install an event listener on 'submit' for your form and use event.preventDefault() to not call 'url/upload' after submit. Combine it with some AJAJ and you're done. — Michael Röhrig, Mar 02 '16 at 16:35
@MichaelRöhrig I'm using jQuery and I tried it. But any ajax code worked. Got a Bad Request error. — Leonardo, Mar 02 '16 at 18:05

score 4 · Accepted Answer · edited May 23 '17 at 10:28

4

You can use jquery form handler as,

<script>     

    // Attach a submit handler to the form 
  // Attach a submit handler to the form 


$("#uploadForm").submit(function(event) {

    var formData = new FormData();
    formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
    event.stopPropagation();
    event.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(data) {
        alert(data);
        loadFiles()
      }
    });
    return false;
  });

    </script>

Refer this stackoverflow question

edited May 23 '17 at 10:28

Community

1
1

answered Mar 02 '16 at 17:08

Shankar Gurav

1,057
9
17

Thank you but it didn't work. While debugging, when it steps over `var formData...` line, it calls `url/upload`. – Leonardo Mar 02 '16 at 18:16
Try removing action and add hard coded URL in Ajax call. – Shankar Gurav Mar 02 '16 at 18:26
I did as you said but still not working, it redirects. – Leonardo Mar 02 '16 at 18:29
It returns `Uncaught TypeError: Illegal invocation`. I tried change formData for filename but still doesn't work. – Leonardo Mar 03 '16 at 18:08
1

Thank you SO much Shankar! Your code update helped me solving my problem! I just had to change `formData.append("uploadFiles"...` to a name which server was waiting. – Leonardo Mar 04 '16 at 15:47

score 2 · Answer 2 · answered Mar 02 '16 at 16:39

2

It looks like you need to post the request using Javascript. If you're using JQuery, you can use $.ajax for example:

$.ajax({
    url: '',
    type: '',
    data: {},
    success: function(data){
        console.log(data);
    }
})

Using this means that it won't redirect the page away from the form, so that you can display success or error messages to the same screen.

See http://api.jquery.com/jquery.ajax/ for more information

answered Mar 02 '16 at 16:39

Luke P

723
7
19

That is a server side error, so either its expecting a parameter you're not passing, or it's something else server side. Ajax is the right solution, using the code above it will make a request to the server and log out the response. – Luke P Mar 02 '16 at 18:22

score 0 · Answer 3 · answered Mar 02 '16 at 22:28

Check this fiddle: https://jsfiddle.net/41mnz0z1/

$('#uploadForm').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: '/echo/json/',
        data: $(this).serialize(),
        type: 'POST',
        success: function(data) {
            alert(data);
        }
    });
});

e.preventDefault() prevents the standard action of the browser after submitting the form (redirecting you to another page). data: $(this).serialize() sends the form data to your desired url: 'fileUpload.php'.

It works the same with a file.

This is not working. I don't know how server is getting this request but using `$(this).serialize()` returns an error. If I use filename in URL property (url + fileToPost) it returns Bad Request. — Leonardo, Mar 03 '16 at 14:55

score -1 · Answer 4 · answered Mar 02 '16 at 16:40

1. Prevent submit to redirect to url/upload    

    <form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1" onsubmit ='return checkRegistration()'>   

              <div class="inputFileCustom">
                <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
                <label for="uploadFiles">
                    <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
                    Choose a file
                    </div>
                </label>
            </div>

            <input type="submit" value="Upload PDF" class="btn btn-primary" />
        </form>


     <script>
        function checkRegistration(){
            if(!form_valid){           
                return false;
            }
            return true;
        }
        </script>

This code-only answer doesn't explain what was wrong or how to fix it. — ssube, Apr 07 '16 at 18:59

Get JSON response from Form Submit

4 Answers4

Linked