hide and show button if the type="file" is empty or not

Navigation
1

Good morning, I'm trying to show and hide the delete button if the file is empty or not and I do not know how to do it, I think it's a show and hide, but I'm not sure

HTML 

<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
    <label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px;  border-radius: 100px;cursor: pointer;">
        <span class="iborrainputfile" style="margin-left: 27px;">ATTACH FILE</span>
    </label>
    <span id="fichero_seleccionado" style="font-size: 14px; margin-left: 160px; margin-top: -33px; position: absolute;"></span>
    <input type="file" name="carta_nominador" id="carta_nominador" class="validaCarta inputfile inputfile-1">

    </div>

    <script>
        $("#carta_nominador").change(function(){
            var fichero_seleccionado = $(this).val();
            var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\]/, ''); //Eliminamos el path hasta el fichero seleccionado

            $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
        });
    </script>

    <div class="boton" style="width:110px; margin: -45px 0 5px 600px;"><a href="#" id="delCarta" style="position: absolute; color: #fff;text-decoration: none;text-transform: uppercase;margin-top: 15px;margin-left: -25px;">Delete</a></div>

JQUERY 

$('#delCarta').click(
        function(){
            clearFileInputField('carta_nominador_div');
            clearNameFile('fichero_seleccionado');
            $("#carta_nominador").change(function(){
                var fichero_seleccionado = $(this).val();
                var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\]/, ''); //Eliminamos el path hasta el fichero seleccionado

                $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
                            });
                        }
                    );
                });
                function clearNameFile(tagId) {
                    //document.getElementById(tagId).textContent = "";
                    $("#"+tagId).text("");
                }
                function clearFileInputField(tagId) {
                    document.getElementById(tagId).innerHTML = 
                                    document.getElementById(tagId).innerHTML;
                }

How could I make the DELETE button hidden and when a file is selected the button?

Thank you very much

    
asked by derek 08.11.2017 в 11:11
source

2 answers

1

You could start with the hidden button (by adding a class invisible that has display:none ) 

<a href="#" id="delCarta" class="invisible" style="position: absolute; color: #fff;text-decoration: none;text-transform: uppercase;margin-top: 15px;margin-left: -25px;">Delete</a>

and in the event change of #carta_nominador verify if the content is not empty to remove or add the class invisible 

   $("#carta_nominador").change(function(){
        var fichero_seleccionado = $(this).val();
        var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\]/, ''); 

        if(nombre_fichero_seleccionado==='') {
           $('#delCarta').addClass('invisible');
        } else {
           $('#delCarta').removeClass('invisible'); 
        }

        $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
    });
    
answered by 08.11.2017 в 12:04
1

You can create a Boolean variable, which will control the visibility of the button. Input this variable will be true , to start the deactivated button. And it will change in the on.change of the button that selects the files.

This variable will be false only when there is a selected file and then the status of the Delete button will change.

Notes:

  • The good practices recommend to enclose everything related to the DOM within function ... we must bear in mind that document.ready is obsolete since jQuery 3.
  • The use of prop is recommended, with respect to the use of attr .
  • Seeing that in your HTML you apply styles directly, commenting that it is not a good practice to place styles directly in the HTML elements, it is recommended to give those elements class names and apply the styles via CSS. In this way, the elements are more independent and if you want to change the style you just have to modify the CSS without having to search all the HTML elements to update them. 

/*Se recomienda encerrar todo el código del DOM en function*/
$(function() {
  var bolDisabled = true;
  $('#btnDelete').prop('disabled', bolDisabled);

  $('#carta_nominador').on("change", function() {
    var inputVal = $(this).val();
    if (!inputVal == '') {
      var bolDisabled = false;
    }
    $('#btnDelete').prop('disabled', bolDisabled);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="fichero_seleccionado" style="font-size: 14px; margin-left: 160px; margin-top: -33px; position: absolute;"></span>
<input type="file" name="carta_nominador" id="carta_nominador" class="validaCarta inputfile inputfile-1">
<hr />
<button id="btnDelete">Delete</button>

P.D. : On what is commented above on document.ready you can see the following question:

But it is very important not to confuse document.ready with window.load . They are two very different things. If there are doubts about the differences between the two, you can consult the answer to this question:

answered by 08.11.2017 в 12:16
CSS problem alignment of label inputs - HTML Can a textarea be given a source?