0

動的フォーム要素の「追加」/「削除」機能を備えた単純なフォームを作成しようとしています。最終的に、入力が完了したら、フォームの結果をテキストエリアに表示したいと思います。

私はこのフォーラムを検索し、私の目標のすべてではありませんが、いくつかを実行する何かをまとめることができました. フォーム要素を動的に作成し、それらを削除します。ただし、テキストエリアに結果を表示しようとすると、最初のオプションのみが表示されます。さらに、テキスト入力に何かを入力すると、後続のすべての新しいフィールドにそのユーザー テキストが事前入力されます。最後に、私の要素の 1 つが選択ボックスであるため、そこにある 20 ～ 30 のオプションからユーザーが選択できるようにする方法について、誰かがより良いアイデアを持っているのではないでしょうか?

私の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>

私の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;
        }

私は生粋のプログラマーではないので、javascript と jquery を混ぜて使うべきかどうかわかりません。また、フォーム要素が動的に作成されると、印刷スクリプトに対してサイレントに見えるような気がします。最後に、これに関連するトピックの多くは PHP スクリプトに関係していますが、PHP スクリプトがどのように機能するかを完全には理解していないため、避けたいと思います。

見やすい場合は、これをjsfiddleにしようとしました- http://jsfiddle.net/Vqzk9/

助けてくれてありがとう

4

1 に答える 1

1

最初に行うべき重要なことはcol1、col2をusercommからidに変更することですclass。idユニークだからです。

printthis次に、次のように新しいものを書きます。

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);
  }

ここにjsfiddleがありますhttp://jsfiddle.net/Vqzk9/1/

于 2013-01-24T03:59:33.570 に答える