Hi all,

I have a <cms:form> with a default set of fields.
The form has a button enabling the submitter to add addtional fields (basically it adds a set of definid fields everytime the user hits the button). This is done by using Javascript and appending the fields within the form.
All fields are correctly submitted when I read the $POST variable from PHP directly.

However, when displaying error fields the newly added fields are not shown (probably because at the time the page loads the fields do not yet exist).
What i have done so far is to have a hidden field showing how many imes the button was pressed and then calling the Javascript-addFields functions so many times to get the fields back.
Now I'm missing the part how to get correct error messages (all fields have unique IDs and names) and prefill the values.

Any ideas?

Thanks!!
Patrick

[KK]

Hi Patrick,

When the form is submitted, Couch on server-side will recognize only the <cms:input> tags found in the template. Those that you added through JS won't exist on the server-side and hence the problem.

That said, can you please let us know in detail your use-case that requires adding fields dynamically?

Thanks.

Hi KK,

now that was quick !! Thanks for that already

My Use case is a travel booking site: I have the details of the first person.
Then the person should be able to say "add another person to booking" and then have to enter the new persons' details as well.

Cheers

[KK]

Perhaps we can do that by previously defining the other fields too but keeping them hidden to begin with? Then as the visitor 'adds' the fields, we can show them through JS. I suppose there would be some practical limit to how many other persons could be added?

Hi KK,

yes - that seems like a feasible way of doing it. So you mean:
- add all fields for number of customers using standard couch tags
- hide those fields using class attrib and CSS
- re-show all necessary fields
- and from then on practically everything should start working
?

I'll give that a try....

Hi KK,

basically that would do IF I wouldn't have any validation on those hidden fields..
Now of course the required fields are not filled when not shown .. duh

I know this is not CouchCMS specific but maybe any ideas on how to get that working?

Thanks alot!

This is just a random, untested idea, but maybe you can make it work. What if you had the form itself in its own template. The page has the form included on it. Clicking the button would add a new instance of the same form through ajax. A global variable could keep track of the count and be used to give each new instance unique form and field names.

I know there are additional details to work out, but this strategy may help you to accomplish your goals.

Another idea is simply to perform JavaScript validation on the fields added by JavaScript.

Hi,

good idea - I''ll just follow you're first idea hiding / showing the input fields with standard couch tags and JS, removing couch validation and then validate using JS...

Thanks for your support!
Patrick

[KK]

Hey Patrick,

I think there has to be a more elegant solution evading us somehow.

Can you please post here (zipped) the working HTML/CSS/JS form where one can add the fields dynamically? Please post the exact design you'd want to Couchify.

Leave out any Couch code for now. Let me see if we can add Couch to it and retain the dynamism of front-end JS.

Thanks.

Hello patrick1975,
let me provide my thoughts about your case.
We use server-side Couch form validation to make no-JS version of form that can be validated when the user has disabled JS in his browser. Then, if we worry about UX we duplicate server-site validation with client-side validation (the best method of doing this is frontend JS, and not so perfect is AJAX).

Your site is based on JS functionality - we can't duplicate 'add input' functionality without JS (mainly because <cms:input> tags are parsed before Success event) and make it work with Couch validation.

So the best decision is not to make this no-JS version but make a fully client-based validation and submitting. Also I suggest you to use this approach:

Code: Select all

<style>
.invisible {display:none}
.visible {display:block}
</style>

<form id="myForm" class="invisible"> ... </form>
<div id="myFormNoJS">Please enable JS to make things working</div>

<script>
document.getElementById('myForm').className = "visible";
document.getElementById('myFormNoJS').className = "invisible";
</script>

So if a client has JS disabled he will see a warning. It's better than giving him a not-working form.