JQuery hide/show property is not working in my code

Question

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 class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i> </button> <div class="form-group" id="fileDiv"> <label for="file_1">File</label> <input type="file" name="fileUpload[file][]" id="file_1" class="form-control"/> <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>

Answer 1

.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 class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i></button> <div class="form-group" id="fileDiv"> <label for="file_1">File</label> <input type="file" name="fileUpload[file][]" id="file_1" class="form-control" /> <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/