Category Archives: javascript

JavaScript

ExtJS JavaScript Framework

Ext JS, the JavaScript framework with Ajax and UI Components

Update – some of the original links have been removed

Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.

I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.

Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

Take a look at the JavaScript generated grid here.

Hopefully this short intro will wet your appetite, more to come soon.

Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!

JavaScript Form Validator number two

JavaScript Form Validator

This is an updated and improved version of AJAX Generic Form Parser

Our updated JavaScript code is smaller, prettier :) and more powerful (just).

That’s nice, but what does it do?
Well it validates your form stupid!! as with most (if not all?) posts on this website, the script is simple, easy to follow and not jam packed with to many features. Basically this script will look for required fields (which you specify in your form.. I’ll come to this later) and if a required field is empty, it will through up a JavaScript alert box telling the user (and prevent the form from being submitted).

Before I present to you the Code Example, I’ll explain a little about how to configure your form and make certain fields required.
For simplicity, I’ve chosen to make use of the fields ‘Title’ tag. This is where you make fields required.

For example: < input type="text" name="FirstName" title=”required” >

Note: The script will support the following form field types:

  • Text
  • Textarea
  • Password
  • Select

Just to recap. To make any of the supported fields required, just add title=”required”!

Triggering the form to call the JavaScript Validation Script:
In order for the form to call the JavaScript and check all the required fields, we need to prevent the form from submitting. In order to achieve this, we will use the onSubmit event on the form tag. Example:

< form name="myForm" method="post" action="process.php" onSubmit=”return myForm.check(this)” >

We must use return before the function call, this tells to form ‘do not submit the form unless the function returns true’.

The JavaScript form Validator Script


As you can see, this is nice and easy to follow. Nothing to fancy, but believe me this wee function can save a lot of time, especially if you build a lot of forms.

Why does it not do more complex validation?
Simple, because I like to keep things nice and easy (and I don’t do complex)…. The last thing I want to do is give you a headache. Like everything on this site, this is just an example. Please feel free to use and enhance it to fit better with your own needs.

Before I go, I’d better mention that the JavaScript function will strip out any leading and trailing whitespace before the validation is done. There is also a little function to strip out HTML tags (it’s not being used in the above example, but you can make use of this on a field basis by using the onFocus event!!), Just a little bonus!!

AJAX generic form parser

AJAX Generic Form Parser – With Validation:

In this tutorial I’ll show you a simple method to pass any HTML form through AJAX without the need to hard code all form fields into the JavaScript or Server Side Script. Using this simple piece of JavaScript you can reuse it as is with any form, saving a lot of time. I’ve even added basic validation to certain form element types (which would be expected).

Okay, straight to the main JS code.

 

The JavaScript code above is split into 4 functions, here is an overview of what each function does.

createXMLHttpRequest() – This is the function which will establish the AJAX connection object, this is called as soon as the JS file is loaded.

sendRequest() – This function is the one which is called when the form is submitted. This function requires (passed in) the ‘Form Object’ and the ‘File Name’ of the script which will receive the form data. When this function has been called, it takes the form object and passes it to the JS function getForm() which in turn parses the whole form extracting all the data. sendRequest() then takes the open AJAX connection and passes all the data to the PHP file form processing. Finally when the request from the PHP server script is returned, it writes out the reply to an element on the screen with the div ID ‘results’.

getForm() – This is the magic, this function reads through the whole form and extracts the field data before returning it back to sendRequest(). It handles radio, text, password, textarea, select and checkbox field types. It even looks for validation requests on text, password and textarea fields (which is enabled by using title=”required” in the form element).

Simple :)

Next is a very simple form with a mixture of field types and validation requests (nothing fancy here). Also included at the bottom is the div which prints out the results to the browser.

 

As you can see the form trigger which calls the AJAX actions is set in the button using the onClick method. Also note I’ve added title=”required” to the ‘textOne’ field – this means the user will not be able to submit the form unless this field contains a value.

Finally here is a very stripped down Server script in PHP which takes the form values and returns them formatted back to the JS (you could do anything with the data at this stage!).

process.php

 

You could easily change the above to generate an email or add the form data to a database, the above example will echo out the results which are passed back to the div tag below the form.

There you have it, short and sweet (I hope) – I’ve intentionally kept the example scripts to a minumum but with still enough to be useful. Please feel free to take this and mess around with it.

Have Fun!!

JavaScript Cookies

JavaScript Cookies

If like me you usually create your cookies using a server scripting language like PHP, you may find that using JavaScript for cookies is simple.

Im going to show you how to create, edit, delete and read cookies using only JavaScript.

Creating JavaScript Cookies:


function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

As you can see the function createCookie requires 3 values:


  • name = the name you want to give the cookie

  • value = the value the cookie will hold

  • days = the number of days you want the cookie to last [can be up to 30 days])

Deleting a JavaScript Cookie:


function eraseCookie(name) {
  createCookie(name, "", -1);
}

The above function eraseCookie requires the name of the cookie you want to delete. It simply marks the expire date as yesterday.

Reading a JavaScript Cookie:


function readCookie(name) {
  var ca = document.cookie.split(';');
  var nameEQ = name + "=";
  for(var i=0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
  return "";
}

readCookie does just that, provide the function with the name of the cookie you want to read and it will return its value.

So lets put all that together now and write the contents of the cookie out to the screen.



 
  JavaScript Cookies

  
   
   
Change value

In the above code we simply create the cookie using body onLoad and calling the makeCookie() function.
When we click the link 'Change Value' we are calling the JavaScript function editCookie() which deletes the current cookie and recreates a new one with the same name but new value.

That's all there is to it, easy peasy!! :-)