5

jQuery が初めてで、わからないことについて支援を求めています。

複製されたテーブルの行には、<input type="text" name="dt[]" id="dt1">フィールドが含まれています。以下は、複製されるテンプレート行です。

<table id="MyTable" name="MyTable">
    <tr name="tr3" id="tr3">
        <td>
            <input type="text" name="dt[]" id="dt1">
        </td>
        <td>
            <input type="file" name="fff[]" id="ff1">
        </td>
    </tr>
</table>

ユーザーはこれらのフィールドをいくつか作成する可能性があり、フォームを送信する前にそれらすべてをループしてテキストが含まれていることを確認する方法を見つけようとしています。

フォーム要素にアクセスするには、jQuery .on() メソッドを使用する必要があることに注意してください。ループはどのようにコーディングする必要がありますか? 最初に、私はこれを試してきました（編集済み）：

$(document).on('click','#sub1',function() {
    var d1 = $("[name^=dt]").val();
    alert(d1);
    if (d1 !=""){
        $("#TheForm").submit();
    } else {
        alert("Empty fields!");
    }
});

この：

var d1 = $("#dt1").val();
alert(d1);

この：

var d1 = $("#^dt").val();
alert(d1);

しかし、データを取得できませんでした。

編集: 要求に応じて、このコードは行を複製します:

$(document).on('click', '#add_row', function() {
    $("table#MyTable tr:nth-child(4)")
        .clone()
        .show()
        .find("input, span").each(function() {
            $(this)
                .val('')
                .attr('id', function(_, id) {
                    var newcnt = id + count;
                    return id + count;
                    });
        })
        .end()
        .appendTo("table")
        ;

    count++;
    if (count == 2) {
        $('#add_row').prop('disabled', 'disabled');
    }
}); //end add_row Function
4

2 に答える 2

14

HTML の形式が正しくありません。やったほうがいい：

<input type="text" name="dt[]">

そして、次のようにループします。

$('input[name^=dt]').each(function() {
  // code
  alert( this.value ); // $(this).val()
});

あなたがしようとしていることは、属性では不可能idですが、属性では可能nameです。id常に一意である必要があります。

その横に

すべてのに共通のclass名前を使用してからinput、次のようにループすることができます。

$('input.common_cls').each(function() {
  // code
});

ノート

"#^dt"は有効なセレクタではありません。正しい構文は

'input[name^=dt]'

また

input[id^=dt].

以下のように検証を実装できます

// this function will return true if no empty
// input exists, otherwise it will return false

function noEmptyExists() {
    return $('input[name^=dt]').filter(function() {
        return !$.trim( this.value );
    }).length === 0;
}

$(document).on('click','#sub1',function() {
   if( noEmptyExists() ) {
      alert('Success');
   } else {
      alert('Failed');
   }
});

作業サンプル

PROGRESS UPDATEによると

this.val()間違っている。

この行を次のように変更します。

$(this).val()

チャットでの議論の後、クローンの問題を解決した後

完全なコード

$(document).ready(function() {
    var count = 1;
    alert('doc ready');
    var row = $("table#MyTable tr:eq(1)");
    $(document).on('click', '#sub1', function() {
        if (noEmptyExists()) {
            alert('Success');
        } else {
            alert('Failed');
        }
    });

    $(document).on('click', '#add_row', function() {
        row.clone(true).find("input").each(function() {
            $(this).val('').attr('id', function(_, id) {
                var newcnt = id + count;
                return id + count;
            });
        }).end().appendTo("table");
    });

});

function noEmptyExists() {
    return $('input[name^=dt]').filter(function() {
        return !$.trim(this.value);
    }).length === 0;
}

作業サンプル

于 2012-09-14T19:03:14.770 に答える
1

疑問に思っている人にとっては、これが最終的なコードです。thecodeparadoxHTML が ajax によって生成されたため、わずかな違いが生じるため、 の投稿からわずかな変更が加えられています。他の誰かがまったく同じ問題に苦しんでいる場合に備えて、この投稿を追加したのはこのためです。ありそうもないけどねえ。

送信ボタン押下時（<INPUT type="button">）

$(document).on('click', '#sub1', function() {
    var fcnt = 0; //input-FILE
    var dcnt = 0; //input-DOCTITLE
    $('input[name^=fff]').each(function() {
        if($(this).val() == ''){fcnt=fcnt + 1;}
    });
    $('input[name^=dt]').each(function() {
        if($(this).val() == ''){dcnt=dcnt + 1;}
    });
    if (dcnt > 1) {
        alert('Fields marked with an asterisk cannot be empty');
    } else if (fcnt > 1) {
        alert('One of the files is still empty');
    }else{
        $("#TheForm").submit();
    }
});

テーブル行を複製するコード。行要素を var に割り当ててから .clone() メソッドで var を使用する必要があることを理解したので (tcp に感謝)、ここに重要な違いがあります。

$(document).on('click', '#add_row', function() {
    var row = $("table#MyTable tr:eq(3)");
    row.clone(true).find("input").each(function() {
        $(this).val('').attr('id', function(_, id) {
            var newcnt = id + count;
            return id + count;
        });
    }).end().show().appendTo("table");
}); //end add_row Function
于 2012-09-14T22:54:02.760 に答える