Forums

Hi,

I have searched the forums for how to add &task=extra to the form URL but have given up. Need some help.

Where and how do I do this?

The Chrono Contact menu item I created displays the link but it is not editable and no other instance of the form URL that I can find is editable.

I am using v3.2 btw.

Thanks in advance

Hi frydesign,

Normally I'd add it in a snippet of PHP or JavaScript because I needed to access the exra code - most often for an AJAX look-up. What do you want to achieve here?

Bob

I may be "barking up the wrong tree" here but... I have a form that I am building for a client to make icon requests. For each icon request, the user enters information via a number of input fields and select form widgets. Each request is with a table row.

It works fine but I want to be able to add a bit of code that allows the user to insert a table row (a request) automatically as needed. Otherwise I would have to create a certain number of rows.

I found a piece of jQuery code that works. I copied the form to an html page, modified it and linked the code. It worked great plus it incremented and renamed the form elements.

The problem is that I cannot get it to work with chronoforms. I placed the form code (w/o script tags) in the "Form JavaScript" box.

I thought perhaps that I'd try it in the extra code box but then could not figure out how to add "&task=extra".

I already have jQuery 1.4.4.min.js linked for other things btw.

Here is the jQuery code snippet I found

// add a row
jQuery.fn.addClone = function() {

    return this.each(function() {

        // get row for cloningg
        var row = $(this).parents('tr');
        var parent = {};

        // use tbody or table parent
        if ( $(row).parents('tbody').length>0) {
            parent = $(row).parents('tbody');
        } else {
            parent = $(row).parents('table');
        }

        // inject clone
        var copy = $(row).clone();
        $(copy).addClass('sadey');
        $(copy).addClass('isclone');
        $(parent).append( copy );

        // remove last td and replace with remove html
        $('.sadey').children('td:last').remove();
        $('.sadey').append('<td><img src="../../images/stories/PTC/APPROVED/remove16x16.png" alt="" " onclick="$(this).killClone()"></td>');

        // increment all ids and names
        var id = ($('.isclone').length + 1);
        $('.sadey').find('*').each(function() {
            var tempId = $(this).attr('id');
            if (typeof tempId != 'undefined' && tempId!='') {
                $(this).attr('id',tempId  + '_' +  id);
            }
            var tempName = $(this).attr('name');
            if (typeof tempName != 'undefined' && tempName!='') {
                $(this).attr('name',tempName + '_' + id);
            }
        });

        // remove active tag
        $('.sadey').removeClass('sadey');
        
    });

};

// remove a row and re-index the clones
jQuery.fn.killClone = function() {

    var row = $(this).parents('tr');
    $(row).remove();

    // re-index
    var id = 2;
    $('.isclone').each(function() {
        $(this).find('*').each(function() {

            var tempId = $(this).attr('id');
            if (typeof tempId != 'undefined' && tempId!='') {
                tempId = tempId.split('_');
                $(this).attr('id',tempId[0]  + '_' +  id);
            }
            var tempName = $(this).attr('name');
            if (typeof tempName != 'undefined' && tempName!='') {
                tempName = tempName.split('_');
                $(this).attr('name',tempName[0]  + '_' +  id);
            }
        });
        id++;
     });
};

I make this call in the last cell in the "icon request row"

<td align="center"><img src="../../images/stories/PTC/APPROVED/add16x16.png" alt=""  onClick="$(this).addClone();" /></td>

Thanks!

Hi frydesign,

The Form JavaScript box is the right location for code like this.

There are a couple of approaches to the expanding form problem. If there is a fixed maximum then it's easiest to add the code blocks to the Form HTML but set them to 'display:none;' and then un-hide them one at a time as needed. There is a problem with vad

If there is no fixed maximum then you need to take the approach used by your jQuery snippet and make a new copy of a chunk of form code each time a new one is needed. The tricky part of this is to keeping the id and input names distinct.

Both approaches have a problem with 'required' validation in CFv3. Because the basic validation is set when the form is loaded you don't want to have hidden inputs that are 'required'. To get round this you have to add Custom Validation as the code blocks are displayed -- or not have any 'required' inputs in them.

I have now idea what the problem is with your JQuery example. I did find a similar MooTools example using Ajax here that looks as though it could be adapted to work with ChronoForms fairly easily.

Bob