Question

I’m trying to create a simple form with a dynamic form element ‘add’/’remove’ feature. Ultimately, once the entries are complete, I would like the form results to display in a textarea.

I searched through this forum and managed to cobble together something that does some, but not all of my goals. It will dynamically make my form elements, and remove them. However, when I try to display the results in my textarea, only the 1st option shows. Further, when I enter something into my text input, all subsequent new fields are prepopulated with that user text. Lastly, since one of my elements is a selectbox, I wonder if someone as a better idea of how to let a user pick among 20-30 options that would be there?

my HTML

    <form name="builder">
    <fieldset>
         <h2>Select your results</h2>

        <div id="IPOX">
            <p>
                <select name="column1" id="col1">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                    <option value="F">F</option>
                    <option value="Z">Z</option>
                </select>
                <select name="column2" id="col2">
                    <option value="POS">POS</option>
                    <option value="NEG">NEG</option>
                    <option value="EQUIV">EQUIV</option>
                </select>
                <input type="text" name="usercomm" id="usercomm">
            </p>
        </div>
        <p><span class="add">Add another row</span>

        </p>
    </fieldset>
    <br>
    <br>
    <p>
        <input type="button" id="submit" value="Done!" onclick="printIHC()" />
    </p>
</form>

my js

    $(window).load(function () {
    $(function () {
        var defaults = {
            'usercomm': '-'
        };

        // separating set and remove
        // note that you could add "defaults" as an arg if you had different
        // defaults for different fieldsets
        var setDefaults = function (inputElements) {
            $(inputElements).each(function () {
                var d = defaults[this.name];
                if (d) {
                    // set with jQuery
                    // we don't need the data - just check on the class
                    $(this).val(d)
                        .addClass('default_value');
                }
            });
        };

        var removeDefaults = function (inputElements) {
            $(inputElements).each(function () {
                if ($(this).hasClass('default_value')) {
                    $(this).val('')
                        .removeClass('default_value');
                }
            });
        };

        setDefaults(jQuery('form[name=builder] input'));

        $("span.add").click(function () {
            // get the correct fieldset based on the current element
            var $fieldset = $(this).closest('fieldset');
            var $inputset = $('p', $fieldset)
                .first()
                .clone()
                .insertBefore($('p', $fieldset).last());
            // add a remove button
            $inputset.append('<span class="remove">Remove</span>');
            setDefaults($('input', $inputset));
            // return false; (only needed if this is a link)
        });

        // use delegate here to avoid adding new 
        // handlers for new elements
        $('fieldset').delegate("span.remove", {
            'click': function () {
                $(this).parent().remove();
            }
        });

        // Toggles 
        $('form[name=builder]').delegate('input', {
            'focus': function () {
                removeDefaults($(this));
            },
                'blur': function () {
                // switch to using .val() for consistency
                if (!$(this).val()) setDefaults(this);
            }
        });
    });     
});
// Print values to textarea
        function printIHC() {
            var myIHC = document.getElementById('output');
            var selectAb = document.getElementById('col1');
            selectAb.onchange = this.value;
            var selectVal = document.getElementById('col2');
            selectVal.onchange = this.value;
            var userTxt = document.getElementById('usercomm');

            ihcOut = 'Column 1\tValue \tComments\n---------------------------------\n' + selectAb.value + '\t\t' + selectVal.value + '\t' + userTxt.value + '\n';
            myIHC.value += ihcOut;
        }

I’m no programmer by trade, so I don’t know if I should be mixing javascript and jquery. i also have a feeling like when the form elements are dynamically created, they appear silent to the print script. Lastly, many of the topics related to this involve PHP scripts, which I would like to avoid as I don’t fully understand how those work.

I tried to make this a jsfiddle, if that is easier to view – http://jsfiddle.net/Vqzk9/

Thanks for any help

Answer 1

The first important thing you should do is changing col1,col2,usercomm from id to class. Because id is unique.

Then I write a new printthis as the following:

function printthis() {
   var ihcOut = 'Column 1\tValue \tComments\n---------------------------------\n';
         $('fieldset p').each(function(){
             if($(this).find('.add').length>0)return;
            var selectAb = $(this).find('.col1').val();
            var selectVal = $(this).find('.col2').val();
           var userTxt = $(this).find('.usercomm').val();
            ihcOut += selectAb + '\t\t' + selectVal + '\t' + userTxt + '\n';
        });
        $('#output').val(ihcOut);
  }

Here is jsfiddle http://jsfiddle.net/Vqzk9/1/