Whenever a form is submitted or completed a task, the status message is displayed on the web page. It will be a great idea to hide the message DIV after some seconds automatically from the element. Use fadeTo() method to hide DIV element after some time interval using jQuery. Not only DIV element, you can autohide any HTML element after few seconds in jQuery.

Generally, the selected checkbox values are returned in an array on HTML form submission. You can also get the checked checkbox values without form submission using jQuery. If you don’t want to use the server-side script to get the checkbox values, jQuery is an easy option to get the values from the selected checkboxes at the front-side script. Use jQuery map() function with join() method to get values from checked checkbox values separated by comma.

Loading gif on the image slider is very useful to make it user-friendly. If the slider image size is large, the loading image is a must-have element. Loader gif notifies that the image is loading from the server with an animation. If you are using jQuery slick carousel to add slider in HTML, the loading gif image can be a useful feature to make the slider user-friendly. You can add a loader on the slider to display gif images when the slider images are loading from the server.

When a text input field is used to attach a datepicker, the user can clear the selected value in the input field. But, if a non-editable HTML element or read-only input field is used, the selected datepicker value is not possible to clear manually. Use the onClose event of the datepicker() object to add a reset button in jQuery UI datepicker and clear the selected value.

Generally, the HTML form is submitted to the script URL specified in the action attribute of the form tag. You can also handle the form submission process using jQuery. The jQuery submit() method is very useful to handle the form submission process. In this example code snippet, we will show you how to submit an HTML form via Ajax using jQuery.

If you use jQuery click like event in the Ajax loaded content, it will not work in a normal scenario. The jQuery events need to be bind properly in the dynamic content loaded by the Ajax request. Use jQuery delegation to attach an event in the dynamically created content by Ajax.

Bootstrap Modal provides an easy way to display a dialog box on the web page. If you want to perform some functionality when the user closes the modal popup, you need to bind the function to Bootstrap modal close event. Use hide.bs.modal event to attach function to modal close event in Bootstrap using jQuery.

Hide element on click outside, is a must-have functionality for the dropdown menu. You can easily hide div or element when click outside of it using jQuery. Use jQuery mouseup event with target property to detect click event and hide div when clicking outside of the specific element.

Before submitting the selected files to the server-side script, it always a good idea to validate the number of files on the client-side. To implement client-side files number validation, you need to count the number of selected files. You can count selected files using JavaScript and jQuery.