HomeThe Repeat Behavior Explained
Updated documentation: Server-side handling of the Repeat Behavior part 1 and part 2
This post is part of the wForms Documentation. wForms is an open-source javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.
For additional help, visit the wForms forum.
The Repeat Behavior is a functionality offered by the wForms extension. It allows you to define a section of a form that the visitor can duplicate as many times as he wants.
It is particularly suited for situation when you don’t want to limit the number of possible answers to a question. For example, the professional experience section of a employment form :
As with all wForms behaviors, you don’t need to write a single line of code. Add the class “repeat” to the desired tag and everything inside that element will be duplicable. The wForms extension will even take care of adding the ‘repeat’ link.
In this example, the class was added to the TR tag. Other valid candidates for the repeat class are:
DIV, FIELDSET, SPAN, LI, P (*).
The repeat behavior will not work if set on the following tags: TABLE, UL, OL, INPUT, TEXTAREA, SELECT.
Let’s review how to enable the Repeat behavior in your form:
- Enable the wForms extension by adding the following code to the <head> element of your page:
<script type="text/javascript" src="wforms.js" ></script> - Add the ’Repeat’ class to the element to be duplicated.
<div ... class="repeat"> ... </div> - The wForms extension generates the ‘repeat’ and ‘remove’ links. You can style them with the following CSS rules:
.duplicateLink { ... css properties ... }
.removeLink { ... css properties ... }
That’s all folks. For information regarding server-side code, see Server-side handling of the Repeat Behavior part 1 and part 2.
Notes:
(*) and any other tag that can accept a link as a child element.
Update: Comments are now closed for this post, but you can go to the wForms forum if you have any question or comment. Thanks !
April 4th, 2005 at 12:07 pm
You did not say that to get this script work, all forms that are to get their beaviours attached must have an id set.
But nevertheless it’s a great piece of code.
pi
April 4th, 2005 at 7:27 pm
pi: You are right. In the current version, the form id must be set.
But there’s no real reason for it to be that way. I’ll remove that requirement in the next update (probably today or tomorrow).
April 6th, 2005 at 1:39 pm
In the Camino nightly of 2005-04-06, tabbing between form elements doesn’t work properly.
I would like if the row got added onblur of the last cell of the last row.
Thanks for your great work; I have learned a lot since I found it. I think you should have a tip jar.
April 19th, 2005 at 1:23 pm
Great piece of code!!!
Could it be modified so the Repeat link is allways on the last line? I also would rename it “add row” or something configurable.
:-) stw
April 20th, 2005 at 5:44 am
Vdm & Stephan, thanks for your comment.
Changing the position where the link is generated and using the onblur event is a bit too complicated to be implemented in wForms v1.0… but they are both good ideas an I’ll keep them in mind.
As for renaming the ‘repeat’ link, I’ll make it possible in the next update, probably toward the end of the week.
April 20th, 2005 at 7:00 am
Any chance that the Repeat function could be seperated out from the whole wforms routine? I’d love to use this, but 34K of script is a lot to swallow. Awesome site, btw. Already have it in mind to create forms for two different clients. You rock.
April 20th, 2005 at 8:10 am
Thanks Chris.
The script still contains comments, spaces, etc… When wForms v1.0 will be ready, it will probably be optimized for size.
Also, wForms is open-source, so feel free to take out unneeded behaviors if you need a light version.
April 20th, 2005 at 7:11 pm
Great site - I have created a number of with the form builder and it works a treat. A question relating to the repeat behavior - what is a good, neat way of collecting the separate parts of the collected form data? i.e. if you wanted to collect the three given names and family names as separate entities (see post data below)
wf_GivenName=Neil
wf_FamilyName=Young
-2=Tom
-2=Waits
-3=Some
-3=Guy
would like output like:
(”Neil Young”, “Tom Waits”, “Some Guy”)
or
Neil Young, Tom Waits, Some Guy
instead of:
Neil Young, Tom, Waits, Some, Guy,
Once again - great site
April 20th, 2005 at 8:03 pm
Rob, it looks like there’s a bug in the Repeat behavior in wForms. The name/value pairs should be
wf_GivenName=Neil
wf_FamilyName=Young
wf_GivenName-2=Tom
wf_FamilyName-2=Waits
wf_GivenName-3=Some
wf_FamilyName-3=Guy
I’ll check that out. .
April 22nd, 2005 at 12:59 am
Rob, the problem with the repeat is fixed. You’ll need to download the update to wForms.js (http://www.formassembly.com/blog/?page_id=12)
I’m not sure, but I hope it answers your question regarding the output.
April 28th, 2005 at 6:17 pm
Is there currently any way for the server side form processor script to know the number of repeat’s easily? If not, I propose that you add and update a hidden input which holds a count with a useful id such as repeatid.”-repeat-count”.
April 28th, 2005 at 6:19 pm
Oops, it seems this is also done with a field called repeatid.”-RC”. Oh well!
April 28th, 2005 at 8:29 pm
Using v 0.9.4, it works fine client side, but on submittal, I only seem to get the first two rows (the original + 1 repeat) printed and -RC is 1. This is despite my filling out all fields.
My form is as follows:
amount (textbox), per (select box), taxyear (select box)
My HTML is this:
GBP £
per annum
per month
per week
2005/06
2004/05
2003/04
2002/03
2001/02
2000/01
My output is as follows [a simple PHP call to print_r($_POST)]:
Array
(
[amount] => 25000
[per] => annum
[taxyear] => 05/06
[submit] => Convert!
[-RC] => 1
[amount-2] => 122
[per-2] => week
[taxyear-2] => 00/01
)
April 28th, 2005 at 8:31 pm
Grrr! Damn HTML! It’s live at http://skinme.net/scripts/gross2net/test.htm
April 28th, 2005 at 8:45 pm
Bruce, … yep, looks like a bug in wForms. I’ll fix that asap and get back to you.
April 28th, 2005 at 9:15 pm
Bruce… I’ll add the fix in wForms v0.95 soon, but in the meantime you can patch your wForms.js by moving the lines 248 and 249 to line 242. It should look like this:
// Save new row count
document.getElementById(sourceNode.id + self.idSuffix_repeatCounter).value = rowCount;
// re-add behaviors
if(!dupTree.id) dupTree.id = wu.randomId() + suffix; // createAttribute()
self.addBehaviors(dupTree.id);
…
April 28th, 2005 at 9:50 pm
Yup, that’s fixed it. Thanks. Two mini requests so feel free to ignore them:
1. What happens if you have multiple areas with repeats? You should allow the tagging of the -RC count to a hidden input so that you don’t have two -RC’s stepping on each other.
2. Is there a way to force focus of the first form element of the new row when adding a row?
Thanks for this great library. I’ve got you RSS-ed, so I’m watching how it develops.
May 14th, 2005 at 2:07 am
I added this enhancement to my version of wForms.js. I think this should be considered for implementation into the default install (as well as a paired implementation for the remove button….I just had difficulty in implementing the remove button).
What this does is allow you to add a custom add button (or link or image or whatever), with your own text on it.
*********CODE - wForms.js, starting with line #793 (v.98) ***********
if (x[i].className && (’ ‘+x[i].className+’ ‘).indexOf(’ ‘+this.className_repeat+’ ‘) != -1) {
if(document.getElementById(x[i].id + ‘-addButton’)){
var actionNode = document.getElementById(x[i].id + ‘-addButton’);
actionNode.className = this.className_duplicateLink;
x[i].appendChild(actionNode);
} else {
// this element to be duplicated.
// add duplicate action
var actionNode = document.createElement(”a”);
var textNode = document.createTextNode(this.arrMsg[0]);
actionNode.setAttribute(’href’,”#”);
actionNode.className = this.className_duplicateLink;
actionNode.setAttribute(’title’, this.arrMsg[1]);
if(x[i].tagName.toUpperCase()==”TR”) {
// find the last TD
var n = x[i].lastChild;
while(n && n.nodeType != 1)
n = n.previousSibling;
if(n && n.nodeType == 1)
n.appendChild(actionNode);
// Else Couldn’t find the TD. Table row malformed ?
} else
x[i].appendChild(actionNode);
actionNode.appendChild(textNode);
}
*****************************************************
Pair that with the added html element:
May 17th, 2005 at 2:32 am
Scott, I had something similar in the work.. In short, wForms will not try to create the text link if it finds an element (link, button, whatever) with an id of type ‘repeated-element-id’+'-addButton’ suffix.
The only problem I need to address before I can release the update is how to carry this custom-button in nested repeat group..
Bruce, multiple repeat groups are not a problem, unless they are nested. The next update (v0.99) will fix some major bugs with nested repeat group.
May 31st, 2005 at 1:25 am
I’m trying to implement the code and as for now it is working quite fine. I do have two questions however.
When using the repeat function I would like to show in the legend field after the fieldset the number of levels
I have repeated. In the code I could find the Counterfield, but I’m not sure how to extract this since I am not
very good with Javascript.
example:
1st floor
The 1 in 1st should be the counterfield
The second question is where do I change the CSS if I want to change the appearance of the arrMsg field?
thanx in advance
May 31st, 2005 at 3:02 am
I cannot get “-RC” value from by using request.getParameter(”-RC”). It always returns null. Any help will
be greated appreciated. It is a very good work.
Thanks,
May 31st, 2005 at 3:14 am
Dries,
The arrMsg array in wForms.js contains different types of texts. I assume you are refering to the one for the add/remove row links, for which the corresponding css classes are ‘duplicateLink’ and ‘removeLink’.
As for displaying the counter field value, I should first mention than the actual value of the counter does not necessarily reflect the number of rows displayed. I’ll try to post more information about the counter and server-side handling of the repeat behavior, but in short, the counter is incremented for each addition, but doesn’t change when you delete a row (it stores the highest index used).
I’ll think about a way to display the appropriate row number, and I’ll get back to you.
May 31st, 2005 at 3:17 am
Eric,
First, you should set an id to the element with the repeat class (div id=”something”). This way, the counter will be named something-RC. This avoids collisions if you have more that one repeat group, and also I don’t think that the ‘-’ is a legal starting character for a field name.
Anyway, If that doesn’t solve your problem, please send me a link to your form, so I can investigate.
Thanks
May 31st, 2005 at 9:12 pm
Will Form builder support the abillity to create elements on the same row? I notice that i can add a field and move its position up and down, however it would be great to have the ability to have more than one field per row (just like in your example above). Your thoughts?
May 31st, 2005 at 10:42 pm
Abraham, thanks for your suggestion. The form builder uses pure css layout, which happen to be really inpracticable if you need several fields on the same ‘row’.
Adding table-based layout functionnality in the builder is not trivial, so I’ll keep this suggestion for a version 2.
On the other hand, you can always modify your markup once you have retrieved the form to fit your needs.
June 1st, 2005 at 12:54 am
Hi cedsav,
Thanks for your quick response. It is working fine for me now. You have very flexible and good generic implementation.
It is very easy to use. Now I am running into that the “-CR” count doesn’t get decreased after remove a few rows. I will
need such count number to know how many rows are in the first page. Would you please tell me how to make my own
count if you are too busy to get such feature in.
Thank you very much!!
June 1st, 2005 at 3:27 am
Eric, decreasing the counter would require also to renumber the repeated fields..
For instance, if you have fieldname, fieldname-2 and fieldname-3 (for row 1, 2 and 3 respectively) and you delete the row #2. You now have fieldname and fieldname-3 (fieldname-2 deleted). Decreasing the counter to 2 would not be very helpful, unless you fix the gap in the fieldname sequence, and that’s not trivial.
That’s the reason why I decided to keep the counter as is. If your concern is the server-side code, it shouldn’t be that complicated to deal with gaps in the sequence and a counter that indicates the highest possible index (rather than the actual row count).
Now, if you need a real row count for another reason, it’s possible to generate a different hidden field, or to count siblings of the repeated element in the DOM document tree. Let me know, I’ll find a solution.
June 1st, 2005 at 7:50 am
Hi Cedsav,
Thanks for your quick response. I want to get the inputbox/textarea content after a form submission.
I was using the “-RC” count to iterate through them. I guess you had a good point at that I should be able
to handle it if I know the highest possible count. I will try that and let you know how it goes. Thank you
very much for your help!!
June 4th, 2005 at 1:16 am
This may be a dumb suggestion, but rather than using the {fieldname}-{suffix} format, is there anyway to just have it use the {fieldname}?
The reason being is that I’m wanting to use this in a PHP app which, if I pass in a form field named {fieldname}[] (i.e., GivenName[]), PHP will automatically make into an array of all values.
I’d see this best implemented as a switch– use the suffix format or leave alone.
Anyone else have any thoughts on this?
June 4th, 2005 at 2:58 am
Travis, that’s an interesting characteristic of PHP, and it would certainly simplify both client and server side implementations of the Repeat behavior. But I see two problems: that wouldn’t work with nested repeat groups, and the ‘[]’ characters are actually illegal in a id or name attribute (see HTML4.0 Specs).
Anyway, I guess it wouldn’t be too hard to modify wForms so that it forgo the suffix if it detects the ‘[]’ in the fieldname. Then it’s up to the developer to decide if he cares about ’standard compliance’ and if he needs nested repeats or not.
June 11th, 2005 at 12:01 am
Cedsav,
Your explanation on server side processing looks good and, coupled with your comments on standard compliance, somewhat negates my request.
I’m still kicking the idea around in my head to see about extending it to support the [] behaviour, anyway, just for sake of convenience, but I was wondering about one of your comments: nested repeat groups.
Is there an example someplace that demonstrates this ability? Want to make sure I fully understand it before I start breaking things.
Thanks!
June 11th, 2005 at 12:31 am
Travis, here’s an example of nested repeat groups:
http://www.formassembly.com/form-view.php?formID=2164
The row index appended to fieldnames look like this : __x-x (where x is a number, starting at 2).
__x represents the index in the parent repeat group, -x is the index in the nested repeat group.
I’m not sure how that would work with fieldnames using the [] php syntax, but if you can build it, let me know.
June 23rd, 2005 at 11:05 am
In CMS sites the user generally has the option to “edit” existing content. How should we pre-populate repeat fields and have wForms.js know the the record count is greater than 0?
June 23rd, 2005 at 9:21 pm
Eddie, I will try to post more information about this this week, but in short, you need to (using server-side code):
1. Create the counter (hidden) field. Name it according to the wForms convention (repeated_element_id + ‘-RC’).
2. Set the value of the counter to the appropriate number. wForms will use this counter instead of trying to create a new one.
3. Duplicate the repeated element as many time as necessary. Replace in each repeated element the class ‘repeat’ by ‘removeable’.
4. Append the row index to every id, name and for attribute in the repeted elements (field_id+ ‘-’ + rowIndex). Except for the first row.
You may find the information here useful: server side handling of the repeat behavior
Check back soon for a code sample.
June 23rd, 2005 at 9:43 pm
Thanks for looking into this! I poked through the code and tried almost exactly what you described with the exception of (2). How do I set the value of the counter? It is a javascript variable called “rowCount”, correct?
June 23rd, 2005 at 11:59 pm
Eddie, the counter field is posted with the form, so assuming you want to populate the form with previously saved values, you should have saved the counter field value as well (or you could deduce the value based on the field name suffixes).
That value is also the upper bound of your loop. It goes something like this (in PHP):
Note: Edited to fix a couple errors (see comments below)..
<?php
for ($i=1; $i < rowCount; $i++) {
if($i==1) {
$rowsuffix="";
$class="repeat";
} else {
$rowsuffix="-".$i;
$class= "removeable";
} ?>
<div id="someId<?php echo $rowsuffix ?>" class="<?php echo $class ?>">
<input type="text" name="somefieldid<?php echo $rowsuffix ?>" id="somefieldid<?php echo $rowsuffix ?>" ... >
.. etc ...
</div>
<?php
} // end of loop
// counter field
<input type="hidden" name="someId-RC" id="someId-RC" value="<?php echo $i ?>" >
?>
June 24th, 2005 at 10:19 pm
cedsav, the code works great! … exept it doesn’t work on Firefox/Win? If I run the app under IE6 everything works fine. However, when I populate the repeat fields under Firefox/Win it resets the repeat counter to “1″. Any ideas?
June 24th, 2005 at 11:29 pm
Eddie, can you send me a url to your form (cedric at formassembly.com) ? I’ll check it out.
Thanks
June 25th, 2005 at 4:07 am
To follow up on Eddie last comment, my code sample above actually had a few errors.
1. The counter field must be generated with an id attribute:
<input type=”hidden” id=”someId-RC” name=”someId-RC” value=”<?php echo $i ?>” >
2. All ids must have the rowsuffix”
<div id=”someId<?php echo $rowsuffix ?>” class=”<?php echo $class ?>”>
July 10th, 2005 at 8:45 pm
This repeater script is just what i was looking for. Great tool!
However there’s a problem with radio groups in a repeated fieldset. The repeated names aren’t unique whereby the radio boxes affect each other.
July 10th, 2005 at 9:21 pm
Corné,
This is by design. If you want the repeated radio element to be independant, set
wf.preserveRadioName to false (see wForms Customization.
July 10th, 2005 at 9:34 pm
Ah, great.
Thanks for the fast reply.
July 18th, 2005 at 1:13 pm
Hey!
Great code!
Just one question: why doesn’t it duplicate/repeat onClick’s?
Thx
July 18th, 2005 at 9:02 pm
Maestro.. it *should* duplicate inline event handlers ( <input … onclick = ‘… ‘ /> ). If you find this not to be the case, please send me the url to your form so I can investigate (along w/ the version of browser you’re using).
On the other hand, events attached via javascript to an element are not (and cannot be) duplicated. You’ll need to attach the event again to the newly created fields/elements.
July 20th, 2005 at 11:02 am
Here’s my code:
Host(s):
I really don’t get what’s wrong …
I’m using IE 6.0 on Win2k.
Can you see what I’m doing wrong?
July 20th, 2005 at 11:05 am
Something went wrong I guess, let’s try that again:
[CODE]
[/CODE]
July 25th, 2005 at 9:15 am
Me again,
http://www.themaninblue.com/experiment/InForm/horizontal.htm
Came across this site. Seems like they’ve managed to play around with some css designs. Again I’m interested in your feedback. Site is gaining popularity, nice job on the time app as well.
~A
July 26th, 2005 at 11:51 am
Hi,
I have the same problem with the onClick-event.
I just add a plain onClick=”alert(’test’)” to a simple input element, type ‘button’. I duplicate the row ( ) it’s on, but the onClick-event doesn’t get repeated.
I would really like to use this wonderful piece of code, so I hope someone can help me out.
July 26th, 2005 at 10:27 pm
Maestro and Jeff. The problem with inline event handler in IE will be fixed in the next update (sometimes this week). Thanks for your feedback.
July 28th, 2005 at 3:12 pm
Cedric,
Thank you very much for your fast response!
I really appreciate your mail too!
August 4th, 2005 at 6:11 pm
hi, i has populate the form , but in firework lost orde, please check this example
http://www.e-mercury.net/ejemplo.gif
Thank you very much
August 5th, 2005 at 4:12 am
Fabricio. Your second example looks like the right one (no suffix on the first row).
It would be easier if you could send me a link to the live form, but my guess is that you need to:
1) Add the hidden field with the row count:
< input type=”hidden” id=”someid-RC” name=”someid-RC” value=”” />
(see also: server-side handling of the repeat behavior )
2) Make sure you use the latest version of wForms (v.099.2).
August 25th, 2005 at 11:46 pm
You’re duplicating the PSPSESSIONID hidden variable when adding a row.
August 26th, 2005 at 12:58 am
Mark,
AFAIK, the PHPSESSIONID hidden field is generated by PHP when a cookie is not available to store the Session id. If PHP happens to insert it inside a repeat group then it would be indeed repeated, but with no consequence I think.
Do you have an example with this problem ?
September 6th, 2005 at 8:51 am
Fantastic job with this script… think its sensational. Just one query. Is there any way to provide multiple “Add Row” links? I have quite a large form, and would love to be able to show the “Add Row” link directly beneath each “Remove” link for subsequent repeated sections. This would save the user from having to scroll back to the top of the page to add a new record, then scrolling back down to where the new record has been inserted.
September 7th, 2005 at 9:13 am
Mike, you can currently have only one ‘add’ link for a repeated element, but if you have some javascript skills, it shouldn’t be too hard to customize wForms.js
Around line 242 in wForm.js you’ll find the function “this.duplicateFieldGroup”. This function determines which element to ‘repeat’ by retrieving the source of the ‘click’ event (the ’sourceNode’). You could modifiy the function to accept as an optional parameter the id of the element to be repeated. For instance :
if (arguments.length>1)
sourceNode = document.getElementById(arguments[1]);
else
// .. see current code
Then you can simply add you own ‘add row link’:
add row
I don’t have much time to implement and test it myself, but if you need more help let me know.
September 11th, 2005 at 12:29 am
wonderful script! is there any way to have ‘Move Up’ and ‘Move Down’ link that would change the ordering of the content users enter?
September 12th, 2005 at 7:52 pm
Rahul.. no this feature is not supported by wForms. You could try a third-party library like scriptaculous.
September 15th, 2005 at 1:53 pm
cedsav, thanks for the link to scriptaculous… it does some great stuff, but doesnt have anything similar to your ‘repeat’ region with ‘Move Up’ and ‘Move Down’ links…
I will try to write soem code that can be hooked to yours to allow this functionality, and will post it here if i manage to do it…
September 17th, 2005 at 9:54 am
cedsav,
I can’t figure out how to add my own “Add a Row” link. I was able to prevent the dynamic one from displaying but I don’t know how to call the repeat function. Can you assist me?
Thanks, I love the script!
September 18th, 2005 at 1:59 pm
Jason, you can change the text of the link in wForms.js (see http://formassembly.com/blog/wforms-customization/ ). I’ll be away for about 10 days. I’ll try to give a better answer when I get back.
September 19th, 2005 at 10:28 pm
Thanks cedsav. I took a look at that link but did not see what I was looking for.
I check back for your post when you return. Thanks again.
September 26th, 2005 at 3:35 pm
Hi, Fantastic script!
I was wondering if it was possible to duplicate the values of the field when they are repeated.
I can see how normally this would not be an issue, however i’m building a wine cellar website and at times you need to add a bottle of wine that has several of the same attibutes like”winery, wine_name, variety” but the year may change.
So I’m looking for something that will enable the site user to duplicate their input fields as well as some/all of the values in the fields that are being duplicated.
I had a look at your script and found areas that were commented as (do not copy the values of text areas) but wasnt sure how to change them.
A gentle shove in the right direction would be fantastic. Thanks.
September 30th, 2005 at 1:26 am
Aaron, around line 375 in wforms.js, you can remove the ‘if’ condition, or simply replace the line
var value = ‘’;
by
var value = srcNode.attributes[i].nodeValue;
(same as line 377).
This will preserve field value for text, password and hidden inputs.
To preserve textarea values, you can comment out the line 430, like this:
// if(srcNode.parentNode.tagName.toUpperCase() != ‘TEXTAREA’)
September 30th, 2005 at 1:39 am
Jason, try calling the ‘wf.duplicateFieldGroup()’ function on the onclick event ( <a href='’ onclick=’wf.duplicateFieldGroup()’ >).
Alternatively, you can name your link with the following convention: id of the element being repeated, plus the -wfDL suffix.
Example:
<a href='’ id=’repeatedelementid-wfDL’ >
wForms will use that link (and add the onclick event handler) instead of creating the default one.
October 1st, 2005 at 5:06 am
Thanks Cedsav,
I got it working with your help above plus a little js tweaking. I should have mentioned that my custom “Add more” link was placed outside of the repeat sourceNode. So I passed the id in the onclick as you mentioned from you post on Sept 7, 2005. I did some js changes to accomodate. Although I got it working I know it needs work. My js skills are very limited.
October 7th, 2005 at 10:28 pm
Very nice script. I would recommend carrying the “Add a Row’ link to the newly created row.
October 27th, 2005 at 4:35 am
How does one capture the form information in a repeat region via ASP / VBscript?
October 28th, 2005 at 7:57 pm
We’re using this technique on our Users Conference Registration page and it seems to work well with one exception… Tabindex. If I leave the tabindex off of the repeated section, hitting tab jumps to the top of the page navigation. If I leave it _in_ subsequent tabbing will go back and forth between each named field in all repeated sections.
Ideas?
November 3rd, 2005 at 9:17 am
Ian, tabindex is not handled properly by the repeat behavior.. Thanks for bringing that up, I’ll add it to the to-do list.
November 3rd, 2005 at 9:33 am
Arash.. there’s more information over here: http://formassembly.com/wForms (see server-side handling of the repeat behavior). There’s nothing specific to ASP yet, but if you have a code sample to share, you’re welcome..
December 3rd, 2005 at 5:50 am
Is there a way to limit the repeat behavior to only 5?
December 6th, 2005 at 10:14 am
Tuck, not at this point, but that’s a good suggestion (one more item in the to-do list…)
December 7th, 2005 at 10:18 pm
First off let me praise you for your efforts…What a great product.
I have a situation that I am not sure how to handle with wforms. If you have a select field in your form that has to be dynamic, i.e. you need to add options via javascript, and this select field is in the repeat behavior how can you address the add options in one of the repeated elements. Right now it adds the option to the first instance as expected.
Example:
http://nsa.met.psu.edu/bahrmann/newer_project/example.html
December 8th, 2005 at 4:09 am
Hi Chad, once repeated, the select fields are independant. A change to one won’t propagate to the other(s).
If you want your ‘contact type’ link to target the corresponding select field you ‘ll need to pass the correct field id to your function.
‘wf_ContactType’ is the orginal id,
‘wf_ContactType_2′, is the id for the second field
‘wf_ContactType_3′, etc..
If you give your link an id also, it will follow the same pattern. You can then parse it in your onclick call (using this.id) to figure out what select you need to target.
December 12th, 2005 at 8:02 pm
Thanks…Got it to work.
January 9th, 2006 at 9:31 am
Clever and useful code, and easy to implement to boot, thank you very much for this
January 28th, 2006 at 6:40 am
The repeat behaviour fails to show if you have an input tag with type=’hidden’ and name=’id’. Once I gave the tag a different name, it worked fine. Any reason why it chokes on an input tag named ‘id’?
February 1st, 2006 at 4:04 am
Shaun, thanks for pointing that out..
I can see why it wouldn’t work when using a radio group, because I use a construction like ‘ form[field.name] ‘ to go through each field of the group. If field.name is equal to javascript reserved attribute (here ‘id’), the construction returns the attribute value instead of the field, throwing the loop off.
Now, i’m not quite sure why it also breaks with just a text input.. but in any case, it’s safer to avoid this type of names.
February 5th, 2006 at 6:09 am
Is there a way to designate where the “Add A Row” text is created, to allow for finer control over the layout — kind of like creating a placeholder for it?
February 5th, 2006 at 6:27 am
I re-read the previous comments and got the answer: I created an tag with the same id property value as the one you’re repeating (i.e. class=”repeat”), and then added “-wfDL” to the end of it:
Add Another Name
Is there also a way to do the same thing for the “Remove” options that is added to each repeated row?
February 5th, 2006 at 6:30 am
I re-read the previous comments and got the answer: I created an tag with the same id property value as the one you’re repeating (i.e. class="repeat"), and then added "-wfDL" to the end of it:
<a href="#" id="WeblinkRepeater-wfDL" onclick="wf.duplicateFieldGroup()">Add Another Name</a>
Is there also a way to do the same thing for the "Remove" options that is added to each repeated row?
February 8th, 2006 at 9:39 pm
TekBoy. It’s not possible at this point to customize the ‘remove’ link, but I’m working on the next version of wForms, and I’ll try to include this option.