Forums

Hello,

I am VERY new to javascript all together, but am trying to do something on my form I have created.

At first I wanted a text box with a button next to it 'add'. When 'add' was clicked, another box would appear beneath it that the user could enter stuff into and they could continue to click 'add' and add as many items as they wanted.

I found something called Textboxlist online (http://devthought.com/projects/mootools/textboxlist/) and thought that might fit the bill quite nicely also. I have the spot in my form for a 'custom element', where I've created a text box. I am putting the javascript in the 'Load JS' event - but I don't know how to link to that library.

Any help with adding a text box (with the add button), or using the Textboxlist would be greatly appreciated!

Hi hannylicious,

Just to confirm, this is CFV4?

I have a Load JS file action on my site that will let you include a javascript file. I'll try to take a look at the code over the weekend.

Bob

Sorry I forgot to include that important bit of information... yes, this is CFV4 (which is AWESOME, by the way).

I'll see if I can find that action - I'm away from the site at the moment, but I didn't see that before, and if I find that I will make sure and let you know!

Hi hannylicious ,

I got this working on CFv4 / Joomla! 1.6. It should also be OK on CFV4 on Joomla! 1.5 but I haven't tested that.

[list=a]

Download the attached file, unzip it and copy the included 'assets' folder into the components/com_chronoforms folder on your site. You should then find you have an assets/textboxlist folder with around 8 files in it. Except for the css file these are all unchanged from the TextBoxList v5 download package.

Drag a Custom Code element into your from OnLoad event and add this code

<?php
JHTML::_('behavior.mootools');
$doc =& JFactory::getDocument();
$uri = JURI::base().'components/com_chronoforms/assets/textboxlist/';
$doc->addScript('/Joomla1.6b/media/system/js/core.js');
$doc->addScript($uri.'TextboxList.js');
$doc->addScript($uri.'GrowingInput.js');
$doc->addStyleSheet($uri.'TextboxList.css');
?>

This loads the TextBoxList files and also the core MooTools file (this was the only way I could find to get Joomla! to load MooTools before the TextBoxList scripts :-(

Drag a Load JS action into the OnLoad event and add this code

window.addEvent('domready', function() {
 new TextboxList('input_text_0');
});

but replace input_text_0 with the id of the input you want to attach the TextBoxList to. Note: you will need to set the id in the Element configuration.

Add more new TextboxList() entries if you want more than one TextBoxList input.

Save and check that the form is working OK. The included CSS file has been tweaked a bit as the Joomla! Beez template over-rides some important rules, you may need to tweks it to suit your template.

When the form is submitted the list will be found as a comma separated list in $form->data['input_text_0'] or the equivalent for the name of your input) e.g. entry 1, entry 2, entry 3.

[/list:o]
Bob

Bob

Thanks Bob!!
A great help!

When using this with the default template it works (although there is no 'x' to delete a tag - a minor fix I'm sure).

My next goal is getting this to work with the Gantry frameworked template I'm using. It seems that's causing a big headache for me. It's loading some .js files that probably don't agree with what's going on here I imagine. I'll have to figure out how to maybe disable those scripts for just this page viewing or something.

As always, I greatly appreciate your assistance on the matter - now I know I've got it setup right and just have to find some tweaks here and there to get things rolling.

Thank you so much!

Maybe it's not javascript related as I originally thought...

When I view it in Beez template it works as intended. When I view it in Milkyway template (another stock template) it doesn't work.

Maybe it's CSS related somewhere?

*EDIT*
Yup, CSS related. I'm playing around with it now and it's working much more as intended. Again, I wouldn't be here without you guys at Chronoengine. Thanks so much!

Hi hannylicious,

The fix for the x button is to edit the beginning of line 15 of the css file to read

#main a.textboxlist-bit-box-deletebutton {. . .

instead of

#main li.textboxlist-bit-box-deletebutton {. . .

For MilkyWay you need to edit the css file and replace all #main with #maincolumn

It needs a better fix for the CSS :-(

Bob