1

管理部門の人が顧客情報を追加できるフォームを作成する必要があります。最初のフォーム ページでは、クライアントの名前、住所、連絡先の詳細、およびクライアントに子供がいるかどうかなどの情報を入力できます。

フォームは PHP によって検証されます。クライアントに子がない場合、データはデータベースに保存されます。クライアントに子が存在する場合、フォーム データは非表示のフォーム フィールドに保存され、2 番目のフォーム ページが表示され、最大 10 個の子を追加できます。

ただし、最初のページ ビューでは、1 つのテキスト入力のみが表示されます。JavaScript ボタンを使用すると、より多くのテキスト入力フィールドを動的に追加できます (10 個の制限に達するまで)。

問題は、PHP での検証です。テキスト入力の 1 つに無効な文字列が含まれている場合は、フォームを正しい数のフィールドで再表示し、特別な HTML クラスにエラーを含むフォームを再表示する必要があります (CSS では、使いやすさの理由からそのクラスに赤い境界線を付けます)。 、ユーザーはエラーがどこにあるかをすぐに確認できます)。ただし、フィールドの追加は Javascript で行われるため、フォームは 1 つのフィールドのみで再表示されます。

この問題に対処する方法についてのアイデアは大歓迎です。私は PHP に精通していますが、JavaScript は初めてなので、動的にフィールドを追加するスクリプトを大幅に変更することはできません。

4

1 に答える 1

0

過去に似たようなことを扱ったことがあります。思いつくオプションがいくつかあります。

ボタンをクリックするだけで新しいフィールドを生成する JS コードがあるので、その JS 関数を展開して、いくつかのパラメーターを渡して呼び出すこともできます。パラメータがある場合は、フィールドに既存のデータが入力されます。

次に、エラーが原因で、または PHP からの編集のためにフォームが再表示されている場合は、ページがロードされたときにフィールドを作成してデータを入力できるように、JavaScript に情報を渡します。

説明のために、次のようなものがあるとします。

<a href="#" onclick="addNewFormField(); return false">Add Another Child</a>

そして、あなたは機能を持っています:

function addNewFormField() {
    // create new HTML element to contain the field
    // create new input, append to element container
    // add container to DOM
}

次のように変更します。

function addNewFormField(data) {
    // create new HTML element to contain the field
    // create new input, append to element container
    // add container to DOM

    if (data != undefined) {
        newFormElement.value = data.value;
        newContainerElement.class = 'error';
    }
}

PHP から、onload を実行するコードを追加します。

<script type="text/javascript">
window.onload = function() {  // replace me with jQuery ready() or something proper
    <?php foreach($childInList as $child): ?>
        addNewFormField({ value: '<?php echo $child['name'] ?>' });
    <?php endforeach; ?>
}
</script>

フォームがどのように機能するかを正確に理解していない高レベルの例ですが、過去に同様の方法を使用して、JS で作成されたフィールドにサーバー側からのデータを再入力しました。

編集: 使用できる別の方法は、PHP 側で HTML 要素を作成し、そこから事前入力することですが、コードの重複、JS からの HTML 生成、および PHP からの同じものの HTML 生成が発生する可能性があります。JS 側が PHP によって追加された最初のフィールドを認識できるほどスマートである限り、実装が最も簡単なものを使用できます。個人的には、上記のようにオプションのデータを処理するように JS コードを拡張するだけです。

于 2012-07-26T22:49:15.630 に答える