Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

  1.  
    On my form here is a link: http://www.graham-rogers.com/formsAppsGuides/Transportation/truck_quote.html
    I have a few repeating sections like Listed Driver, Listed Vehicle and Prior carrier where I have set up the link to add these fields if more are needed. However; the only issue is that it keeps this link at the top in the original field section instead of adding it to the end of the newly created fields. After adding 5 vehicles or even 3 drivers having to scroll back up just to add another one is quite cumbersome. Is there a solution to have the link move or be visible with every newly created section.

    Thanks
    • CommentAuthordbuschho
    • CommentTimeMar 17th 2011
     
    Hello,

    Include the following in your custom code block for your form. Note that is code is unstable and may behave unpredictably in older browsers:

    <script>
    /*
    * Temporary shortcuts
    */

    var _b = wFORMS.behaviors.repeat;
    var _i = wFORMS.behaviors.repeat.instance;

    /**
    * Factory Method.
    * Applies the behavior to the given HTML element by setting the appropriate event handlers.
    * @param {domElement} f An HTML element, either nested inside a FORM element or (preferably) the FORM element itself.
    * @return {object} an instance of the behavior */

    _b.applyTo = function(f) {
    // look up for the all elements that could be repeated.
    // Trying to add event listeners to elements for adding new container.
    // If need create Add new section element
    var _self = this;
    var b = new Array();

    if(!f.querySelectorAll) base2.DOM.bind(f);

    f.querySelectorAll(this.SELECTOR_REPEAT).forEach(
    function(elem){
    if(_self.isHandled(elem)){
    return ;
    }
    if(!elem.id) elem.id = wFORMS.helpers.randomId();

    var _b = new _self.instance(elem);
    var e = _b.getOrCreateRepeatLink(elem);
    e.addEventListener('click', function(event) { _b.run(event, e)}, false);
    _b.setElementHandled(elem); b.push(_b);
    } );

    if(!f.hasClass) {
    f = base2.DOM.bind(f);
    }

    if(f.hasClass(this.CSS_REMOVEABLE)){
    var m = this.getMasterSection(f);
    var _i = wFORMS.getBehaviorInstance(m, 'repeat');
    if(_i) {
    _i.getOrCreateRemoveLink(f);
    } else if(b[0]){
    b[0].getOrCreateRemoveLink(f);
    }
    }

    f.querySelectorAll(this.SELECTOR_REMOVEABLE).forEach(function(e){
    var m = wFORMS.behaviors.repeat.getMasterSection(e);
    var _i = wFORMS.getBehaviorInstance(m, 'repeat');
    if(_i) {
    _i.getOrCreateRemoveLink(e);
    } else if(b[0]){
    b[0].getOrCreateRemoveLink(e);
    }
    });

    for(var i=0;i<b.length;i++) {
    b[i].onApply();
    }
    return b;
    }


    /**
    * Executed once the behavior has been applied to the document.
    * Can be overwritten.
    */
    _i.prototype.onApply = function() {}


    /**
    * Returns repeat link for specified area if it exists,
    * otherwise creates new one and returns it
    * @param {HTMLElement} elem Element repeat link is related to
    * @return {HTMLElement}
    */
    _i.prototype.getOrCreateRepeatLink = function(elem){ var id = elem.id + this.behavior.ID_SUFFIX_DUPLICATE_LINK;
    var e = document.getElementById(id);
    if(!e || e == ''){
    e = this.createRepeatLink(id);

    // Wraps in a span for better CSS positionning control.
    var spanElem = document.createElement('span'); spanElem.className = this.behavior.CSS_DUPLICATE_SPAN; e = spanElem.appendChild(e);

    if(elem.tagName.toUpperCase() == 'TR'){
    var tdElem = elem.getElementsByTagName('TD'); if(!tdElem){ tdElem = elem.appendChild(document.createElement('TD'));
    } else {
    tdElem = tdElem[tdElem.length-1];
    }
    tdElem.appendChild(spanElem);
    }else{
    //elem.appendChild(spanElem)
    elem.parentNode.insertBefore(spanElem, elem.nextSibling); } }

    return base2.DOM.bind(e);
    }

    </script>
  2.  
    Wow! Thats a lot of code. Thanks. I will let you know how everything goes.