Jquery form submit does not work

Question

   <script type="text/javascript">
                  $('#fileUpload').submit(function (evt) {
                      evt.preventDefault();
                      $.ajax({
                          url: "/Transport/GridUpload",
                          type: 'POST',
                          data: $("#fileUpload").serialize(),
                          success: function (response) {
                           alert("it Works");
                          }
                      });
                  });
              </script>

I'm trying to post form via Ajax, but it does not work.

Form html:

   @using (Html.BeginForm("GridUpload", "Transport", new { tipas = 1 }, FormMethod.Post, new {enctype="multipart/form-data", id = "fileUpload" }))
                  {  
                      <table style="margin-top:0px;">
                          <tr>
                              <td>
                                  <label for="file">Filename:</label>
                              </td>
                              <td>
                                  <input type="file" name="file" id="file" />
                              </td>
                              <td>
                                  <input type="submit" class="upload-button" value="Upload" />
                              </td>
                          </tr>
                      </table>
                  }

I get error:

POST http://localhost:3043/Transport/GridUpload 500 (Internal Server Error)

What may be wrong with my code? Am I missing something? For the record, If i remove evt.preventDefault(); everything works, but i need to prevent submitting form without ajax.

"everything works, but i need to prevent submitting form without ajax." - that means I need only ajax submit...? So i should change $('#fileUpload').submit to what? — Justina Seliokaite, Sep 01 '14 at 10:20
i have seen at ur code that you are uploading some data through form. So submitted is required here. Ajax will not work. — Amit Soni, Sep 01 '14 at 10:22
The problem is that `$("#fileUpload").serialize()` returns empty string, because [data from file select elements is not serialized](http://api.jquery.com/serialize/). To learn how to send file to server via Ajax, take a look at [this question](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — Regent, Sep 01 '14 at 10:46
checkout uploading image async in asp.net mvc http://stackoverflow.com/questions/16255882/how-to-upload-image-display-image-in-asp-net-mvc-4/16256106#16256106 — Idrees Khan, Sep 02 '14 at 05:15

score 0 · Answer 1 · edited Sep 01 '14 at 12:30

0

Change this

  <input type="button" id="fileUpload" class="upload-button" value="Upload" />


 $('#fileUpload').click(function (evt) {

change

 @using (Html.BeginForm("GridUpload", "Transport", new { tipas = 1 }, 

 FormMethod.Post, new {enctype="multipart/form-data", id = "fileUpload1" }))

edited Sep 01 '14 at 12:30

Kamlesh Arya

4,864
3
21
28

answered Sep 01 '14 at 10:21

Amit

15,217
8
46
68

then how will upload code works? as its uploading data – Amit Soni Sep 01 '14 at 10:22
enctype="multipart/form-data" work with form submitted only. It will not work with Ajax – Amit Soni Sep 01 '14 at 10:24
@AmitAgrawal misclick. – Inspector Squirrel Sep 01 '14 at 10:25
Also need to provide parameter name as well in data – Amit Sep 01 '14 at 10:25
@JustinaSeliokaite You have to do it with Form submit itself. Ajax post will not help here as you are uploading some data as well. – Amit Soni Sep 01 '14 at 10:32
I need to send info with ajax... There should be some way? – Justina Seliokaite Sep 01 '14 at 10:35
@KamleshArya your edit is incorrect: `form` is supposed to have `id` not equaled to "fileUpload" (for example, "fileUpload1", as it was). – Regent Sep 01 '14 at 12:28

Jquery form submit does not work

1 Answers1