jQuery extensively simplified web developer’s life and has become a leader in JavaScript available libraries. There are a lot of useful jQuery snippets available, but here in this post, we are going to share 7 basic and widely used code snippets that every front-end web developer must have. Even for those who are new to jQuery can easily understand and get benefit from these routinely used code snippets.
1. jQuery Code – Print Page Option
Providing option to print a page is a common task for web developers. Following is the available code:
|
1 2 3 4 5 6 7 8 9 |
<!– jQuery: Print Page –> $(‘a.printPage’).click(function(){ window.print(); return false; }); <!– HTML: Print Page –> <div> <a class=”printPage” href=”#”>Print</a> </div> |
2. jQuery Code – Select/Deselect All options
Selecting or Deselecting all available checkbox options using a link on HTML page is common task.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!– jQuery: Select/Deselect All –> $(‘.SelectAll’).live(‘click’, function(){ $(this).closest(‘.divAll’).find(‘input[type=checkbox]’).attr(‘checked’, true); return false; }); $(‘.DeselectAll’).live(‘click’, function(){ $(this).closest(‘.divAll’).find(‘input[type=checkbox]’).attr(‘checked’, false); return false; });<!– HTML: Select/Deselect All –> <div class=”divAll”> <a href=”#” class=”SelectAll”>Select All</a> <a href=”#” class=”DeselectAll”>Deselect All</a> <br /> <input type=”checkbox” id=”Lahore” /> <label for=”Lahore”>Lahore</label> <input type=”checkbox” id=”Karachi” /> <label for=”Karachi”>Karachi</label> <input type=”checkbox” id=”Islamabad” /> <label for=”Islamabad”>Islamabad</label> </div> |
3. jQuery Code – Disabling Right Click
For web developers, its common to disable right click on certain pages so following code will do the job:
|
1 2 3 4 |
<!– jQuery: Disabling Right Click –> $(document).bind(“contextmenu”,function(e){ e.preventDefault(); }); |
4. jQuery Code – Helping Input Field/Swap Input Field
In order to make an Input Text field helpful, we normally display some default text inside it (For Example “Company Name”) and when user click on it, text disappears and user can enter the value for it. You can try it yourself by using the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!– jQuery: Helping Input Field –> $(‘input[type=text]’).focus(function(){ var $this = $(this); var title = $this.attr(‘title’); if($this.val() == title) { $this.val(”); } }).blur(function() { var $this = $(this); var title = $this.attr(‘title’); if($this.val() == ”) { $this.val(title); } }); <!– HTML: Swap Input Field –> <div> <input type=”text” name=”searchCompanyName” value=”Company Name” title=”Company Name” /> </div> |
5. jQuery Code – Limiting MaxLength for TextArea
It usual to put a textarea on a form and validate maximum number of characters on it.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!– jQuery: Limiting MaLength for TextArea –> var MaxLength = 500; $(‘#txtDescription’).keypress(function(e) { if ($(this).val().length >= MaxLength) { e.preventDefault();} }); <!– HTML: Limiting MaLength for TextArea–> <asp:TextBox ID=”txtDescription” runat=”server” TextMode=”MultiLine” Columns=”50″ Rows=”5″></asp:TextBox> |
6. jQuery Code – Identify which key is pressed.
Sometimes, we need to validate the input value on a textbox. For example, for “First Name” we might need to avoid numeric values. So, we need to identify which key is pressed and then perform the action accordingly.
|
1 2 3 4 5 6 7 |
<!– jQuery: Which key is Pressed. –> $(‘#txtFirstName’).keypress(function(event){ alert(event.keyCode); }); <!– HTML: Which key is Pressed. –> <asp:TextBox ID=”txtFirstName” runat=”server”></asp:TextBox> |
7. jQuery Code – Validating an email.
Validating an email address is very common task on HTML form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!– jQuery: Validating an email. –> $(‘#txtEmail’).blur(function(e) { var sEmail = $(‘#txtEmail’).val(); if ($.trim(sEmail).length == 0) { alert(‘Please enter valid email address’); e.preventDefault(); } var filter = /^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z] {2,4}|[0-9]{1,3})(]?)$/; if (filter.test(sEmail)) { alert(‘Valid Email’); } else { alert(‘Invalid Email’); e.preventDefault(); } }); <!– HTML: Validating an email–> <asp:TextBox id=”txtEmail” runat=”server” /> |
Looking for ASP.NET Hosting on European Server? We can help you a lot!
hostforlifeasp.net is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
hostforlifeasp.net is awarded Top No#1 SPOTLIGHT Recommended Hosting Partner by Microsoft. Our service is ranked the highest top spot in several European countries, such as: Germany, Italy, Netherlands, France, Belgium, United Kingdom, Sweden, Finland, Switzerland and other European countries. Besides this award, we have also won several awards from reputable organizations in the hosting industry and the detail can be found on our official website.
