We Keep Coding

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() doesn't pass file data

I have a very simple form.
<form name="text_hero" id="text_hero" action="<?php echo site_url('templates/saveImage/texthero'); ?>" method="post" enctype="multipart/form-data">
<input type="file" name="uploaded_file">
<input type="submit" value"submit file">
</form>
When pressing the submit button the file is uploaded correctly and saves.
When using Jquery to either "click" the submit button or manually submit the form it fails to send the file.
Jquery:
$('#' + FormName).submit();
Can anyone tell me the reason for this?
EDIT
When outputting the php $_FILES var it just outputs Array() with the jquery method but with the button method it outputs the actual file.

About
When you do some upload of files you need put on form this enctype="multipart/form-data"
Example:
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
To save the tmp_file to some file
you need put some validation but the basic upload some file is this.
move_uploaded_file($_FILES['file']['tmp_name'], 'path/to/file');
I hope it help you.

Creating multi purpose button in html

When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?
http://goawaymom.com/buttons.png
my html -
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file"class="box"/>
<input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>
-Note I don't care to put them on separate lines or make font smaller- etc

Simplest Way:
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
Without Jquery, Only JavaScript
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>

<script type="text/javascript">
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
if(fileName){
remove chose file button and show upload button(visible property)
}
});
});
check jQuery - Detecting if a file has been selected in the file input

Yep, it's very easy indeed. You can listen for onchange event of the file input and hide it.
HTML:
<input name="inpt" type="file"/>
<input type="button" value="Upload"/>
Javascript:
//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
//setting display to "none" hides an element
inpt.style.display="none";
};
JSfiddle
PS. if you want you can use the same trick to show the "Upload" button only when a file is chosen. In that case the button code will be <input id="btn" type="button" value="Upload" style="display:none"/> and in the Javascript code you write btn.style.display="" to show the button.

I can say that there are multiple ways to do it. But in core java script the below is the approach
(1) Initially set the display style of upload button to none in order to hide that
(2) Write Onchange event handler for input file type
(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').
Hope this approach works

How to upload a file in just one click

I have HTML page, which gives an option to upload a file to the server, there is a servlet action class at server side & it handles request and write the file. Here how it works
Click to Browse the file and select the file
click the submit button.
But I want to upload in just one click on any button, please take a look of my code and suggest how to do that using javascript/jQuery fn.
<html> <head>
<script type = "text/javascript">
function test() {
var uploadfile = document.getElementByID("upload_id");
uploadfile.click(); // here i can browse the file without clicking on file brows button
} </script> </head> <body>
<input type="button" id="just_one_click" value ="click me" onclick="test();" />
<form action="upload.do" method="post" enctype="multipart/form-data">
<input type="file" id="upload_id" name = "fileupload" />
<input type = "submit" value="upload" />
</form> </body> </html>

You can assign id (let's say 'myform') to your form and use document.getElementById('myform').submit(); instead of uploadfile.click();.

Show image when form is submitted?

Using Javascript I would like to show a working/loading image once a user hits submit on my form. The form is used to upload video's so it can take a while for the file to upload. Once the file is done uploading the page reloads so the loading image would not need to be visible anymore.
Can anyone help me with this please?
<form method="POST" enctype="multipart/form-data" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
<input type="hidden" name="upload" value="yes">
First Name: <input type="text" name="firstname"><br>
Email: <input type="text" name="email"><br>
Email Confirmation: <input type="text" name="email2"><br>
Video Title: <input type="text" name="title"><br>
Video Description: <input type="text" name="description"><br>
Video to upload: <input type="file" name="uploadedfile"><br>
Terms: <input type="checkbox" name="terms"> Must be checked to accept our terms of service.<br><br>
<input type="submit" value="Upload Video">
</form>

Using jquery: you can use as follow within document.ready
$("form").submit(function() { //you can assign id to your form and used that id instead of form
$("#iamgeid").show();
return true;
});

Normally We cannot display a loading image after submitting a form, because when we submit a form initially it sends request to the server and the loading is only because of the server response after uploading. loading image will not animate while server is loading.
To show the loading image we have to do some tricks.
1. We should not submit the form in the same window, instead we have to post the form to a iframe. this can be done by adding the target attribute to the form tag.
<div id="form-container">
<form ... action="uploadfilepath" target="iframe_name">
......................
......................
</form>
</div>
<iframe name="iframe-name" onsubmit="showimage()" style="width:1px; height:1px; visibility:hidden;"></iframe>
2. We have to add the script to show image when server is loading inside the iframe.
<img src="loading image path" id="image-container">
<script>
function showimage() {
document.getElementById('form-container').style.display='none';
document.getElementById('image-container').style.display='block';
}
</script>
3. Also add the script after uploading the file.
.......................................
.......................................
your file uploading
code goes here
.......................................
.......................................
at the end print the script to reload the parent window or call the function in parent window.

Best approach would be an AJAX call to do the whole thing.
Place an image with display: none on the desired location and then do this small thing:
var d = document;
var demoInterval;
$("form").submit(function() {
$("img").show();
demoInterval = setInterval(intervalFunc, 1000);
});
function intervalFunc()
{
if(d.ready) // finished uploading video
{
window.clearInterval(demoInterval);
$("img").hide();
}
}