How to disable the button if the input field and file is empty?

Question

I'm here at Stackoverflow again asking for help that will make it a lot easier for me, I want to do the following

I want to disable a button if the two inputs that are (Field and File) are empty

Here is the HTML code

<form method="post" action="#" enctype="multipart/form-data">
              <div class="form-group">
                <label for="artist_name">Artist name</label>
                <textarea type="text" name="artist_name" class="form-control" id="artist_name" aria-describedby="emailHelp" placeholder="Enter artist name"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_biography">Artist biography</label>
                <textarea name="artist_biography" class="form-control" id="artist_biography" placeholder="Add biography artist"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_social_fb">Artist Social Facebook</label>
                <textarea style="resize:none;" name="artist_social_fb" class="form-control" id="artist_social_fb" placeholder="Enter artist social facebook"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_social_fb">Artist Social Instagram</label>
                <textarea style="resize:none;" name="artist_social_ig" class="form-control" id="artist_social_ig" placeholder="Enter artist social instagram"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_social_fb">Artist Social Twitter</label>
                <textarea style="resize:none;" name="artist_social_tw" class="form-control" id="artist_social_tw" placeholder="Enter artist social twitter"></textarea>
              </div>
              <div class="file-upload">
                    <label style="background-image: linear-gradient(to right, rgb(240, 152, 25) 0%, rgb(237, 222, 93) 51%, rgb(240, 152, 25) 100%);" for="upload" class="file-upload__label">Upload Photo Artist to <?php echo $wo['config']['msc_site_name']; ?> Music</label>
                    <input type="file" accept=".png,.jpg,.jpeg,.gif,image/*" name="artist_photo" class="file-upload__input" id="artist_photo"> 
             </div>
             <img style="text-align: initial;display: none;width: 170px;border-radius: 8px;" id="blah" src="#" alt="your image" />
             
              <button id="button" type="submit" class="btn btn-primary m-t-15 waves-effect">Add new artist</button>
</form>

Here is the JAVASCRIPT Code

$(document).ready(function () {
    $('button').attr('disabled', true);
    $('textarea').on('keyup', function () {
        var text_1 = $("#artist_name").val();
        var text_2 = $("#artist_biography").val();
        var text_3 = $("#artist_social_fb").val();
        var text_4 = $("#artist_social_ig").val();
        var text_5 = $("#artist_social_tw").val();
        if (text_1 != '' && text_2 != '' && text_3 != '' && text_4 != '' && text_5 != '') {
            $('button').attr('disabled', false);
        } else {
            $('button').attr('disabled', true);
        }
    });
});

It works correctly, I just wanted to know how to add the input file to this code for the disable button, but nothing wrong occurs it disables and enables when filled — Tio Uzumaki, Oct 30 '20 at 13:12
you want to disabled the button when there is no file selected for `#artist_photo`? — wei, Oct 30 '20 at 13:17
Does this answer your question? [How do I check if a file has been selected in a element?](https://stackoverflow.com/questions/24828066/how-do-i-check-if-a-file-has-been-selected-in-a-input-type-file-element) — wei, Oct 30 '20 at 13:19
Yes, this functionality works for input texts the button is disabled and enabled, I just wanted to make the input file join. — Tio Uzumaki, Oct 30 '20 at 13:20
you want to add into your condition like this? `var file_1 = $("#artist_photo").val(); if (text_1 != '' && text_2 != '' && text_3 != '' && text_4 != '' && text_5 != '' && !file_1)` — wei, Oct 30 '20 at 13:24

Babak · Answer 1 · 2020-10-30T13:32:50.397

You can use the change event instead of keyup to include changes in any input type. To check if a file input is empty or not, you can check the file length:

var fileEmpty = $('#artist_photo').get(0).files.length === 0;

Now, you can add the same class in all your inputs and add an event listener to listen to changes. So, your html/php and js would be like:

$(document).ready(function () {
    $('button').prop('disabled', true);
    $('.form-control').on('change', function () {
        var text_1 = $("#artist_name").val();
        var text_2 = $("#artist_biography").val();
        var text_3 = $("#artist_social_fb").val();
        var text_4 = $("#artist_social_ig").val();
        var text_5 = $("#artist_social_tw").val();
        var fileEmpty = $('#artist_photo').get(0).files.length === 0;
        if (text_1 != '' && text_2 != '' && text_3 != '' && text_4 != '' && text_5 != '' && !fileEmpty) {
            $('button').prop('disabled', false);
        } else {
            $('button').prop('disabled', true);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#" enctype="multipart/form-data">
              <div class="form-group">
                <label for="artist_name">Artist name</label>
                <textarea type="text" name="artist_name" class="form-control" id="artist_name" aria-describedby="emailHelp" placeholder="Enter artist name"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_biography">Artist biography</label>
                <textarea name="artist_biography" class="form-control" id="artist_biography" placeholder="Add biography artist"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_social_fb">Artist Social Facebook</label>
                <textarea style="resize:none;" name="artist_social_fb" class="form-control" id="artist_social_fb" placeholder="Enter artist social facebook"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_social_fb">Artist Social Instagram</label>
                <textarea style="resize:none;" name="artist_social_ig" class="form-control" id="artist_social_ig" placeholder="Enter artist social instagram"></textarea>
              </div>
              <div class="form-group">
                <label for="artist_social_fb">Artist Social Twitter</label>
                <textarea style="resize:none;" name="artist_social_tw" class="form-control" id="artist_social_tw" placeholder="Enter artist social twitter"></textarea>
              </div>
              <div class="file-upload">
                    <label style="background-image: linear-gradient(to right, rgb(240, 152, 25) 0%, rgb(237, 222, 93) 51%, rgb(240, 152, 25) 100%);" for="upload" class="file-upload__label">Upload Photo Artist to <?php echo $wo['config']['msc_site_name']; ?> Music</label>
                    <input type="file" accept=".png,.jpg,.jpeg,.gif,image/*" name="artist_photo" class="file-upload__input form-control" id="artist_photo"> 
             </div>
             <img style="text-align: initial;display: none;width: 170px;border-radius: 8px;" id="blah" src="#" alt="your image" />
             
              <button id="button" type="submit" class="btn btn-primary m-t-15 waves-effect">Add new artist</button>
</form>

Take a look at this code pen or run the snippet here.

How to disable the button if the input field and file is empty?

1 Answers1