CODEWITHSUNDEEP
javascriptjqueryformsform-submit
pepe
pepe

Reputation: 9909

jQuery to submit form on file selection not working

I am trying to initiate upload of a file as soon as the user selects the file. The form should disappear replaced by the "Uploading your picture..." message.

So far, all I get is the form being hidden (and message showing), but the upload is not happening. The form is not being submitted. Any ideas why?

This is the JS

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

and the 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>

Upvotes: 5

Views: 8092

Answers (3)

Sandip Ransing
Sandip Ransing

Reputation: 7733

Submit form on file selection and validate for CSV file input 

 $('#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;
    }
  });

Upvotes: 0

willoller
willoller

Reputation: 7330

It probably has something to do with this part:

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

An input type=file should not have a value= attribute (and even if it did, you shouldn't put javascript in there!)

You also have some javascript in the form:

onsubmit="return validateFileExtension(this.userfile)"

If the function validateFileExtension() returns false then the form will not submit. However, the way you have written the jQuery means that the message will still appear.

EDIT:

Change the id on your submit button to something other than "submit".

In the jQuery docs:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

HOWEVER:

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

If you are using CodeIgniter and you don't want to use Ajax, you should consider using the flash functionality to display the message to the user after the form submits.

Upvotes: 4

Abdul Kader
Abdul Kader

Reputation: 5842

You should think of using jquery form plugin to submit your form and jquery validate plugin to validate your form for file extensions and everything.Jquery form plugin submits your form using ajax. In that way you won't be redirected to form action. Also if you want you can consider using 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();
    });

Upvotes: 2

Related Questions