show hide submit button with jquery

Posted on 2010-08-24
Last Modified: 2012-06-21

How would I only display the submit button below when the user has selected a file to input in the file input control.  I want the submit button to remain hidden until the do select a file to input. I'm using jquery.

<form id="uploadFrm" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
                        <input type="file" name="image" id="image" size="50"/>
                        <input type="submit" name="submit" value="Upload" id="submit"/>
Question by:cgray1223
  • 2

Accepted Solution

dfendig earned 500 total points
ID: 33518132
Try this:

add this into your javascript code:

function showSubmit()


and change your html to this

<form id="uploadFrm" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
                        <input type="file" name="image" id="image" size="50" onchange="showSubmit()"/>
                        <input style="display:none" type="submit" name="submit" value="Upload" id="submit"/>

Expert Comment

ID: 33518150
Display vs. Visibility
Visibility:hidden will leave space in the container for the object so youll see the gap where the submit button would be.
Display:none does not leave space in the container, and when you change it to Display:box or whatever it adds container space to show it.

Also, i didn't see the id for the submit button at the end of the input tag. You could just use $('#submit').show() instead of $('input[name=submit]').show();

Expert Comment

ID: 33518169
Can also do ...             

<script type="text/javascript">
      $("#image").live('change', function() {
            alert("I Changed ");

Just change the submit button HTML to have style="display:none"

Hope that helps.


Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question