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
– thedullmistro, Commented Nov 22, 2012 at 8: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
– bonCodigo, Commented Nov 22, 2012 at 8:33
It is okay to hide the file input once a file is selected, rite? — Akhil Sekharan
– Akhil Sekharan, Commented Nov 22, 2012 at 8:49

Akhil Sekharan · Accepted Answer · 2012-11-22 09:02:16Z

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, 2012 at 9:02

answered Nov 22, 2012 at 8:46

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

thedullmistro Over a year ago

Hm this is more of the answer i was looking for but it doesn't quite seem to work. What's missing?

thedullmistro Over a year ago

After I choose a file to upload the 'choose file' button still doesn't change in to an upload button.

ThinkingStiff Over a year ago

It's because this answer requires jQuery.

thedullmistro Over a year ago

Is there any way to hide that 'no file choosen' before i choose a file?

Akhil Sekharan Over a year ago

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.

|

Community · Accepted Answer · 2017-05-23 12:09:05Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Nov 22, 2012 at 8:32

arrest warrant

3542 silver badges17 bronze badges

Comments

AlexStack · Accepted Answer · 2012-11-22 08:42:50Z

0

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.

edited Nov 22, 2012 at 8:42

answered Nov 22, 2012 at 8:35

AlexStack

17.5k22 gold badges78 silver badges109 bronze badges

1 Comment

thedullmistro Over a year ago

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.

Ramya · Accepted Answer · 2012-11-22 08:47:58Z

-1

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

edited Nov 22, 2012 at 8:47

answered Nov 22, 2012 at 8:39

Ramya

1,3641 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Creating multi purpose button in html

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related