JQuery hide/show property is not working in my code-CodePudding

I have written code to upload multiple files by cloning input field in jquery.

Here the logic is; if #file_1 field is empty, the $('#addBtn').on('click', function () is supposed to go in else part of if condition and display the relevant hidden <p> tag. If first field is left empty, the add button (add more button) should not clone the field. Instead it should show a message to user to upload file in the first available field first and the click add button to upload more file. Here Jquery show()/hide function is not working. Please have a look on my code, I'll be much obliged. Thank you!

console.log('objection page here');
var Index = 1;
// START CODE FOR BASIC DATA TABLE
$(document).ready(function () {
    $('#addBtn').on('click', function () {
        var uploadFieldVal = $('#file_'  Index).val();
        console.log(uploadFieldVal);
        
        if(uploadFieldVal !="")
        {
             Index  ;
            var uFile = $('#file_1').clone();
            //var id = "btnAdd_"   Index;
              var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_"   Index    "'class='form-control'/> ; "   
        "<p id='fileMsg_"   Index   "style='visibility: hidden; color: red'>Please attach file here first </p>;"
        $('#fileDiv').append(fileItem);
          

        }
        else
        {
              
              console.log('fileMsg_' Index);
              $('#fileMsg_' Index).show();
              
              //$('#fileMsg_1).show(); //its also not working
        }
       
 });
});

<button  id="addBtn" type="button"><i ></i>
                </button>
                <div  id="fileDiv">
                    <label for="file_1">File</label>
                <input type="file"  name="fileUpload[file][]" id="file_1" />
               <p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p>
               </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CodePudding user response：

.show() does not work on CSS for visibility.

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

$(function() {
  console.log('objection page here');
  var Index = 1;
  $('#addBtn').on('click', function() {
    var uploadFieldVal = $('#file_'   Index).val();
    console.log(uploadFieldVal);
    if (uploadFieldVal != "") {
      Index  ;
      var uFile = $('#file_1').clone();
      var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_"   Index   "' class='form-control'/> ; ";
      fileItem  = "<p id='fileMsg_"   Index   "' style='visibility: hidden; color: red'>Please attach file here first </p>;"
      $('#fileDiv').append(fileItem);
    } else {
      console.log('fileMsg_'   Index);
      $('#fileMsg_'   Index).css("visibility", "visible");
    }
  });
});

<button  id="addBtn" type="button"><i ></i></button>
<div  id="fileDiv">
  <label for="file_1">File</label>
  <input type="file" name="fileUpload[file][]" id="file_1"  />
  <p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

You need to change visibility to visible to "show" it.

See More: https://api.jquery.com/show/