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
Related
There is a simple input file:
<form id="uploadForm" enctype="multipart/form-data" action="getCSVFile" method="post">
<input type="file" class="upload" id="uploadFile" name="file" />
<input type="text" name="campaignId" style="display:none" data-dojo-attach-point="campaignIdInputValue"/>
</form>
But when I click to input file it opens file select window, I choose file or click cancel and every time it close file select window and open the same new. It happened only for IE.
Even if I remove all code except
<input type="file" />
I have same problem. Also I should specify that I use it with Dojo framework.
I want to abstract the file-browse dialog from the user and only show one button for upload, like so:
<input type="button" id="uploadFile" value="Upload" />
<div class="hidden">
<form id="uploadFileForm" method="post" enctype="multipart/form-data">
<input type="file" id="browseForFiles" />
<input type="button" id="submitFile" value="Submit File" runat="server"
onclick="return true;"
onserverclick="SubmitFile_Click" />
</form>
</div>
$("#uploadFile").click(function () {
// trigger hidden file dialog
$("#browseForFiles").click(); // works
});
$("#browseForFiles").change(function () {
$("#submitFile").click(); // doesn't work; doesn't call onserverclick
});
Physically clicking on the submitFile button works fine and calls the server-side method, but since I want the actual server-side button to be hidden, the user can't physically click it. How do you fake a physical click in jQuery/Javascript?
EDIT :
I also tried:
<input type="submit" id="submitFile" value="Submit File" runat="server"
onclick="return true;"
onserverclick="SubmitFile_Click" />
$("#uploadFileForm").submit(); // doesn't work either
Have you tried this?
$('#uploadFileForm').submit()
$("input[id$='submitFile']").click(); works.
I didn't realize that ASP.NET was replacing the ID of the element to something like ctl00_PlaceHolderMain_submitFile even if regular HTML controls were used!
$("input[id$='submitFile']")[0].click(); works as well.
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.
How can I make a button in the html you need to send files that allow you to select the file and then sending it on the page that I want without using a button to select the file and a button to send it to another page?
Thanks you!
<form>
<input type="file" onchange="this.form.submit()" />
</form>
jsFiddle Demo
form.submit() on MDN
You should use
HTML
<form id="form">
<input type="file" id=file"/>
</form>
more info: http://www.w3.org/wiki/HTML/Elements/input/file
Jquery
$("#file").onchange(function () {
$("#form").submit();
});
I think it more simple, has no javascript need(inline) and fully functional, it works great.
<form id="MyGreatFileUploadForm" action="/upload">
<input type="file" id="MyGreatFileUploadHidedButton" onChange="document.getElementById('MyGreatFileUploadForm').submit();" style="display:none;" />
<button type="button" onclick="document.getElementById('MyGreatFileUploadHidedButton').click();">Upload My Great File</button>
</form>
I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?
You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.
If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...
you can have a simple hyperlink outside of your form like this
click to submit and that's all you need