show hide submit button with jquery

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>      
cgray1223Asked:
Who is Participating?
 
dfendigConnect With a Mentor Commented:
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
 
dfendigCommented:
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
 
SuchetaLCommented:
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
All Courses

From novice to tech pro — start learning today.