Geek Answers Handbook

JQuery to submit a form to select a file does not work

I am trying to initiate a file download as soon as the user selects a file. The form should disappear, replacing the message "Upload image ...".

So far, all I get is the hidden form (and the display of messages), but the download does not happen. The form is not submitted. Any ideas why?

This is js

<script> $(function(){ $("#file_select").change(function(){ $(this).parents("#upload_form").submit(); $("#upload_form_div").hide(); $("#loading").show(); }); }); </script>

and HTML

  <div class="float_left" id="upload_form_div"> <h3>Select a picture for your profile (4 MB max):</h3> <form action="http://example.com/profile/upload_picture" id="upload_form" enctype="multipart/form-data" method="post" accept-charset="utf-8"> <input type="file" name="userfile" id="file_select" /> <input type="hidden" name="upload" value="upload" /> <button id="submit" type="submit"><img height="24" width="24" alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png"> <span>Upload</span> </button> </form> <form action="http://example.com/profile/remove_picture" method="post" accept-charset="utf-8"> <button type="submit"><img height="24" width="24" alt="Remove" src="images/icons/small/white/trashcan.png"> <span>Remove</span> </button> </form> </div> <div id="loading" style="display:none;"> Uploading your picture... </div>
+4
source share
3 answers

This probably has something to do with this part:

  <input type="file" name="userfile" value="onchange=&quot;return validateFileExtension(this)&quot;" id="file_select" />

The input type = file should not have the value = attribute (and even if so, you should not put javascript there!)

You also have javascript in the form:

 onsubmit="return validateFileExtension(this.userfile)"

If the validateFileExtension() function returns false , the form will not be submitted. However, the way you wrote jQuery means that the message will still be displayed.

EDIT:

Change the identifier on the submit button to something other than send.

In jQuery docs:

Forms and their children should not use input names or identifiers that contradict form properties such as feed, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and checking the markup for these problems, see DOMLint .

BUT:

You should consider @Abdul's solution, as a working submit will take you away from your message.

If you are using CodeIgniter and you do not want to use Ajax, you should use the flash function to display a message to the user after submitting the form.

+3
source

You should consider using a jquery form plugin to submit your form and a jquery validate plugin to validate your form for file extensions and all. The jquery form plugin submits your form using ajax. This way you will not be redirected to create an action. Also, if you want, you can consider using a jquery dialog to display the result.

  $("#upload_form").validate({ rules: { MyFile: { required: false, accept: "jpg|jpeg|png|gif" } } }); $("#file_select").change(function(){ ("#upload_form").ajaxSubmit(); $("#upload_form_div").hide(); $("#loading").show(); });
+2
source

Submit a file selection form and confirm the CSV file entry

  $('#file').change($('form').submit()); $('form').submit(function(){ if($('#file').val().toLowerCase().indexOf('.csv') != -1){ $('#spinner').show(); return true; } else{ alert('Invalid File format. Please, upload CSV file') return false; } });
0
source

More articles:


All Articles