3

私は、ユーザーが人に関する情報を入力できる非常に単純なHTMLフォームを持っています。そのフォームの下には、「さらに追加」できるボタンがあります。クリックすると、「person」フォームがコピーされ、ページに追加されます。

これを行うために使用した方法は、HTMLファイルを取得し、関連するセクション（「さらに追加」される部分）をコピーして、Javascriptの変数に保存することでした。フォームに変更を加える必要がある場合、Javascript変数に同じ変更を加える必要があるため、これはかなり厄介になりました。

私の新しい方法は、Javascriptで変数を動的に作成することです。ページが読み込まれると、jQueryを使用して、コードの「追加」部分を取得し、HTMLを変数にキャッシュします。次に、[さらに追加]ボタンをクリックすると、キャッシュされたHTMLをページに追加します。

問題はフォーム入力にあります。サーバー側のコードは、データベースからのユーザーのデータをフォームに自動入力します。フォーム入力なしでそのHTMLデータをキャッシュしたい...

私の現在の関数は次のようになります。

function getHTML($obj, clean)
{
    if (clean)
    {
        var $html = $obj.clone();

        $html.find('input').each(function() { $(this)[0].value = ''; });
    }
    else
    {
        var $html = $obj;
    }

    var html = $html.wrap('<div></div>').parent()[0].innerHTML;
    $html.unwrap();

    return html;
}

動作しません。これが問題を解決するための最良のアプローチであるかどうかもわかりません。

何か案は？

4

2 に答える 2

1

なぜこれがうまくいかないのかわかりません。関数がどのように呼び出されているのか、または関数に何が渡されているのかがわかりません。

私が別の方法で行うことの1つは.clone()、入力を「クリーニング」しているかどうかを作成することだと思います。次に、DOMにある要素をラップおよびアンラップしていません。ステートメントを使用して、if()それをクリーンアップするかどうかを決定してください。

このようなもの：

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() { this.value = ''; });
    }
    return $clone.wrap('<div></div>').parent()[0].innerHTML;
}

または、もう少しjQueryと少ないコード：

function getHTML($obj) {
    return $obj.clone().find('input').val('').end().wrap('<div/>').parent().html();
}

効率は少し劣りますが、ページの読み込み時に1回だけ実行される場合は、おそらく問題にはなりません。

または、いずれにせよ最終的にjQueryオブジェクトにされる場合は、それを返すだけではどうでしょうか。

function getHTML($obj) {
    return $obj.clone().find('input').val('').end();
}

これで、いつでも挿入できるオリジナルのクリーンなクローンが返されました。

編集：

新しい文字列を取得できない理由を今は理解できません。

DOM要素を返す関数は次のとおりです。それを超えて、私は困惑しています！

function getHTML($obj, clean) {
    var $clone = $obj.clone();
    if (clean) {
        $clone.find('input').each(function() {
            this.value = '';
        });
    }
    return $clone.get();  // Return Array of DOM Elements
}

編集：今動作します。

私はほとんどのjQueryを捨てて、の.setAttribute("value","")代わりに使用しましたthis.value。

試してみる：

function getHTML($obj, clean) {
    var clone = $obj[0].cloneNode(true);
    var inputs = clone.getElementsByTagName('input');
    console.log(inputs);
    for(var i = 0, len = inputs.length; i < len; i++) {
        inputs[i].setAttribute('value','');
    }
    return $('<div></div>').append(clone)[0].innerHTML;
}
于 2010-08-30T01:54:02.393 に答える
0

クローンを作成する必要があるフォームの部分を<fieldset>：でラップします。

<form id="my_form">
    <fieldset id="clone_1">
        <input name="field_1_1">
        <input name="field_2_1">
        <input name="field_3_1">
    </fieldset>
</form>
<a href="#" id="fieldset_clone">Add one more</a>

次に、jQueryスクリプトの場合：

$("#fieldset_clone").click(function(event) {
    // Get the number of current clones and set the new count ...
    var cloneCount = parseInt($("fieldset[id^=clone_]").size());
    var newCloneCount = cloneCount++;

    // ... then create new clone based on the first fieldset ...
    var newClone = $("#clone_1").clone();

    // .. and do the cleanup, make sure it has
    // unique IDs and name for server-side parsing
    newClone.attr('id', 'clone_' + newCloneCount);
    newClone.find("input[id^=clone_]").each(function() {
        $(this).val('').attr('name', ($(this).attr('name').substr(0,7)) + newCloneCount);
    });

    // .. and finally insert it after the last fieldset
    newClone.insertAfter("#clone_" + cloneCount);
    event.preventDefault();
});

これにより、入力フィールドのセットが複製されてクリーンアップされるだけでなく、新しいIDと名前も設定されるため、フォームが投稿されると、それらの値が最後のセットによって上書きされることはありません。

また、セットを削除するオプションも追加したい場合（誤って追加しすぎたり、その他の理由で）、<fieldset>一意のIDを持つにラップしておくと、セットにアクセスして実行するのに役立ちます.remove()。 。

お役に立てれば。

于 2010-08-30T02:12:40.300 に答える