Problems, need help? Have a tip or advice? Post it here.
7 posts Page 1 of 1
Hi,

I have a bit of a weird webform on my page. I've made the form for clients so they can submit changes to videos that I create. The idea is that the client can input a timecode in the video, add a change to that specific time in the video, then add another row of input fields with timecode and change. The form itself is working perfectly, but after building it into couch I get a few problems.

Have a look at the form here:
http://agoberg.tv/ridefreeclient.php

See the "Add one" and "Remove one" buttons.

The code behind this is as follows:
html:
Code: Select all
    <div id="input1" class="clonedInput">
        <input type="text" name="timecode[]" id="timecode"  value="" /> 
        <input type="text" name="change[]" id="change" value="" />
    </div>

    <div>
        <input type="button" id="btnAdd" value="Add one" style="width:20%" />
        <input type="button" id="btnDel" value="Remove one" style="width:20%" />
    </div>


JS:
Code: Select all
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                // manipulate the name/id values of the input inside the new element
            
            newElem.children(':eq(0)').attr('id', 'timecode' + newNum).val('').attr('name', 'timecode' + newNum);
            newElem.children(':eq(1)').attr('id', 'change' + newNum).val('').attr('name', 'change' + newNum);
                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);

                // enable the "remove" button
                $('#btnDel').attr('disabled','');

                // business rule: you can only add 25 names
                if (newNum == 25)
                    $('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                $('#input' + num).remove();     // remove the last element

                // enable the "add" button
                $('#btnAdd').attr('disabled','');

                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });

            $('#btnDel').attr('disabled','disabled');
        });


The main problem I have is the little [] characters in the timecode and change input fields, Couch doesn't seem to like these characters. The JS is supposed to dynamically add new input fields and change their name by adding a number at the end of it.

Any idea how I could dynamically change the name of the two input fields when I click the "Add one" button?
I'm not seeing the square bracket characters in your JS or HTML on that webpage... Perhaps you have already found a solution in this regard?

Could you post your current Couch code for this? Additionally, what is the desired action when the form submits successfully? I am assuming you want to be sent an email with the contents of the form...


There are many ways we could implement this:

1. We could with JS loop through all the form data on submission and place it in a hidden field with the desired formatting. Couch would only need one cms:input tag then and would use the contents of that hidden field in the email.

2. Alternatively, since we know we have a maximum of 25 sections, we could write up all of the HTML and Couch code for this but hide (style="display:none;") the last 24. This is a much more hard-coded solution nevertheless. Your JS would also need to be modified to un-hide a section when clicking add, as well as when clicking remove hide the section and clear its fields.

I'm sure there are other solutions or variations but these are the first to come to mind. If I was doing this I would probably go for the first route. Let me know if this made sense.
Thanks for the reply, I don't really want to hardcode anything, as I probably will let clients do more than 25 changes in the future.

When I add the square brackets ( These ones: [] ) to the name of the input fields couch just gives me this error message:
Code: Select all
ERROR: Tag "input" 'name' contains invalid characters. (Only lowercase[a-z], numerals[0-9] hyphen and underscore permitted


The code that I want to use is still in my first post and includes the brackets, the brackets are there so the JS can automatically add a number at the end of the name, hence all the input fields have a unique name and all values inserted by the client will be emailed to me.

When I remove the square brackets from the html code the "Add one" and "Remove one" buttons still work, but when I press submit on the form it will only email the first input field, not all the ones that was added dynamically.

My code on the website now is without the square brackets just to show how the page looks like, but it isn't functional without the brackets and Couch doesn't like to have brackets in the name tag.

Any ideas?
Hmm, after some more thought I think we have a better solution available.

Do not use any cms:input tags, leave them as normal HTML tags.

This takes place inside of your send_mail tag:
Code: Select all
<cms:repeat count='25' startcount='1'>
   <cms:gpc var="timecode<cms:if k_count != '1'><cms:show k_count/></cms:if>" method='post'/> <cms:gpc var="change<cms:if k_count != '1'><cms:show k_count/></cms:if>" method='post'/>
</cms:repeat>

You probably will want to add some checking for empty values so you don't always generate 25 lines even if only a few fields have data.
Sick! That works.

Now is there any way to remove the form once the submit button have been clicked? and just display a message to the client?
Great! This is what I generally do:
Code: Select all
<cms:form>
   <cms:if k_success>
      **SEND_MAIL TAG**
      Success Message
   <cms:else/>
      **INPUTS/SUBMIT BUTTON**
   </cms:if>
</cms:form>
Thanks for your help, that works perfectly
7 posts Page 1 of 1
cron