We Keep Coding

html input file click event submit form before select file

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.

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>

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

Disabling form auto submit

I am trying to build an image upload interface which submits the form automatically as soon as choosing a file from the file browse window. This is how my HTML looks like:
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
and this is how my JS looks like:
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
Problem is as soon as I click image input which triggers #avatar, file browser is being opened but the form automatically being submitted without allowing me to choose a file from the window.
What is wrong here?

The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:
$("input[type='image']").click(function(e) {
e.preventDefault();
$("input[id='avatar']").click();
});

I don't really understand your problem. Here it seems to work. It doesn't submit the form when I open the file browser, until I choose an image and close the file browser. (note it doesn't post after it either but that's because of a javascript error that is not related to your problem. When you copy this code to an empty html it should work)
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>

jquery submit form with button on event change

when a checkbox is checked, i want the form to submit. However I need parameters contained in my submit button to be part of the request.
This bit of script submits the form but not using the button. I guess because jquery submits it some other way.
$(e.target).find("input[type='radio']").attr("checked", true)
$(".edit_booking").submit()
I've tried pointing jquery to the button containing the params via it's ID and using a click event, but this doesn't work either.
$(e.target).find("input[type='radio']").attr("checked", true)
$("#bookings_next").click()
Bits of the form:
<form novalidate="novalidate" class="simple_form edit_booking" id="edit_booking_9486" action="/venues/plymouth/bookings/9486" accept-charset="UTF-8" method="post">
.............
<input type="submit" name="forward_button" value="Next step" id="bookings_next" />
Many thanks

aha, simple!
$('#bookings_next').trigger('click');
I have to trigger the event.

Submit form to new window only when specific submit button is pressed?

I have a form, which has a few different submit buttons on it all doing different things with the same post data.
Lets say for simplicity sake the form looks like this:
<form method="post">
<input type="hidden" name="ids" value="1,2,3,4" />
<input type="submit" id="picking" name="picking" value="Picking" />
<input type="submit" id="shipping" name="shipping" value="Shipping" />
<input type="submit" id="invoice" name="invoice" value="Invoice" />
</form>
At the moment the form submits to itself and I work out server side which submit button is pressed, build a URL from the POST data, then do a PHP redirect to what I need to go. This works fine.
However, I am looking for the form to post its data to a new window, but only when "invoice" is clicked. This rules out just adding target="_blank" to the form, as the other 2 buttons would submit to new pages as well.
I also can't split the form into 3 different forms as the data is a lot more complex than the above, and a lot of it is input by the user.
Is there a way to do this using JavaScript/JQuery? If so, where would I start?
Thanks

could you not add target blank to the form when invoice is clicked?:
$("#invoice").click(function(){
$('#form_id').attr('target', '_blank');
});
or:
$(document).on("click","#invoice",function(){
$('#form_id').attr('target', '_blank');
});

Try adding a click handler to the correct submit button.
$('#invoice').on('click', function(){
//doStuff
});
This will allow you to control the action of #invoice without affecting the others.

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>

It probably has something to do with this part:
<input type="file" name="userfile"
value="onchange="return validateFileExtension(this)""
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.

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

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;
}
});