Task 10 - Form Manipulation and Event Handling using JavaScript - Practice Task

With reference to last two lectures on JavaScript, we discussed how to handle events in web application, how to read and update HTML elements, their properties and CSS styles of a webpage dynamically. We also discussed how to manipulate HTML forms. This practice task, ask you to perform some operations using the concepts we discussed. Definitely, you may have to Google the stuff that is related but not exactly same what we did in class.

Before doing this task, I strongly recommend you to first run and understand the code samples we discussed in class that I have shared with you via Dropbox. It would help you to understand the basics and then you can build on those concepts to complete below given work.

To better focus on different parts of the task, I have divided it in 4 sub-tasks, each sub-task UI is given in below mockup.

Create an option list with "multiple" property enabled, that means, user shall be able to select multiple options by holding the CTRL key. Add a list of cousines in option list where value shall be numeric and text shall be cousine name. After selecting the multiple options when user click on "Fill Below Text Area" button, you shall handle the click event and fill the below given textarea with the text of selected cousines, each cousine name shall be separted by comma.

When user enters CNIC number and move to next field, "onblur" event is fired on the field that we leave. Handle the "onblur" event and perform the operation as listed in description oval in figure.

Users may make typo mistake when choose a new password while filling a registration form, for this reason, many sites require user to enter the password twice. You shall, define a handler to handle the "onchange" event. Bind the same handler with both password fields, when user type in the password or retype password fields, the handler shall display "Matched" or "Do Not Match" message at bottom of ReType Password field, as as show in above figure.

In classical web applications, JavaScript runs in browser, but sometime we may need to initialize the JavaScript variables/arrays etc. with the data that resides in the database. In this sub-task you shall intialize an array fetching data from database and use that area to check availability of the username that user enters in the form. In real apps, we check availability of such information by interacting with the web server using AJAX (without refreshing the web page) but as we have not done AJAX yet, so you shall do it without using AJAX. Must update this task with AJAX approach, as we cover the AJAX topic in this week.