1


1

jQuery-複数のフォーム送信トリガーが関連のない複数のエラーメッセージ

PHPページにいくつかのフォームがあります。 このページを処理して結果を表示するために、jQuery(&Ajax)を使用しています。 フォームをToDoおよびRegisterフォームと呼びましょう。 対応する処理が送信時に行われるように、両方のフォームに添付されたイベントを送信しました。 ToDoフォームはページの上部にあり、登録フォームはページの下部にあります。 これらのフォームのすぐ上に、フォームの処理時にエラー/成功メッセージを示す対応するタグがあります。 div #result_todoは、ToDoフォームの送信時に取得されたエラーを示します。 div #resultは、登録フォームの送信時に取得されたエラーを示します。

*実際の問題:*情報を入力せずにToDoフォームを送信しようとしたとしましょう。 予想どおり、関連するphpファイルは送信された情報を処理し、div #result_todoにエラーを表示します。 このdivにはクロス画像があり、クリックするとユーザーのディスプレイから#result_todo(&エラーも同様)が完全に消えます。 登録フォームにスクロールして、情報を入力せずに送信しようとすると、予想どおり、関連するphpファイルが送信された情報を処理し、div #resultにエラーを表示します。 現在の問題は、div #result_todoでさえ、実際には表示されないはずのエラーとともに表示されることです。 登録フォームのみを送信したいので、これは不要です。ToDoフォームではなく、このフォームに関連するエラーのみを表示する必要があります。

コーディングの量を減らすために、フォーム送信の成功イベント(?)でエラーメッセージを表示する関数を呼び出しています。 だから何かがうまくいかないのではないかと思う。 私はjQueryとjavascriptingを初めて使用するので、親切に我慢してください。 コードは以下のとおりです。

 function removeElement(divRemove) {
        $(divRemove).fadeOut(1000);
    }

function theResult(data, popuDivDel)    {

    var popuDiv = popuDivDel;

    $(popuDiv).removeClass('success'); //remove the classes to avoid overlapping
    $(popuDiv).removeClass('error'); //remove the classes to avoid overlapping

    //If var success received from the php file is 0, then that means there was an error
    if(data.success == 0)
        {
            $(popuDiv).html(data.message); //attach the message to the div
            $(popuDiv).addClass('error');  //attach the error class to the result div to show the errors
            //Add a link to dismiss the errors
            $(popuDiv).prepend('<a href=\"javascript:;\" onclick=\"removeElement(\''+popuDiv+'\')\"><img src="images/dismiss.png" alt="Dismiss Errors" title="Dismiss Errors" width="20" height="20" align="right" /></a>');
        }
    else if(data.success == 1)  //means that our submission was good
        {
            $(popuDiv).html(data.message); //attach the message to the div
            $(popuDiv).addClass('success'); //attach the success class to the result div to show success msg
            setTimeout(function(){ $(popuDiv).fadeOut('slow'); }, 2000); //attach the animated effect as well
        }

}





$(document).ready(function() {

    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();

        $('#loading_todo').show();
        $('#result_todo').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');

        $('#loading_todo').hide();
        $('#result_todo').fadeIn('slow');
    });


    $('#myForm').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(data) //trigger this on successful reception of the vars from the php file
               {
                   var popuDiv2 = '#result';

                   theResult(data, popuDiv2);
               }

        })
        return false;
    });



    $('#frm_todo').submit(function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(data) //trigger this on successful reception of the vars from the php file
               {
                   var popuDivDel = '#result_todo';

                   theResult(data, popuDivDel);
               }

        })
        return false;
    });
})



ToDo Form




 Enter to-do item:






   




REGISTER Form





            Name

Eメール

電話

コメント

'、$ error); } else \ {$ success = 1; $ message = 'このフォームにご記入いただきありがとうございます +'; } print json_encode(array( 'success' ⇒ $ success、 'message' ⇒ $ message)); die(); ?>

'、$ error); $ message。= $ error ['content']; } else \ {$ success = 1; $ message = 'このフォームにご記入いただきありがとうございます +'; } print json_encode(array( 'success' ⇒ $ success、 'message' ⇒ $ message)); die(); ?>

一般的な目的を達成するために必要なコーディングの量を減らすために関数を効率的に使用しながら、この問題の可能な解決策を提案してください(対応する効果で結果を表示するなど)。

前もって感謝します。

1 Answer


0


Hiya、あなたのコードを一目見ただけで(私はこれを徹底的にテストしていません)、以下のコメントがあります:

  • 「Enter」を押すと両方のフォームが送信されます

  • これを修正するには、「Enter」キーを無効にするか、次のようにします。

  • フォームメソッドを削除します(既に$ .ajax関数にあります)。

  • フォームアクションを$ .ajax関数に移動します

  • 入力 `type =" submit "`を `type =" button "`に置き換えます。

  • .submit`関数を .click`に変更し、ボタンをターゲットにします フォームの代わりに。

  • $ .ajaxStartと$ .ajaxStopを削除します

  • これらの関数は、どちらかのフォームが 提出済み

  • show loadingメッセージを `.click`関数に移動します

  • 非表示の読み込みを移動し、 `.click`の最後にフェードインします 関数

前にも述べたように、私はこれのいずれもテストしていません(PHPサーバーを起動していません)が、Enterを押すと両方のフォームが送信されることを知っています。