0

複製する必要のある次のコードがあります。

<form method="post">
<div id="field-row-container">
    <div id="field-row-1" class="field-row">
        <div class="field-element">
            <label for="Name[1]">Name</label>
            <input type="text" id="Name[1]" name="Name[]" />
        </div>
        <div class="field-element">
            <label for="Email[1]">Email</label>
            <input type="text" id="Email[1]" name="Email[]" />
        </div>
        <hr/>
    </div>
</div>
<div class="form-element">
    <input type="button" class="confirm add-field-row" value="Add" />
    <input type="button" class="danger delete-field-row" value="Delete" />
    <input type="submit" />
</div>

複製された/動的に追加された要素は、と同じ名前にName[]なりEmail[]ますが、それらのIDは増分されます。

以下のJavaScriptは、JosiahRuddellのフォーム複製スクリプトに基づいています。

var template = $('#field-row-container #field-row-1').clone();
window.addForm = function () {
        var parent = $(this).closest('.dynamic-rows').attr('id');
    var fieldRowCount = countRows(parent) + 1;
    var newFieldRow = template.clone().find(':input').each(function () {
        var newId = this.id.substring(0, this.id.length - 3) + "[" + fieldRowCount + "]";

        $(this).prev().attr('for', newId); // update label for
        this.id = newId; // update id and name (assume the same)
        $(this).closest('.field-row').addClass('new-row');
    }).end()
        .attr('id', 'field-row-' + fieldRowCount)
        .appendTo('#field-row-container');
}
$('.add-field-row').click(addForm);

フォームをCodeIgniterに送信し、検証エラーが発生した場合は常に、コントローラーがマルチパートフォームを再読み込みすると、動的に追加された要素と初期フィールドの値が表示されなくなります。

この問題を回避するにはどうすればよいですか？私はこれを解決する方法に途方に暮れています...

役立つ可能性のあるその他の注意事項：

  1. これは、フォームコントローラーが1つしかないコンポーネントマルチパートフォームです。
  2. 私はこれの複数のインスタンスを持っています-住所、教育学位など
  3. CodeIgniterのform_validationライブラリを使用して、サーバー側の投稿の各配列をチェックします
4

1 に答える 1

0

検証に失敗した後、コントローラーがフォームにリダイレクトした後、フォームを含むページをリロードすると、元のページのみがリロードされ、DOM 操作は適用されません。

ajax 経由でフォームを送信する POST リクエストを実行するので、ページを離れることなく応答を処理できます。このようなもの：

$.post('/locationOfController.php', $('#yourForm').serialize(), function(response){
  if(response.valid){
    window.location.href = '/somewhereAfterFormPosted.php';
  } else {
    $('#yourForm').append("<p>"+response.error+"</p>");
  }
}, 'json');

コントローラーを変更して、検証が成功したかどうかに基づいて JSON オブジェクトを返します。上記の例と一致させるには、エラーが発生したときに次のようなものを返します。

{valid: false, error: 'Please fill out the whole form'}

基本的な例として、そのようなものを試してください。複数のフィールドが無効な場合に複数のエラーを返すなど、さらに多くのことができます。

于 2013-02-10T12:33:50.910 に答える