Tag archive for: jQuery

How to use jQuery to intercept form submissions and validate form input

There came a time where I had to create a HTML form to accept inputs from users in order to generate a report. Before submitting the form to the back end server, there are some validations that I can perform on the data at the client side to reduce the number of HTTP responses that my server had to generate for unwanted inputs. The cost savings is especially significant when the form submission contains large file as part of the HTTP request.

I chose to use jQuery for intercepting the form submissions and do some data validation before I allow the browser to create a HTTP request to the server. This post documents a proof of concept, as a stepping stone, to realize my objective.

How to use jQuery to detect mouse clicks

Right after I found out how to get mouse cursor coordinates when mouse moves, I went ahead with exploring how to detect mouse clicks.

This post discuss how I had used jQuery to detect mouse clicks.

How to use jQuery to get mouse cursor coordinates when mouse moves

I was exploring on how to create drag and drop elements on a webpage. The first thing that I have to know is to detect my mouse cursor coordinates when my mouse moves.

This post documents my exploration in using jQuery to detect mouse cursor coordinates when I move my mouse.

How to highlight HTML table rows when mouse cursor hovers over them with jQuery

When I have to look at table of records, I always like to hover my mouse over the row that I am looking at so that I can focus on the details.

In addition, to facilitate my inspection of the data, I will want that row to be highlighted as well.

This post describe my exploration to highlight HTML table rows with jQuery.

How to send message from Java applet to web page via jQuery

In an attempt to save development time on reworking the RIAs from a old system, a business decision was made to reuse the Java applets on a newer system.

The newer system utilizes jQuery at the front end to fulfill modern user interactivity requirements.

This post documents a proof of concept that I did for the powerful Java applets to communicate with the front-end of the newer system.

How to ensure that your Javascript is able to write unicode characters from external Javascript files to your HTML contents

Ever tried injecting Chinese characters into your HTML DOM from an external Javascript file but got something that resembles the following?

Well that was what I got for the Chinese version of my bilingual form initially as a result of validating an input field as the user is filling up my form.

In this post, I will discuss why I got the unwanted characters and what I did to solve the problem.

Handy Javascript code segments

The augmentation of Javascript to CSS and HTML is beautiful. While trying out jQuery to create my own tic tac toe game, I realised that there are Javascript/jQuery code segments that could be helpful to me when building web applications.

In this post, I collate Javascript and jQuery code segments that I had utilized in my web projects for ease of future references.

How to send HTTP post requests and HTTP get requests using jQuery

This was a proof of concept to try out jQuery’s ajax features. Asynchronus Javascript And XML is a way for avoiding unnecessary refresh of the entire web page. When used properly, it can enhance user experience for your website, especially when you have lots of images on your page which does not change often across different pages.

This proof of concept was based on jQuery version 1.7.1.

How to validate input fields as the user is filling up a form with jQuery

In order to get sensible data from users via an online form, we have to validate data that we receive from them . As much as possible, we will want the data validation process to minimize frustration to our users.

We could have perform the data validation on the input fields at the point when the form is submitted. However, a better way will be to perform data validation on the input fields as the user is filling up the form. The validation process can follow such a sequence:

1. User clicks on the input field.
2. User fills up the input field with data.
3. User clicks away from the input field.
4. Data validation occurs on the input field. If there are any errors, display the error message near to the input field. Else everything proceeds as usual.