Solved

show hide submit button with jquery

Posted on 2010-08-24
3
595 Views
Last Modified: 2012-06-21
Hello,

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">
                  <p>
                        <input type="file" name="image" id="image" size="50"/>
                        <input type="submit" name="submit" value="Upload" id="submit"/>
                  </p>                  
            </form>      
0
Comment
Question by:cgray1223
  • 2
3 Comments
 
LVL 2

Accepted Solution

by:
dfendig earned 500 total points
ID: 33518132
Try this:

add this into your javascript code:

function showSubmit()
{
$('input[name=submit]').show();

}

and change your html to this

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

Expert Comment

by:dfendig
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();
0
 
LVL 3

Expert Comment

by:SuchetaL
ID: 33518169
Can also do ...             

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


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

Hope that helps.



0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now