Geek Answers Handbook

Creating a multipurpose button in html

When on the phone I can’t see these two buttons, because they are too far apart. I want to do this after selecting a file, the "select file" button will be replaced by the download button. It is possible. What should I 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 do not want to put them on separate lines or reduce the font size less, etc.

+6
source share
4 answers

The 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>

No 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>
+9
source 
 <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 - detect if a file was selected in the input file

0
source

Yes, it is very simple. You can listen onchange file input event 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 "Download" button only when selecting a file. In this 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 button.

0
source

I can say that there are several ways to do this. But in the core script below is the approach

(1) First set the display style of the download button to nothing to hide it.

(2) Onchange event handler entry for input file type

(3) In this handler function, if the value is non-zero, hide the input file using the none display style, and then change the style of the download button to empty ('').

Hope this approach works

-1
source

More articles:


All Articles