Prototype besides its nices shortcuts provides some function to work with forms elements. So let’s see what prototype can do for us.
Fields
Sometimes it’s important for your application that some fields of your form gain focus programatically or you need to clear some fields when actions appends.
So here are some help from our lovely library :
Clear a field
1
2
3
4
5
6
7
1
2
3
4
5
6
7
|
// Clear field with id="myFieldID"
Field.clear(‘myFieldID’);
Field.clear($(‘myFieldID’));
// Clear fields with id="myFieldID" and id="mySecondFieldID"
Field.clear([‘myFieldID’,‘mySecondFieldID’]);
Field.clear([$(‘myFieldID’),$(‘mySecondFieldID’)]); |
Set focus on a field
1
2
3
1
2
3
|
// Set the focus on a field and select it if the browser support it
Field.activate(‘myFieldId’);
Field.activate($(‘myFieldId’)); |
Check presence of content in Fields
This function retun false if one of the field to check is empty.
1
2
3
4
5
6
7
1
2
3
4
5
6
7
|
// Check if the field contains value
Field.present(‘myFieldId’);
Field.present($(‘myFieldId’));
// Check if multiple fields contains value
Field.present([‘myFieldId’,‘myFieldId2’, ‘myFieldId3’]);
Field.present([$(‘myFieldId’),$(‘myFieldId2’), $(‘myFieldId3’)]); |
Forms
Serialize a form
If you’re doing Ajax things you certainly reach a point when you need to send the values of a form to your server-side processing app. Prototype make it so much painless you’ll never do it manually.
1
2
3
4
1
2
3
4
|
// formSerialized then contains a querystring containing your form values
// ready to be send by ajax (POST or GET)
var formSerialized = Form.serialize(‘myFormId’);
var formSerialized = Form.serialize($(‘myFormId’)); |
Get all form elements
1
2
3
1
2
3
|
// elements then contains an iterable array of all elements composing your form.
var elements = Form.getElements(‘myFormId’);
var elements = Form.getElements($(‘myFormId’)); |
Get inputs by type and/or name
1
2
3
4
5
6
1
2
3
4
5
6
|
// inputs then contains an iterable array of all inputs
var inputs = Form.getInputs(‘myFormId’);
// inputsPassword then contains an iterable array of all inputs of type ‘password’
var inputsPassword = Form.getInputs(‘myFormId’, ‘password’);
// inputsPasswordByName then contains an iterable array of all inputs of type ‘password’ and whose name is ‘clear_password’
var inputsPasswordByName = Form.getInputs(‘myFormId’, ‘password’, ‘clear_password’); |
Disable a form
Each form elements will be disabled.
|
Form.disable(‘myFormId’); |
Enable a form
Counterpart of previous function, this one enable all form elements.
Get the first non-hidden/disabled element of a form
This one will make sense with the next one.
|
Form.findFirstElement(‘myFormId’); |
Focus the first element of a form
|
Form.focusFirstElement(‘myFormId’); |
Reset a form
Not really needed as it does not really shorten your code, but it allows you to interact with form in a consistent manner and when you’ll need to do more than emptying fields on reset, you’ll just need to override the function with your implementation.
I will not cover the Form.Element.Serializers and Form.Element, because theirs goals is essentially to simplify the writing of previous functions.
Easily get a form element value :
1
2
1
2
|
// value then contains the value of ‘myElementId’, this let you fetch value of any form element in a consistent manner
var value = $F(‘myElementId’); |
Observers
Time Observers
Sometimes it can be handy to check the value of a form or only one form element periodically : live preview, live search, …
As you should have understand Prototype provides some handy Object to simplify your life.
An important thing to note : the callback will only be called if the value has change between two value check.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
|
function liveActionCallback( element, value ) {
// do some fancy things here
}
// Check a ‘myElementId’ value all 2 seconds, sending the element and its value to a callback function
new Form.Element.Observer(‘myElementId’, 2, liveActionCallback);
// Same thing but for a complete form, value contains Form.serialize(‘myFormId’)
new Form.Observer(‘myFormId’, 2, liveActionCallback); |
Event Observer
Sometimes continually looking for changes isn’t needed and you only want to be notify when changes occurs.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
|
function handleValueChange( element ) {
// do what you want when a value change
}
// Observe changes of a form element
new Form.Element.EventObserver(‘myElementId’, handleValueChange);
// Observer changes form-wide
new Form.EventObserver(‘myFormId’, handleValueChange); |
Next time i’ll go through Array/Hashes Prototype additions.
You are here: Jonathan.inspect
|
|
|
|
|
|
|
|
|
|
|
|
|
|
And to Observe the focus on all form element ?