web-dev-qa-db-ja.com

動的なhtmlフォームの作成

動的に変化するフォームを作りたいです。

プロジェクトを作成するためのフォーム（project_name、project_description ...などのフィールドを含む）があり、プロジェクトには任意の量（0以上）のカテゴリを含めることができます。

私が欲しいのは、ユーザーに別のカテゴリーフィールドを追加するオプションを与えるボタンを表示することです。さらに、カテゴリフィールドのオプションをユーザーが「削除可能」にすることもできます（ユーザーが気が変わったり、間違えたりした場合）。そうするための最良の方法は何でしょうか。 Ajaxタイプのソリューションが欲しいのですが。

これまでの私の解決策は、最後のカテゴリの下に空のdivを残し、ボタンをクリックして、次のdivに使用されるさらに別のdivを含む別のフィールドをそのdivにロードすることです。このソリューションに満足できません。フィールドの数を数え、各divに独自のIDを指定する必要があるため、問題はさらに複雑になります。

これに対するもっと簡単な解決策はありますか？

htmlformsdynamic
9
Nachshon Schwartz

ボタンを使用してフィールドを動的に追加しようとしている場合は、次のようにすることで簡単に追加できます。

HTML：

<form>
    <p>
        <label>Name:</label> <input type="text">
        <label>Age:</label> <input type="text">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
</form>

JS：

$(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

デモ： http://jsfiddle.net/UeSsu/1/

15
dmackerman

しばらく前に、JSONの定義に基づいたフォームジェネレーターを書き始めました。それは機能しますが、いくつかの拡張機能を使用できます。 Prototype.jsを使用して記述されていますが、jQueryに移植するのにそれほど大きな労力はかかりません。

盗むことを歓迎します コード 。 （ソースを表示するだけ）

0
Diodeus - James MacFarlane

私は似たようなことをしました。フィールドを削除するために、私は実際にはフィールドを削除しませんでした。 display:noneでそれらを非表示にし、trueにトリガーする非表示のinput「削除」を行いました。次に、結果を受け取るページは、データベースで削除するフィールドを認識します。

フォームが送信される前に削除されることはありません。それは「2パス」の概念のようなものです。しかし、本当のajaxが本当に必要ない場合は、問題なく動作します。それ以外の場合は、JS remove関数を使用してサーバーを呼び出し、そのIDを持つフィールドを削除するように指示する必要があります。コーディングはもう少し複雑です。

0
Vitorio