0

以下のコードは、ユーザーが入力できるいくつかの入力フィールドを含む請求書行で構成されています。入力行の初期数は20です。ユーザーは多くの場合、[行の追加]ボタンをクリックして請求書に行を追加する必要があります。このボタンをクリックするたびに、Javascriptを使用して請求書に行を追加します。

問題は、フォームが送信されたときに、最初の20行だけが送信されたように見えることです。javascriptが追加された請求書の行はすべて無視され、POSTされることはありません。

私はかなり前からこの問題を解決しようとしてきましたが、誰かがこれを正しく実装する方法について私を導くことができるかどうか疑問に思いましたか？

よろしくお願いします。

マークアップ/PHP 

      <?php
                for($i=0; $i < 20; $i++){
                    echo '
                    <div class="invoice-line">
                        <div class="prod-id-cell"><input name="rows['.$i.'][id]" type="text" class="prod-id-input">
                            <div class="smart-suggestions">
                                    <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->                              </div>
                        </div>
                        <div class="prod-name-cell">
                            <input type="text" name="rows['.$i.'][name]" class="prod-name-input"/>                                  <div class="smart-suggestions">
                                            <!-- RESULT SUGGESTIONS WILL POPULATE HERE -->
                                    </div>
                                </div>
                        <div class="price-cell"><input name="rows['.$i.'][price]" class="price-input" type="text" /></div>
                        <div class="quantity-cell"><input  name="rows['.$i.'][quantity]" type="text" class="quantity-input"></div>
                        <div class="unit-price-cell"><input name="rows['.$i.'][unit-price]" class="unit-price-input" type="text" /></div>
                        <div class="num-kits-cell"><input name="rows['.$i.'][num-kits]" class="num-kits-input" type="text" /></div>
                        <div class="amount-cell"><input name="rows['.$i.'][amount]" class="amount-input" type="text" readonly="readonly" /></div>
                    </div>';
                }
        ?>

Javascript

//**ADD 5 LINES**//
        $('.invoice-links div').on("click", ".add-five-trigger", function(){
            for(var i=0; i < 5; i++){
                var invoiceLine = $(".invoice-line").first().clone( true, true );
                $(invoiceLine).insertAfter(".invoice-line:last");
                $(".invoice-line:last").find('input').val('').attr('disabled','disabled');
            }
        });
4

3 に答える 3

4

値を無効にしているため、値は投稿されていません。属性が無効になっている入力要素は投稿されません。

また、要素が一意のIDと名前を持っていることを常に確認してください。名前のない要素は投稿されません。

于 2013-01-10T22:08:02.177 に答える
4

name複製された入力の属性を変更するのを忘れました。以前のフィールドを上書きします。

これを使って：

var invoiceLine = $(".invoice-line").last();
var newLine = invoiceLine.clone( true, true );
invoiceLine.after(newLine);
newLine.find('input').each(function() {
    if (this.type == "text")
        this.value = "";
    this.name = this.name.replace(/rows\[(\d+)\]/, function(m, num) {
        return "rows["+(+num+1)+"]";
    });
    this.disabled = true;
});
于 2013-01-10T22:10:44.630 に答える
1

作成した要素に新しい名前を付けているわけではありません。また、それらを無効にしています。

$(".invoice-line:last").find('input').val('').attr('disabled','disabled');

無効にされたフォーム入力は、フォームとともに送信されることはありません。

于 2013-01-10T22:11:46.503 に答える