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?

.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

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./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

• javascript
• html
• css
• button

• write javascript code...is there anything u tried – arrest warrant Commented Nov 22, 2012 at 8:29
• My javascript skills aren't good to say the best. If someone at least points me in the right direction i'd try to write the code. – thedullmistro Commented Nov 22, 2012 at 8:31
• After clicking choose file, and if file is captured without errors you choose button can bee the upload button calling the upload process. After upload finishes or fails the button es back to choose function. Sort of a toggle behaviour isn't it? – bonCodigo Commented Nov 22, 2012 at 8:33
• It is okay to hide the file input once a file is selected, rite? – Akhil Sekharan Commented Nov 22, 2012 at 8:49
• It is defiantly! actually it's preferred – thedullmistro Commented Nov 22, 2012 at 8:50

4 Answers 4

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