2

I am trying to implement upload file , I want to call the file input to select the file first, after selected the file , then will do form submit. However in my code , it will call form submit immediately. I have tried use ajax but not work. Any way I want to do the form submit just after the user have selected the file. But it seems cannot find a way to wait the finishing of the file input click function ( I mean until the user have selected a file)

Here is my html:

 <input type="text" id="body" name="body" >
 <button type="submit"  id="sent_1" value="Send">Submit</button>         
 <input type="file" id="image_file" name="image" size="chars">
 <button  id="send_img_btn" value="image">Image</button></td>

Here is my javascript:

    $('#send_img_btn').click(function(e){
          e.preventDefault();
    $('#image_file').click();
    $('#form').submit();
});

function imageClick(){
       $('#image_file').click();
}

function submit(){
       $('#form').submit();
}

Edited: Maybe I am not clearly saying my problem. The problem is that when
I click the button, it just submit the form instantly, not waiting me for selected file. I want it to wait me until I selected the file then submit.

want_to_be_calm
  • 1,477
  • 3
  • 23
  • 41
  • 1
    If you intend to submit your form as soon as user selects a file, then use the input's _change_ event to accomplish the same – akgaur Oct 19 '16 at 10:29

2 Answers2

5

Add attribute type="button" in <button> tag.

By default, <button> tag acts like <input type="submit"> inside <form> tag.

<button type="button" id="send_img_btn">Image</button>
Aakash Martand
  • 926
  • 1
  • 8
  • 21
2

If you want to submit the form as soon as the file is selected, use change event of that input.

<form action="formActionUrl" name="myForm">
   <input type="file" name="myInput"/>
</form>

In Script

$(":file").change(function(e){
     $("[name=myForm]").trigger('submit');
});
APECE
  • 125
  • 10