Add javascript to join builder items

Has anyone hacked the form builder to allow javascript to be added to the resulting fields?  For example; say I wanted to add an onClick action to an input field.  It would add greatly to what we now have for building forms.

I am having trouble selecting elements on the join from from javascript added to the join form; anyone worked with this before?

What about this, can anyone tell me the files I need to hack up in order to expand the form builder to allow to add javascript actions to the builder so that I can add such things as onclick?

Why don't you use jquery and embed your jquery code in page. It has nice css like selectors.

Well, that is what I wanted to do.  Looking at the source view of the join form, there is no id added to the fields and we can not use class names; so I attempted to use document.getElementsByName(); looking at a source view I see names as name="widgets[0]" and getElementsByName() returns an array of all the elements on the page with that name.  So far my code test is not working.  I need to do some validation on some fields after the fields lose focus; so as the user enters data in a field, when they move to the next field, I do a check using onblur.  My test code was just trying to see if I could change the value in the field after the user move off the field; I tested the code on a code testing site and it worked there but not when added to the form.  So I am not sure why; the code was javascript and not jquery although I tested jquery using the equivalent form for testing an element by name.

If you look at code, you will see that getting elements by ID is the preferred method; just about all the jquery out there will be testing on the ID.  If we could assign IDs to fields then it would make it a lot easier for doing things with our forms before we submit the form for validation.

It's very complex. I did it for the admin options form in my facebook connect module. You can see screen shots of that form in the market entry for it.

On that form i added onclick events for two of the options so i could call some script to hide sections when a specific item is clicked. I also added little info image buttons that popup a description window when clicked on.

To do that i had to parse the form after it was generated to add unique id's to all of the items of the form. Processing is like this for my settings form.

                // get option's form;
                $sOptions = $oSettings -> getForm();

The form is obtained and ends up in $sOptions above. I do not know what script the join form will be in, but it will also have that getForm() call somewhere, then you need to parse it and add the things you need to the form. Mine looks like this.

                // Add unique ID fields to form.
                $sOptions = str_replace('<tr >','********<tr>',$sOptions);
                $aRows = explode('********', $sOptions);
                $pattern = '/name="(.*?)"/';
                foreach ($aRows as $id => $value) {
                    preg_match($pattern, $value, $matches);
                    $sOnClickInput = '';
                    $sOnClickSelect = '';
                    if(strpos($value, 'dbcs_facebook_connect_use_join_form') !== false) $sOnClickInput = ' onclick = "javascript: join_form_click();"';
                    if(strpos($value, 'dbcs_facebook_connect_use_popup') !== false) $sOnClickInput = ' onclick = "javascript: use_popup_click();"';
                    $value = str_replace('<tr', '<tr id="t_' . $matches[1] . '"', $value);
                    $value = str_replace('<input', '<input id="i_' . $matches[1] . '"' . $sOnClickInput, $value);
                    $value = str_replace('<select', '<select id="s_' . $matches[1] . '"' . $sOnClickSelect, $value);
                    if(strpos($value, 'input_wrapper_submit') === false)
                        $value = $this -> str_lreplace('<div class="clear_both"', '<img style = "padding-left: 10px; padding-top: 2px; cursor: help;" src="' . getTemplateIcon('info.gif') . '" onclick="pophelp(\'' . $matches[1] . '\')" title="Click icon for help with this setting."><div class="clear_both"', $value);
                    $aRows[$id] = $value;
                }
                $sOptions = implode('', $aRows);


It adds unique id's to all <tr>, <input> and <select> tags and adds a image button at the end of each row.

This is not a easy trick to do, and took me nearly a week just to figure it out for my modules option form. Each form will be slightly different.


And yes. The form builder has been a complaint of mine. By default boonex should be adding ID's to all of those areas by default so they can be targeted with javascript. The form builder is just not powerful enough.

But i can also understand it from their perspective as well. It's not easy to make a script that can build a form from a array of values. It can get pretty complex. And from our point of view, using it is already complicated by the fact that there does not seem to be any documentation on the array values that can be passed to the form builder script.

Thanks Deano; much appreciated the insight into what would need to be done.  One of the things I wanted to accomplish was to do some client side manipulations before the form was submitted and values stored in the database; this was a request from someone and I may have to rethink this.

Just got finished looking over the form builder script; yes, rather a lot going on; made me head hurt it did.

And i suspect you would have no hair if they made it even more complicated by adding all the features we want. LOL.

But then again, if it had all the features needed, then there would not be any need to look at the code.