2

ここで私がやろうとしていることは次のとおりです。私の Web ページには、たくさんの HTML フォームがあります。個々のフォームが送信された場合は、フォーム全体を何かに置き換えてください。しかし、私はこれを行うことができませんでした。

以下は私のJavaScriptコードです：

$("#commentreply").each(function() {
    var replace = false;
    $(this).submit(function() {
        // http://stackoverflow.com/q/16323360/1222411
        event.preventDefault();

        var url = $(this).attr('action');
        var nameValue = $(this).find('input[name="name"]').val();
        var commentValue = $('#commentEntry').val();
        var projectValue = $(this).find('input[name="project"]').val();
        var idValue = $(this).find('input[name="id"]').val();
        var posting = $.post(url, {
            project : projectValue,
            id : idValue,
            name : nameValue,
            comment : commentValue
        });

        posting.done(function(data) {
            $(this).replaceWith("(HTML content to replace form)");
        }).error(function(){
            alert("An error occurred. Be sure you entered a name and comment and try again");
        });
    });
});

アイデアは、次の HTML コードです。

<form id="commentreply" name="reply" action="/lib/comments/addComment.php" method="post">
    <input type="hidden" name="project" value="project">
    <input type="hidden" name="id" value="-1">
    Name:<input type="text" id="nameEntry" name="name" size="100"><br>
    Comment:<br><textarea id="commentEntry" name="comment" size="255">
        Enter comment here</textarea><br>
    <input type="submit" value="Submit">
</form>

送信ボタンを押すとこうなります。

(HTML content to replace form)

何かアドバイス？.each() を使用して各フォームのアドレス指定を処理するよりも、各フォームに JavaScript を添付する方がよいでしょうか?

4

2 に答える 2

2

$("#commentreply").each(function()一時的なものであり、代わりに複数のフォームを選択すると仮定すると、コードはほぼ正しいように見えます。

しかし、現在、フォームは投稿中です。

$(this).submit(function() {
    event.preventDefault();

あなたは何も妨げていません。

$(this).submit(function(event) { // <-- You need to declare event
    event.preventDefault();

2 番目の質問に答えるには、それぞれを使用できる場合は、コードを複製するのではなく、それぞれを使用してください。

また、フォームが多数ある場合は、ユーザーがフォームの保存を使用するまでイベントをバインドしないでください。これにより、ページが遅くなります。

エラーについてUncaught TypeError: Cannot call method "createDocumentFragment"

確認しないと、次のことが原因である可能性があります。

posting.done(function(data) {
    $(this).replaceWith("(HTML content to replace form)");
}).error(function(){

$(this)フォームではpostingありません。

この行の後に挿入

$("#commentreply").each(function() {
    var $form = $(this);

そして交換

$(this).replaceWith("(HTML content to replace form)");

と

$form.replaceWith("<div>(HTML content to replace form)</div>");

単なる文字列ではなく、HTML 要素にします。

于 2013-10-21T00:08:05.543 に答える
1

私は別のアプローチを使用します：

送信トリガー時 → 親フォームを置換:

$('form').submit(function(event){

    event.preventDefault();
    /* Fire your validation and $.post */

    $(this).replaceWith("<div>new HTML content to replace with</div>");
});

また、アニメーション化することもできます:

$('form').submit(function(event){

    event.preventDefault();
    /* Fire your validation and $.post */

    $(this).slideUp(function(){
        $(this).replaceWith(
            $("<div style='display:none'>new HTML content to replace with</div>").slideDown()
        );
    });
});

テストされていません。

于 2013-10-21T00:07:08.170 に答える