Creating multi purpose button in html

Question

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

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, Nov 22 '12 at 08:31
After clicking choose file, and if file is captured without errors you choose button can become the upload button calling the upload process. After upload finishes or fails the button comes back to choose function. Sort of a toggle behaviour isn't it? — bonCodigo, Nov 22 '12 at 08:33
It is okay to hide the file input once a file is selected, rite? — Akhil Sekharan, Nov 22 '12 at 08:49

Akhil Sekharan · Accepted Answer · 2012-11-22T09:02:16.367

9

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>

edited Nov 22 '12 at 09:02

answered Nov 22 '12 at 08:46

Akhil Sekharan

12,467
7
40
57

Hm this is more of the answer i was looking for but it doesn't quite seem to work. What's missing? – thedullmistro Nov 22 '12 at 08:51
After I choose a file to upload the 'choose file' button still doesn't change in to an upload button. – thedullmistro Nov 22 '12 at 08:52
It's because this answer requires jQuery. – ThinkingStiff Nov 22 '12 at 08:53
Is there any way to hide that 'no file choosen' before i choose a file? – thedullmistro Nov 22 '12 at 09:03
We can't play much with input tag. Since its a base element. But one thing we can do is to decrease the width of the element by half. So it will display a tooltip 'No file chosen' instead of showing the full sentence. – Akhil Sekharan Nov 22 '12 at 09:12
$($($('.box')).css('width', parseFloat($($('.box')).css('width'))/2 )) – Akhil Sekharan Nov 22 '12 at 09:13

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

<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

edited May 23 '17 at 12:09

Community

1
1

answered Nov 22 '12 at 08:32

arrest warrant

344
2
17

AlexStack · Answer 3 · 2012-11-22T08:42:50.903

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.

Hm- that fiddle doesn't seem to do what I had asked? It doesn't replace the choose file button with the upload button after you choose the file. — thedullmistro, Nov 22 '12 at 08:37

Ramya · Answer 4 · 2012-11-22T08:47:58.173

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

Creating multi purpose button in html

4 Answers4