Disable submit button when file is not selected

Question

I'm trying to disable a submit button when a file is not selected following a working solution online. Is it something to do with the script type?

This is the example I followed: disable submit button until file selected for upload

<html>
        <head>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
            $(document).ready(
    function(){
        $('input:submit').attr('disabled',true);
        $('input:file').change(
            function(){
                if ($(this).val()){
                    $('input:submit').removeAttr('disabled'); 
                }
                else {
                    $('input:submit').attr('disabled',true);
                }
            });
    });
        </script>
</head>

<body>
   <form action="#" method="post">

            <input type="file" name="fileInput" id="fileInput" />
            <input type="submit" value="submit" disabled />


       </form>
</body>
</html>

Your code works fine - jsfiddle.net/fUvvb. You aren't including the jQuery library here however — dsgriffin
– dsgriffin, Commented Jun 4, 2013 at 8:57
Hi, what is actually happening when you select a file? Do you want the button to enable only when the button is pressed or when a file is truely selected? — Jaay
– Jaay, Commented Jun 4, 2013 at 8:57

Mirko Cianfarani · Accepted Answer · 2013-06-04 08:58:33Z

3

Try with Jquery declared because the Jquery is not included:

  <html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


            <script type="text/javascript">
                $(document).ready(
        function(){
            $('input:submit').attr('disabled',true);
            $('input:file').change(
                function(){
                    if ($(this).val()){
                        $('input:submit').removeAttr('disabled'); 
                    }
                    else {
                        $('input:submit').attr('disabled',true);
                    }
                });
        });
            </script>
    </head>

    <body>
       <form action="#" method="post">

                <input type="file" name="fileInput" id="fileInput" />
                <input type="submit" value="submit" disabled />


           </form>
    </body>
    </html>

answered Jun 4, 2013 at 8:58

Mirko Cianfarani

2,1331 gold badge25 silver badges40 bronze badges

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

5 Comments

Eddy Over a year ago

Hi, thanks for the help. I've tried editing the src, but it's still not working. Could it be something else? But it's weird. It's working on Jsfiddle.net

Mirko Cianfarani Over a year ago

Excuse me, on my pc function and you want do you do after the submit?? The script needs the connection's Internet for using Jquery. Otherwise, copy code.jquery.com/jquery-2.0.0.js , paste on Words or Block notes and save on the pc for use without Internet

Eddy Over a year ago

Hi, thanks again. What i want to do is to enable the button after i have chosen a file. When no file is selected, it should be disable. Currently it's disabled initially, but after a file is selected, it's still disable. What you're trying to say is that if i want to use jquery, i need connection to internet? Sorry,i'm quite new in this.

Mirko Cianfarani Over a year ago

Welcome... The script <script type="text/javascript" src="code.jquery.com/jquery-2.0.0.js"></script> need the internet 's connection because this is a link with web. Then for use without the connection, you copy the text on code.jquery.com/jquery-2.0.0.min.js , paste in editor and save in ´jquery-2.0.0.min.js´ After you have to change the script (then replace) with ´<script type="text/javascript" src="jquery-2.0.0.js"></script>´ if you want more details or clarification add me with [email protected] on Skype or messenger

Eddy Over a year ago

Hi, i have email you and added you in skype. Let me know when you're free. Thanks alot Mirko.

Insyte · Accepted Answer · 2013-06-04 08:59:01Z

0

Include the jQuery library in the <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

answered Jun 4, 2013 at 8:59

Insyte

2,2382 gold badges20 silver badges28 bronze badges

1 Comment

Eddy Over a year ago

Hi thanks for the help. I've edit the javascript part. However, it's still not working.

Collectives™ on Stack Overflow

Disable submit button when file is not selected

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related