Accessing form data in javascript

[tenbob]

Could someone please help with this beginner's problem. I've created a form and put a button on it. Clicking the button should take you to different pages according to the data on the form.

I'm not sure how to code the button's javascript in order to access the form data. I found some advice on the forum, but I can't get it to work. For initial testing I just want to display the value in an alert box before I try anything more complex. I got the internal name element name using copy and paste, so it should be right.

Method 1 comes from a forum post here http://fabrikar.com/forums/index.php?wiki/form-javascript-objects/

var form = Fabrik.blocks.form_2;
var elements = form.formElements;
var myname = elements.get('fab_stsdir___name');
window.alert(myname);

This just displays '[object Object]'



Method 2 comes from a forum post here http://fabrikar.com/forums/index.php?threads/javascript-to-copy-the-values-into-a-form.12396/

var myname = $('fab_stsdir___name').getValue();
window.alert(myname);

This displays 'undefined'

I'm probably doing something stupid. Can anyone point me in the right direction.

 

[Sophist]

Method 1: I can't find this code in the wiki page referenced, however formElements contains references to the elements JS object i.e. if it is a field, then it contains a reference to an instance of field.js. Obviously this object has methods and properties that you can call. So e.g. (if you are on the latest GitHub) window.alert(myname.options.validations) will tell you whether the field has a validation or not.

Method 2: I think that $('fab_stsdir___name') will look for an HTML tag fab_stsdir___name rather than a tag with id 'fab_stsdir___name' - try $('#fab_stsdir___name') - though I may be wrong here.

However to avoid issues with mootools vs. jQuery, you should probably now use document.id('stuff') for mootools or jQuery('stuff') rather than $('stuff'). The $ in the example probably refers to mootools rather than jQuery.

S

 

[tenbob]

Grateful thanks to Sophist whose advice steered me in the right direction. I have now got this snippet working. For the benefit of others, my conclusions are as follows. Please correct me if I have got anything wrong.

(1) Fabrik has two js frameworks loaded simultaneously, jQuery and Mootools. Each of them wants to use the dollar sign ($) as an alias. In JQuery it stands for jQuery. In Mootools it stands for document.id. It's anyone's guess who wins, so it may be safer to write jQuery or document.id explicitly.

(2) You can use either framework to access elements on the page according to their ids. But the syntax is subtly different. In jQuery the argument is a CSS selector, so the id has to have a hash (#) in front of it, whereas in Mootools it doesn't. The methods are different too. In jQuery you use text() and val(). In Mootools you use get('text') and get('value'). See the documentation for each framework.

(3) You need to access the data differently according to whether it is displayed as fixed text (read-only) or an editable field on a form. You access the former through the text property and the latter through the value property.

(4) The function getValue() which I tried to use in Method 2 turns out to be an internal Fabrik function that only works with editable fields.

(5) When you attach your javascript to the button, never try to include a comment explaining what it does. A comment seems to kill the whole thing completely.

(6) It's obvious really, but worth repeating. Your javascript can only access what is actually on the page. I made the mistake of looking for an element that wasn't there.

So here's my working button code to display two fields from the form in an alert box. On my form 'fab_stsdir___name' is a read only element and 'fab_stsdir___cf_from_name' is editable.

Using Mootools

var myname1 = document.id('fab_stsdir___name').get('text'); 
var myname2 = document.id('fab_stsdir___cf_from_name').get('value');
window.alert(myname1+' '+myname2);

Using jQuery

var myname1 = jQuery('#fab_stsdir___name').text(); 
var myname2 = jQuery('#fab_stsdir___cf_from_name').val();
window.alert(myname1+' '+myname2);

Phew! A day and a half to get this little bit working!

 

[Sophist]

On point (5) it is documented in the element wiki entry that you should use /* comment */ and not // as fabrik removes all line endings (no idea why) when it creates the HTML so:

a line of code;
// a comment;
another line of code;

becomes:

a line of code; // a comment; another line of code;

and "another line of code" (in fact anything after the comment) is now part of the comment line.

(I have no idea why we remove line endings - there does not seem to be a syntax need to do so.)

S