javascript - Disable submit button when file is not selected - Stack Overflow|Programmer puzzle solving

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

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./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>

Share Improve this question edited May 23, 2017 at 11:51 CommunityBot 11 silver badge asked Jun 4, 2013 at 8:54 Eddy 491 gold badge2 silver badges7 bronze badges

2 Have you included the jQuery library? – Insyte Commented Jun 4, 2013 at 8:56
2 Your code works fine - jsfiddle/fUvvb. You aren't including the jQuery library here however – 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 Commented Jun 4, 2013 at 8:57

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Try with Jquery declared because the Jquery is not included:

  <html>
<head>
    <script type="text/javascript" src="http://code.jquery./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>

Include the jQuery library in the <head>

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

Programmer puzzle solving

javascript - Disable submit button when file is not selected - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)